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

2018-11-08 admin

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

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

图片描述

原文链接:https://segmentfault.com/a/1190000016950072

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44903.html

文章标题:微信小程序开发基础之逻辑层

相关文章
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
哪些互联网产品适合用HTML5开发?
J.P. Morgan(摩根大通集团)不久前发布了有关2013年互联网公司股票的研究报告,其中在预测2013年趋势时,提及移动互联网有关web和app之间的辩论将在3到5年内继续,而摩根认为这对于搜索产品和谷歌是利好消息,因为用户需要处理复...
2015-11-12
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
回到顶部