微信小程序开发基础之逻辑层

Posted 2020-11-27 homehtml

一、注册程序 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 会随着开发工具升级而更新，请关注工具的更新日志提醒

一个笨笨的码农，我的世界只能终身学习！