IOS程序员学微信小程序开发系列《四》：逻辑层、视图层、配置文件

作者：廖马儿

1.配置文件

page.json来决定

初始化项目的时候，文件自动生成app.json来对小程序进行全局配置。

2.逻辑层（App Server）

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 在 JavaScript的基础上，做了一些修改，以方便地开发小程序。

1)增加 App 和 Page方法，进行程序和页面的注册。

App（）函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App.prototype.getCurrentPage()
getCurrentPage() 函数用户获取当前页面的实例。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

2）App()叫做注册程序，Page()叫做注册页面

Page（）接受一个 object参数,
指定页面的初始数据、生命周期函数、事件处理函数等

3）初始化数据

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

渲染层可以通过WXML 对数据进行绑定。
eg:下面这个是一段wxml的代码

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

下面这个是一段.js代码，data是初始化页面数据

Page({
   data: {
   text: 'init data',
   array: [{msg: '1'}, {msg: '2'}]
   }
})

4）页面的生命周期函数

a)onLoad: 页面加载
一个页面只会调用一次。
参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。这个是什么意思呢？

onLoad:function(options){
    // options 就是参数
    // options.redirect
}

b)onShow: 页面显示

每次打开页面都会调用一次。

c)onReady: 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

对界面的设置如wx.setNavigationBarTitle请在onReady之后设置

d)onHide: 页面隐藏

当navigateTo或底部tab切换时调用。

e)onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

5)页面相关事件处理函数

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。
需要在config的window选项中开启enablePullDownRefresh。

6)事件处理函数

除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行Page 中定义的事件处理函数。

eg:

// .wxml
<view bindtap="tap_view"> click me!</view>

// .js
Page({
    tap_view:function(){
        console.log('view taped!');
    }
})

7)Page.prototype.setData()

setData函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

注意：
1.直接修改 this.data无效，无法改变页面的状态，还会造成数据不一致。
2.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new 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'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

这里的this指的是.js文件

8）.页面的路由

小程序中所有页面的路由全部由框架进行管理
路由方式：

a.初始化
打开新页面：调用 API wx.navigateTo 或使用组件<navigator />（节点方式）

b.打开新页面,相当于iOS中的nav的push
调用 API wx.navigateTo 或使用组件 <navigator />，调用后路由前页面函数：onHide

c.页面重定向
调用 API wx.redirectTo 或使用组件 <navigator />,调用后路由前页面函数：onUnload

d.页面返回
调用 API wx.navigateBack或用户按左上角返回按钮

e.Tab切换

多Tab模式下用户切换Tab

9）文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置

10)模块化

我们可以将一些公共的代码抽离成为一个单独的js 文件，作为一个模块。模块只有通过 module.exports
才能对外暴露接口。

module.exports = {
    sayHello: sayHello
}
function sayHello(name){
    console.log('Hello' + name + '!');
}
// 使用

var common = require('common.js');   
Page({
    helloMaer:function(){
        common.sayHello('Maer');
    }
})

11)API

小程序开发框架提供许多原生api，可以方便的掉漆微信提供的功能，eg:获取用户信息，本地存储，微信支付等.

wx.on开头的API是监听某个时间发生的API接口，接受一个CALLBACK函数作为参数。当该时间触发的时候，会调用callback函数。
如果没有特殊约定，其他的api接口都接受一个object作为参数。
object中可以指定success, fail, complete来接收接口调用结果。

success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数（调用成功、失败都会执行）
这里举例几个常用的api接口：

wx.request 发起的是https请求。一个微信小程序，同时只能有5个网络请求连接。
数据 API 列表：

wx.getStorage // 获取本地数据缓存
wx.setStorage // 设置本地数据缓存
wx.clearStorage // 清除本地数据缓存
获取网络类型

wx.getNetworkType(OBJECT)

eg：

wx.getNetworkType({
    success:function(res){
        var networkType = res.networkType;  // 返回网络类型2g,3g,4g,wifi
    }
})

界面 API 列表：

参考：https://mp.weixin.qq.com/debu...

3.视图层

框架的视图层由WXML 与 WXSS编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

组件(Component)是视图的基本组成单元。

1)WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

wxml作用主要有：数据绑定、列表渲染、条件渲染、模板、事件、引用

数据绑定：

// wxml
<view>{{message}}</view>

// page.js
Page({
data:{
message: 'Hello world'!
}
})

列表渲染

// wxml
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
    data:{
        array：[0, 1, 2, 3, 4]
    }
})

条件渲染

<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
     data: { 
        view: 'MINA' 
     }
 })

<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

 <block wx:if="{{true}}"> 
    <view> view1 </view> 
    <view> view2 </view>
</block>

模板

总结：在属性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template>
扩展运算符...来将一个对象展开

Page({
    data:{
         staffA:{firstname:'a', lastname:'b'}
    }
})

注意： 如果js:

Page({
data:{
foo:'a',
bar:'b'
}
})`

<template data={{foo, bar}}> data组合对象为：{foo:'a', bar:'b'}

<template data={{'A':foo, 'B':bar}}> data组合对象为:{'A':'a', 'B':'b'}

模板拥有自己的作用域，只能使用data传入的数据。

事件
eg:

<view bindtap="add">{{count}}</view>

Page({
    data:{
         count:1
    }
    add: function(e){
         this.setData({
             count:this.data.count + 1
         })
    }
})

2)wxml

为了适应广大的前端开发者，WXSS具有 CSS 大部分特性。 同时为了更适合开发微信小程序，对 CSS 进行了扩充以及修改。

尺寸单位

rpx（responsive pixel） 规定屏幕宽为750rpx

样式导入

使用@import

语句可以导入外联样式表，@import

后跟需要导入的外联样式表的相对路径，用;

表示语句结束。

相关链接：
IOS程序员学微信小程序开发系列《一》：入门及框架
IOS程序员学微信小程序开发系列《二》：组件，API，工具
IOS程序员学微信小程序开发系列《三》：经验及知识点