一、注册程序 App() 方法
参数 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLanuch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) |
onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台显示,会触发 onShow |
onHide | Function | 生命周期函数 -- 监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide |
onError | Function | 错误监听函数 | 当小程序发生脚本错误,或者 API 调用失败时,会解决 onError 并带上错误信息 |
其它 | Any | 开发者可以添加任意的函数或数据到 Object 参数中, 用 this 可以访问 |
注意:onLaunch 函数全局只触发一次
前台、后台:用户当前界面运行或操作小程序为前台;当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。
销毁:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正销毁。此时代表小程序生命周期结束。
App({
onLaunch: function() {
// 启动时执行的初始化工作
},
onShow: function() {
// 小程序进入前台执行操作
},
onHide function() {
// 小程序进入后台时执行操作
},
onError:function(msg) {
console.log(msg)
},
globalData: ‘Hello World‘
})
微信团队为开发者提供了全局的 getApp() 函数,可以用来获取小程序实例。使用 getApp() 函数的示例代码如下:
var appInstance = getApp()
console.log(aaInstance.globalData)
注意:
- App() 方法须在 app.js 中注册,且不能注册多个;
- 不要在定义 App() 内的函数中调用 getApp(),使用 this 就可以拿到 App 实例;
- 通过 getApp() 获取实例之后,不要私自调用生命周期函数(如 onLaunch、onShow、onHide等);
二、注册页面 Page() 方法
在逻辑层,Page() 方法用来注册一个页面。Page()接受一个object 参数,用于指定页面的初始数据、生命周期函数、事件处理函数等。Page() 方法,每个页面有且仅有一个,存在于该页面的.js 文件中。object 参数说明如下:
参数 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期函数-- 监听页面加载 |
onReady | Function | 生命周期函数-- 监听页面初次渲染完成 |
onShow | Function | 生命周期函数-- 监听页面显示 |
onHide | Function | 生命周期函数-- 监听页面隐藏 |
onUnload | Function | 生命周期函数-- 监听页面卸载 |
onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作 |
onReachBottom | Function | 页面上拉触底事件的处理函数 |
onShareAppMessage | Function | 用户点击右上角分享 |
其它 | Any | 开发者可以添加任意的函数或数据到 object 参数中, 用 this 可以访问 |
同样,微信为开发者提供了 getCurrentPage() 函数,用来获取当前页面的实例。
注意: 不要在 App() 中进行 onLaunch 操作的时候调用 getCurrentPage, 此时 page 还没有生成 。
1. 生命周期函数使用介绍
1) onLoad 函数
一个页面只会调用一次,参数可以获取 wx.navigateTo 和 wx.redirectTo 及 <navigator./> 中的 query。
2) onShow 函数
onShow 是页面显示时执行的操作。每次打开页面都会调用一次。
3) onReady 函数
onReady 是页面初次渲染完成时执行的操作,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,对页面的设置(如 wx.setNavigationBarTitle) 请在 onReady 之后设置。
4) onHide 函数
onHide 是页面隐藏时执行的操作。当 navigateTo 或底部进行 tab 切换时调用。
5) onUnload 函数
onUnload 是页面卸载时执行的操作。当进行 redirectTo 或 navigateBack 操作的时候调用。
2. 页面相关事件处理函数
onPullDownRefresh 是下拉刷新时执行的操作,例如:监听用户下拉刷新事件
- 需要在页面 .json 文件的 window 配置顶中开启 enablePullDownRefresh;
- 当处理完数据刷新后,wx.stopPullDownRefresh 可以停止当前页面的下拉刷新;
onShareAppMessage 是用户分享时返回定制的分享内容:
- 只有定义了此事件处理函数,右上角才会显示 “分享” 按钮,用户点击分享按钮的时候会调用。
onShareAppMessage 自定义分享如下:
字段 | 说明 | 默认值 |
---|---|---|
title | 分享标题 | 当前小程序名称 |
path | 分享路径 | 当前页面 path 必须是心 / 开头的完整路径 |
示例如下:
Page({
onShareAppMessage: function() {
return {
title: ‘自定义分享标题‘,
path: ‘/path/user?id=123‘
}
}
})
3. 页面栈及其实例获取
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页,新页面入栈 |
Tab 切换 | 当前页面出栈,新页面入栈 |
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
注意: 不要尝试修改页面栈,会导致路由以及页面状态错误。
3. 页面路由
在小程序中,所有页面的路由由全部框架进行管理,对于路由的触发方式以及页面生命周期如下表:
路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
---|---|---|---|
初始化 | 小程序打开的第一页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigator" /> | onLoad, onShow | onUnload |
页面重定向 | 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirect" /> | onShow | onUnload |
页面返回 | 调用 API wx.navigateBack 或用户按左上角返回按钮 | onLoad, onShow | onUnload |
Tab 切换 | 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab" /> 或多 Tab 模式下用户切换 Tab | 第一次打开onLoad,onShow 否则 onShow | onHide |
三、微信原生 API
微信原生的 API 共有八大类: 网络 API, 媒体API, 文件API, 数据缓存API, 位置API,设备API,界面API以及微信开放接口,下面列表表格,文体大家 一眼过目,增加映像:
类别 | API名称 | 主要用途 |
---|---|---|
网络 API | wx.request | 发起网络请求 |
wx.uploadFile | 上传文件 | |
wx.downloadFile | 下载文件 | |
wx.connectSocket | 创建 WebSocket 连接 | |
wx.onSocketOpen | 监听 WebSocket 打开 | |
wx.onSocketError | 监听 WebSocket 错误 | |
wx.sendSocketMessage | 发送 WebSocket 消息 | |
wx.onSocketMessage | 接收 WebSocket 消息 | |
wx.closeSocket | 关闭 WebSocket 连接 | |
wx.onSocketClose | 监听 WebSocket 关闭 | |
媒体 API | wx.chooseImage | 从相册选择图片或者拍照 |
wx.previewImage | 预览图片 | |
wx.getImageInfo | 获取图片信息 | |
wx.starRecord, wx.stopRecord | 开始录音,结束录音 | |
wx.playVoice,wx.pauseVoice,wx.stopVoice | 播放语音,暂停播放语音,结束播放语音 | |
wx.createAudioContext | 创建并返回 audio 的上下文对象 | |
wx.getBackgroundAudioPlayerState | 获取音乐播放状态 | |
wx.playBckgroundAudio | 播放音乐 | |
wx.seekBackgroundAudio | 控制音乐播放进度 | |
wx.pauseBackgroundAudio | 暂停播放音乐 | |
wx.stopBackgroundAudio | 停止播放音乐 | |
wx.onBackgroundAudioPlay | 监听音乐开始播放 | |
wx.onBackgroundAudioPause | 监听音乐暂停 | |
wx.onBackgroundAudioStop | 监听音乐结束 | |
wx.chooseVideo | 从相册选择视频或者拍摄 | |
wx.createVideoContext | 创建并 video 的上下文对象 | |
文件 API | wx.saveFile | 保存文件 |
wx.getSaveFileList | 获取本地已保存的文件列表 | |
wx.getSaveFileInfo | 获取本地的文件信息 | |
wx.removeSaveFile | 删除本地存储的文件 | |
wx.openDocument | 新开页面打开文件,支付格式:doc、xls、ppt、pdf、docx、xlsx、pptx | |
数据缓存 API | wx.getStorage(wx.getStorageSync) | 异步获取本地数据缓存(同步) |
wx.setStorage(wx.setStorageSync) | 异步设置本地数据缓存(同步) | |
wx.removeStorage(wx.removeStorageSync) | 异步移除本地指定key(同步) | |
wx.clearStorage(wx.clearStorageSync) | 异步清理本地数据缓存(同步) | |
位置 API | wx.getLocation | 获取当前位置 |
wx.chooseLocation | 打开内置地图选择位置 | |
wx.openLocation | 打开内置地图 | |
wx.createMapContext | 创建 map 上下文对象 | |
设备信息 API | wx.getNetworkType | 获取网络类型 |
wx.getSystemInfo(wx.getSystemInfoSync) | 获取系统信息(同步) | |
wx.onAccelerometerChange | 监听重力感应数据 | |
wx.onCompassChange | 监听罗盘数据 | |
makePhoneCall | 调起拨打电话 | |
wx.scanCode | 调起客户端扫码界面 | |
界面 API | wx.showToast、wxHideToast | 显示消息提示框,隐藏消息提示框 |
wx.showModal | 显示模态弹框 | |
wx.showActionSheet | 显示操作菜单 | |
wx.setNavigationBarTitle | 设置当前页面标题 | |
wx.showNavigationBarLoading | 显示导航条加载动画 | |
wx.hideNavigationBarLoading | 隐藏导航条加载动画 | |
wx.navigateTo,wx.navigateBack | 新窗口打开页面,退回上一个页面 | |
wx.redirectTo | 原窗口打开页面 | |
wx.switchTab | 跳转到 tabBar 页面 | |
wx.createAnimation | 创建动画 | |
wx.createCanvasContext | 创建 Canvas 绘图上下文 | |
wx.createContext | 创建 绘图上下文 | |
wx.drawCanvas | 绘图 | |
wx.canvasToTempFilepath | 保存画布内容 | |
wx.hideKeyboard | 隐藏键盘 | |
Page.onPullDownRefresh | 监听页面用户下拉刷新 | |
wx.stopPullDownRefresh | 停止下拉刷新动画 | |
开放 API | wx.login | 登录 |
wx.getUserInfo | 获取用户信息 | |
wx.requestPayment | 发起微信支付 |
注:表中所有列 API 会随着开发工具升级而更新,请关注工具的更新日志提醒
一个笨笨的码农,我的世界只能终身学习!