微信小程序的学习（2）-逻辑层

由于本人是一个Android开发者，所以是带着和Android Native 应用开发做比较的想法来学习微信小程序的开发，这样子学习可以更好的理解微信小程序。

小程序开发框架的逻辑层是由JavaScript编写的。逻辑层的代码都是写在.js文件中，顾名思义，就是业务逻辑的处理，就是对需要展示的数据进行处理，然后处理完成后就发送到视图层，进行视图渲染；同时，逻辑层也需要接受视图层的事件反馈，进行相应的逻辑处理。

举个例子：我想在应用登录后的界面显示用户的头像和名称。

那么，逻辑层需要的处理就是在登录成功后启动页面时候，需要去获取并保存用户的头像信息，名称；在成功获取数据之后，就发送到视图层进行渲染。

在JavaScript的基础上，小程序开发框架做了一些修改，用以方便地开发小程序。

* 增加了App和Page方法，进行程序和页面的注册。这就类似于Android开发中的Application和Activity，Android中Application就代表一个应用，这个对象在启动应用时会创建，只是在应用第一次启动时被创建，而且这个对象是全局的，单例的；Activity就是向用户展示的一个界面。小程序中的App就类比Android的Application，代表的是一个微信小程序；Page就类比Android中的Activity，就是一个页面，用于向用户展示数据。

* 提供丰富的API，如微信用户数据的获取，扫一扫，支付等微信特有能力。因为这个小程序是依赖着微信而存在的，所以，一些微信的基本功能都会有，其实这就是一种微信系的轻应用。

等等.....

1）App()

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。其生命周期函数有onLaunch、onShow、onHide。

小程序开发框架提供了了全局的getApp()函数，可以获取到小程序实例。

所以我们在开发小程序的时候，一些需要全局调用的函数可以定义在App中，还有一些全局使用的变量也可以在App中定义。还有一些初始化操作可以放在onLaunch函数中调用。

2）Page

Page就类似与Android中的Activity，就是向用户展示数据的一个页面。Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

示例代码：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化数据

data数据是作为页面的第一次渲染，data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串，数字，布尔值，对象，数组。

渲染层可以通过WXML对数据进行绑定。

实例代码：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

数据刷新

setData函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。注意：直接手动修改this.data是无效的，无法改变页面的状态，还会造成页面展示的数据和this.data保存的数据不一致的问题。

setData()函数的参数格式

接受一个对象，以key,value的形式表示将this.data中的key对应的值改变成value。

单次设置的数据不能超过1024kb，请尽量避免一次设置过多的数据。
（注意，当this.data中不存在对应的key值，则该key属性会添加到this.data中，一般不要这样使用）

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>

//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
})

PS：微信小程序开发中，逻辑层的处理是最重要的；深刻地理解开发框架的逻辑层的原理，有利于我们写出优雅的代码。在这里，我只是列出了逻辑层一些需要重要了解的知识点，需要更详细的了解，还是需要去到小程序官方开发网站。https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161122