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/debug/wxadoc/dev/api/
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
后跟需要导入的外联样式表的相对路径，用;
表示语句结束。
网友评论