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

前端小智 · · 22 次点击 · · 开始浏览    

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

一个笨笨的码农,我的世界只能终身学习!

图片描述

本文来自:Segmentfault

感谢作者:前端小智

查看原文:微信小程序开发基础之逻辑层

22 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet