第一个页面

小程序本身是一套完善的架构,引入webpack的编译流程是为了更好的工程化,规范化项目实施,同时也解决了一些小程序的痛点,比如npm包的引入,动态样式编写等等

封装

为更高效的实现小程序的产出,我们对小程序做了融合式的封装,当然这一层封装即保留了小程序原有的编程模式,同时也兼顾了aotoo的自有风格。我们对于前端构建的出发点比较独特。

开始编写第一个页面

首页效果图
我的img

目录结构

还记得《安装》中提到的项目xxx吗?进入到该项目中,这里我们有准备一套demo的示例及源码,从pages/index开始

  • pages/index
  • workspace结构说明

    • index.js
      首页js
    • index.json
      首页配置文件
    • index.styl
      首页样式文件,(使用stylus)
    • index.wxml
      首页模板文件

模板部分

index/index.wxml

<view class="boxer">
  <!-- 使用list组件来构建页面 -->
  <ui-list list="{{menuData}}" /> 
</view>

JS部分

简单版index/index.js

const app = getApp()
const Pager = require('components/aotoo/core')  
Pager({
  data: { ...... },
  onLoad: function(){},
  onReady: function(){},
  onShow: function(){}
})
Pager是我们的封装库,针对Page变量。其余部分为参考小程序的原生写法

完整的index/index.js

完整源码看这里

const app = getApp()
const Pager = require('components/aotoo/core')
Pager({
  data: {
    menuData: Pager.list({   // Pager.list将menuData封装成list实例,通过Pager.getElementsById('menuData)获得该实例
      itemClass: 'li item-normal',  // 指定每一项的样式名
      listClass: 'ul',  // 指定列表容器的样式名
      data: [
        { title: [
            {title: 'string', class: 'item' },
            {title: '简单字符', class: 'item icon-arrows-a-r color-999', aim: 'demo-string'},
        ]},
        { title: [
            {title: 'response', class: 'item' },
            {title: '响应标签', class: 'item icon-arrows-a-r color-999', aim: 'demo-link'},  // aim方法会自动匹配到Pager中的同名方法
        ]},
        ...
        ...
      ]
    }),
  },
  // 通用tap方法的别名方法
  aim: function(e, param, inst) {
    const target = e.currentTarget
    const currentDset = target.dataset
    const theAim = currentDset.aim
    if (theAim) {
      switch (theAim) {
        case 'demo-string':
          wx.navigateTo({
            url: '../demo/index?demo=string'
          })
          break;
        case 'demo-link':
          wx.navigateTo({
            url: '../demo/index?demo=link'
          })
          break;
        ...
        ...
    }
  },
})

通过代码,可以了解到,我们将逻辑,业务的重点放在js当中,删减了大部分的模板中的逻辑部分

关键字说明

Pager

const Pager = require('components/aotoo/core')    

通过命名可以发现,Pager是对小程序Page变量的封装

Pager.list

Pager({
  data: {
    menuData: Pager.list({......})
  }
})
// 通过Pager.getElementsById('menuData')拿到list实例

使得data中的key成为list实例的key名。该方法非常简单,仅仅是设置了menuData.$$id变量,$$id是一个关键变量,后面会讲到

menuData.data

观察上面的代码实例,menuData的数据会传入到<ui-list .../>组件中,而menuData.data数据最终将渲染成小程序的结构

  <view class="boxer">
    <!-- 使用list组件来构建页面 -->
    <ui-list list="{{menuData}}" /> 
  </view>

title

{ title: [
    {title: 'string', class: 'item' },
    {title: '简单字符', class: 'item icon-arrows-a-r color-999', aim: 'demo-string'},
]},

上述代码示例中的title是元件item的约定key名,支持String/Array/Object三种类型的数据,会根据数据类型生成<text ...><view ...>等结构, 上面代码示例生成大致如下结构

  <view>
    <text class='item'>...</text>
    <view class='item icon-arrows-a-r color-999' bind:tap='aim' >...</view>
  </view>

aim方法

tap的别名事件响应方法,为了应对细节点击事件,我们统一将tap事件(有规则)指定到Page.aim方法中,方便集中处理事件逻辑

运行

$ aotoo dev  # 进入开发模式,支持热更新
# aotoo build  # 进入生产模式,产出代码用于上传到小程序服务端

接着在微信开发工具中打开