258资源分享网

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)模块化