微信小程序

开发事项
1. 页面的展示；
2. 页面上的用户交互事件；
3. 页面间的切换逻辑；
4. 数据存储与网络调用；
前端架构
1. service：业务逻辑层，按业务类型整合相关的方法，向上暴露接口，降低表现层对业务逻辑的关注；
2. pages：表现层，一个页面一个文件夹，放置这个页面涉及的资源；
3. common：放置一些和项目相关的公共代码，如转码，工具包，公共样式设置等；
4. lib：放置一些最底层、第三方的库；
5. widgets：一些通用的带UI的小组件，独立闭环的交互；
项目目录
1. 全局
  1. app.js：小程序的全局脚本文件，用来监听并处理小程序的生命周期函数，声明全局变量，调用API等；
    1. App({
      1. onLaunch: function( ){ }, //启动时的初始化操作
      2. onShow: function( ){ }, //从后台进入前台的操作；
      3. onHide: function( ){ }, //从前台进入后台的操作
      4. globalConf: {
        
        indexDate: ‘’,
        
        matchDate: ‘’
        
        }
      5. globalData: ‘’
      6. )}
  2. app.json：小程序的全局配置文件，会被页面继承；当页面有设置自己的配件文件时，则以页面自己的为准；
  3. app.wxss：全局样式文件；
2. 页面
  1. pages
    1. page1
      1. page1.js
        
        Page({
        
        data: {}, //页面数据
        
        onLoad: function( ){ }, //页面加载时的初始化操作；
        
        onReady: function( ){ }, //加载就绪后的操作；
        
        onShow: function( ){ }, //页面打开时的操作；
        
        onHide: function( ){ }, //页面隐藏时的操作；
        
        onUnLoad: function( ){ }, //页面关闭时的操作；
        
        viewTap: function( ){ //页面元素事件触发的操作；
        
        this.setData({
        
        test: ‘set some data for updating now’
        
        })
        
        }
      2. page1.json
      3. page1.wxss
    2. page2
    3. …（略）
两个开发步骤
1. 创建实例：即编写3个 app 前缀的文件，定义、配置及页面执行关联；
2. 创建页面：编写页面结构与事务处理逻辑；
MIMA架构示意图
1.
结构
1. 页面层
2. 逻辑层
3. 数据层
  1. 页面临时数据或缓存：在 Page( ) 中，使用 setData 函数，将数据从逻辑层发往视图层；
  2. 文件存储（本地存储），使用以下3个API：
    1. wx.getStorage：获取本地数据缓存；
    2. wx.setStorage：设置本地数据缓存；
    3. wx.clearStorage：清除本地数据缓存；
  3. 网络存储和调用
    1. wx.request：发起网络请求；
    2. wx.uploadFile：上传文件
    3. wx.downloadFile：下载文件；
    4. wx.navigateTo：新窗口打开新页面；
    5. wx.redirectTo：原窗口打开新页面；
开发流程
1. 配置
  1. 全局配置：app.json
  2. 页面配置：page.json
2. 逻辑层
  1. 注册程序：app( ) 方法
  2. 注册页面：page( ) 方法
  3. 模块化
    1. 将一些公共的代码抽离一个或多个单独的 js 文件，作为一个模块；
    2. 模块通过 module.exports 对外暴露接口以供其他 js 文件引入使用，示例如下：
      1. // common.js
        
        function sayHello(name) {
        
        console.log(‘Hello ‘ + name + ‘!’)
        
        }
        
        module.exports = {
        
        sayHello: sayHello
        
        }
      2. // call.js 引用的文件
        
        var common = require(‘common.js’)
        
        Page({
        
        helloMIMA: function( ){
        
        common.sayHello(‘MIMA’) //使用的场景；
        
        }
  4. 微信的原生 API
    1. 八大类：网络、媒体、文件、数据缓存、位置、设备、界面、微信开放接口；
    2. API 的名字如果以 on 开头，例如 wx.onSocketOpen，表示监听某个事件发生，它接受一个回调函数为参数，当事件触发时，会调用这个回调函数；
    3. 其他 API 接口接受一个 Object 对象做为参数，这个对象可以指定 success、fail、complete 三个参数，参数值为函数，分别代表接口调用成功、失败、完成后要执行的回调函数；
3. 视图层
  1. WXML
    1. 数据绑定
      1. 简单绑定
      2. 运算：三元运算{{ flag? true : false }}、算数运算{{ a + b }}、逻辑判断{{ length > 5 }}、字符串运算{{ "hello" + name }}、数据路径运算{{ object.key }}, {{ array[0] }}；
      3. 组合：在花括号内组合元素，组成新的数组或对象、支持扩展运算符展开对象
        1
        {{[ zero, 1, 2, 3 ], Data: { zero: 0 }}}；
    2. 条件语句
      1. wx: if 和 wx: else
      2. 可以通过 block 加条件，一次判断多个标签；
    3. 列表语句
      1. wx: for，数组当前项的下标变量名默认为 index，变量名默认为 item；
      2. 使用 wx: for-item 和 wx: for-index 可以用来指定元素和下标的变量名，例如： wx: for-item = “itemName” wx: for-index = “indexName”
      3. wx: for 支持嵌套；
      4. 同样可以通过 block 来渲染一个包含多个节点的块；
      5. 可以使用 wx: key 来指定项目的唯一标识符，并进行需要的操作，例如固定位置的排序
        
        方法示例：给对象增加一个 unique 属性，然后每个 item 这个属性的值不同，然后在标签中设置 wx: key = unique；由于每个 key 的值不同，这样就可以通过 unique 的值来唯一标识每个标签，对其进行操作；
    4. 模板
      1. 可以通过定义模板 <template name = "templName">，在模板内放代码段，然后通过 <template is="templName" data = "{{... item}}"> 来引用模板；
      2. 模板有自己的作用域，只能使用 data 属性传入的数据；
      3. is 属性可以通过花括号放入语句来做一些运算，例如动态判断采用哪个模板名字，以渲染哪个模板，例如 is="{{ value? even : odd }}“
    5. 引用
      1. import
        
        通过 import 可以在当前文件中使用目标文件定义的 template；
        
        import 有作用域的限制，只能一层，不能嵌套，即 A 引用 B ，B 引用 C，则 A 可以使用在 B 中定义的模板，但不能使用 C 中定义的模板；
      2. include
        
        include 可以将目标文件除模板代码块（