逻辑层

微信小程序简单分为「逻辑层」和「视图层」，前者就是应用程序的代码逻辑，对应页面文件夹中的js文件。后者就是页面布局、模板、样式等，对应wxml和wxss文件。

这里我们简单介绍一下逻辑层。

App 注册小程序实例

我们创建工程后，工程根目录下自动生成了一个app.js，我们必须在这里调用App()，并根据具体业务逻辑，绑定小程序的生命周期方法等函数。

例子：

App({
  onLaunch: function () {
    // 生命周期回调函数 小程序初始化
  },
  ...
})

具体参考文档即可，非常简单。

Page 注册页面实例

前面有整个小程序的生命周期，每个页面也有生命周期，除此之外，还有页面的逻辑等代码。这些内容需要在对应文件夹中的js文件里编写。

Page({
  data: {
    text: 'This is page data.'
  },
  onLoad(options) {
    // 生命周期回调函数 页面加载
  },
  ...
}

注意：data比较重要，它表示我们逻辑层绑定到页面的数据，这和Vue中的用法很像。

一个小例子

下面代码，我们绑定一个data中的变量到页面，并设置一个按钮，按钮点击时，改变页面上显示变量的值。

<view>
  <view>{{msg}}</view>
  <button bindtap='onBtnClick'>测试按钮</button>
</view>

Page({
  data: {
    msg: ''
  },
  onBtnClick: function() {
    this.setData({msg: 'hello'});
  },
  ...
})

注意：修改页面data时，必须用setData()，这又和React很像了。

页面路由

微信小程序的页面跳转由微信框架管理，页面访问历史以栈的形式存储，支持跳转，后退等。跳转时，能够携带参数，就和浏览器中URL差不多。

例子，点击按钮跳转：

onBtnClick: function() {
  wx.navigateTo({
    url: '../mytest2/mytest2'
  });
}

其实非常简单，wx.navigateTo()能够实现页面跳转，向该函数传递一个app.js中定义的URL，可以携带URL参数。

巨坑预警：定义在tabBar中的页面，不能通过路由的方式跳转，只能通过wx.switchTab()。