逻辑层¶
getApp
和 getCurrentPages
方法,分别用来获取 App 实例和当前页面栈。
const appInstance = getApp()
console.log(appInstance.globalData)
注册小程序实例¶
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
}),
// 全局变量
globalData: {
userInfo: null
}
})
页面构造器¶
Page({ })
构造器¶
适合构造简单的页面
const util = require('../../utils/util.js')
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
Component({ })
构造器¶
适合构造复杂的页面
Component({
data: {
text: "This is page data."
},
// 方法需要放在 methods: { } 中
methods: {
onLoad: function(options) {
// 页面创建时执行
},
onPullDownRefresh: function() {
// 下拉刷新时执行
},
// 事件响应函数
viewTap: function() {
// ...
}
}
})
模块导入¶
common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
// 对外暴露接口
module.exports.sayHello = sayHello // 方法1,推荐
exports.sayGoodbye = sayGoodbye // 方法2,不推荐
xxx.js
// 引入模块
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
API¶
事件监听¶
以 on...
开头,回调函数作为参数,在事件被触发时被调用
wx.onCompassChange(function (res) {
console.log(res.direction)
})
同步¶
以 ...Sync
结尾,执行结果通过返回值直接获取
也有一些其他的同步 API 不以 ...Sync
结尾,如 wx.createWorker
,wx.getBackgroundAudioManager
等
try {
wx.setStorageSync('key', 'value')
} catch (e) {
console.error(e)
}
异步¶
大多数 API 都是异步的
默认 promise 方式调用
wx.chooseImage().then(res => console.log('res: ', res))
当接口参数 Object 对象中包含 success/fail/complete
时将按 callback 方式执行,无返回值。
wx.chooseImage({
success(res) {
console.log('res:', res)
}
})
云开发¶
wx.cloud.callFunction({
// 云函数名称
name: 'cloudFunc',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res.result) // 示例
},
fail: console.error
})
// 此外,云函数同样支持promise形式调用