微信小程序开发--逻辑层

App

App()

App()

this

App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})

App.prototype.getCurrentPage()

getApp()

getApp()

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

App()

app.js

App()

getApp()

this

getCurrentPage()

getApp()

Page

Page()

this

//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.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})

初始化数据

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

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

生命周期函数

onLoad

wx.navigateTo

wx.redirectTo

<navigator/>

onShow

onReady

wx.setNavigationBarTitle

onReady

onHide

navigateTo

tab

onUnload

redirectTo

navigateBack

页面相关事件处理函数

onPullDownRefresh

config

window

enablePullDownRefresh

wx.stopPullDownRefresh

onShareAppMessage

Page({
onShareAppMessage: function () {
return {
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123'
}
}
})

事件处理函数

<view bindtap="viewTap"> click me </view>

Page({
viewTap: function() {
console.log('view tap')
}
})

Page.prototype.setData()

setData

this.data

setData() 参数格式

array[2].message

a.b.c.d

<!--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>{{object.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'
})
}
})

getCurrentPages()

getCurrentPages()

页面栈

生命周期

页面的路由

wx.navigateTo

<navigator
open-type="navigate"/>

wx.redirectTo

<navigator
open-type="redirect"/>

wx.navigateBack

wx.switchTab

<navigator
open-type="switchTab"/>

Bug & Tip

bug

iOS/Android

6.3.30

bug

iOS/Android

6.3.30

文件作用域

getApp()

App()

// app.js
App({
globalData: 1
})

// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++

// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

模块化

module.exports

exports

exports

module.exports

exports

module.exports

node_modules

node_modules

// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

require(path)

var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})