微信小程序学习：（二）app.js及index.js详解
2024-04-02 02:37:42
微信小程序学习：（二）app.js及index.js详解
项目地址：https://github.com/leoricding/-
在用ide创建小程序项目时，系统默认为我们创建了一个helloword的样例模板：包括查询用户设置、获取用户信息、返回用户名及头像、页面跳转等。下面我就一一解析：
1、app.js
这是小程序的入口，启动小程序时首先调用app.js。
App()注册小程序，然后内部按生命周期执行。
//app.js
//注册小程序
App({onLaunch: function () {console.log("app.js初始化")// 展示本地存储能力// 往本地存储写入log数据，登录日志var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录// 用户登录小程序wx.login({success: res => {// 登录成功后的回调// 发送 res.code 到后台换取 openId, sessionKey, unionIdconsole.log('wx.login登录成功')}})// 重点在这// 获取用户的设置，返回用户的授权信息// 判断用户是否授权，若已经授权，调用wx.getUserInfo接口获取用户信息，// 将获取的信息存到全局状态this.globalData.userInfo// 若用户未授权，直接逃过，进入index页面wx.getSetting({success: res => {// 获取成功的回调console.log('获取用户的当前设置,返回授权后的信息')console.log(res)//判断用户是否授权if (res.authSetting['scope.userInfo']) {// 已经授权，则无需重复授权// 可以直接调用 wx.getUserInfo 获取用户信息，不会弹框console.log("用户已经授权")wx.getUserInfo({success: res => {// 获取用户信息成功后的回调// 可以将 res 发送给后台解码出 unionId// 将用户信息赋值给this.globalData.userInfothis.globalData.userInfo = res.userInfoconsole.log('app.js中获取用户信息成功')console.log(this.globalData.userInfo)// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况// app.userInfoReadyCallback是在index的onLoad函数中定义的// 判断userInfoReadyCallback这个属性是否存在// 如果存在，则执行，将用户数据赋值给globalData及index中的dataif (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},// 全局状态globalData: {userInfo: null}
})
（1）在onLoad函数中，首先将小程序的登录日志写入到本地。
每加载一次小程序，就写入一次。
// 展示本地存储能力// 往本地存储写入log数据，登录日志var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)
（2）小程序登录。
调用wx.login接口，换取 openId, sessionKey, unionId
有后端API才有用，这里没有后端，所以只打印了一下
// 登录// 用户登录小程序wx.login({success: res => {// 登录成功后的回调// 发送 res.code 到后台换取 openId, sessionKey, unionIdconsole.log('wx.login登录成功')}})
（3）读取用户信息。
wx.getSetting()获取用户设置（返回用户的已授权信息）
若已授权（res.authSetting[‘scope.userInfo’]存在），通过wx.getUserInfo调用用户信息。调用成功后，写入全局状态this.globalData.userInfo，然后index页面中通过onLoad函数调用globalData.userInfo，在index页面显示用户信息。
// 重点在这// 获取用户的设置，返回用户的已授权信息// 判断用户是否授权，若已经授权，调用wx.getUserInfo接口获取用户信息，// 将获取的信息存到全局状态this.globalData.userInfo// 若用户未授权，直接逃过，进入index页面wx.getSetting({success: res => {// 获取成功的回调console.log('获取用户的当前设置,返回授权后的信息')console.log(res)//判断用户是否授权if (res.authSetting['scope.userInfo']) {// 已经授权，则无需重复授权// 可以直接调用 wx.getUserInfo 获取用户信息，不会弹框console.log("用户已经授权")wx.getUserInfo({success: res => {// 获取用户信息成功后的回调// 可以将 res 发送给后台解码出 unionId// 将用户信息赋值给this.globalData.userInfothis.globalData.userInfo = res.userInfoconsole.log('app.js中获取用户信息成功')console.log(this.globalData.userInfo)// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况// app.userInfoReadyCallback是在index的onLoad函数中定义的// 判断userInfoReadyCallback这个属性是否存在// 如果存在，则执行，将用户数据赋值给globalData及index中的dataif (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},
但这里有一个问题，如果index页面加载完了，wx.getUserInfo才返回数据怎么办？
因为wx.getUserInfo是通过网络异步获取用户数据，无法保证一定在index页面加载之前就能获取到啊。
这里就用了userInfoReadyCallback函数，这个函数是在index的onLoad函数定义的。
app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}
就是一个简单的赋值函数，将res赋值给index中的data。
而在app.js中的wx.getUserInfo中判断app.userInfoReadyCallback是否存在，如果存在，那么就说明index中的onload函数已经为app写入了userInfoReadyCallback方法，也就是说wx.getUserInfo是通过网络异步获取用户数据成功，实在index加载数据之后，这时就需要调用这个方法，将wx.getUserInfo的返回信息，写入到index中的data。
2、index.js
// index.js
// 获取应用实例
// 用于调用全局状态app.globalData
const app = getApp()// 注册当前页面index
Page({data: {motto: 'Hello ',userInfo: {},hasUserInfo: false,// 用于判断微信是否支持button.open-type.getUserInfo用法canIUse: wx.canIUse('button.open-type.getUserInfo')},// 生命周期函数，页面加载时onLoad: function () {console.log('index.js初始化')// 判断是否已经获取到用户信息if (app.globalData.userInfo) {// 已经获取用户信息// 将用户信息赋值给userInfo// 将hasUserInfo设置为truethis.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})console.log("写入data数据成功")this.routerGo()} else if (this.data.canIUse){// 未获取到用户信息，但微信支持button.open-type.getUserInfo用法// 定义app.userInfoReadyCallback函数，// 这个函数在app.js调用// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 微信不支持button.open-type.getUserInfo用法// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},// 绑定自定义点击事件getUserInfo// 获取用户信息// 回调函数，e就是用户授权后的返回值// 若用户授权，用户信息保存在e.detail.userInfo// 若用户拒绝，e.detail.userInfo为undefinedgetUserInfo: function(e) {console.log("index按钮点击了，调用用户信息")console.log(e)console.log(e.detail.userInfo)// 将用户信息app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})this.routerGo()},// 事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},// 实现页面自动跳转routerGo(){console.log('跳转函数调用了')// 定义一个周期函数interval// 判断image图片是否渲染，渲染成功后自动跳转let interval=setInterval( ()=> {if (wx.createSelectorQuery().select('image')) {console.log(wx.createSelectorQuery().select('image'))// 跳转// 跳转成功后执行回调函数clearIntervalwx.navigateTo({url: './../lession/lession',success:()=>{console.log(this)clearInterval(interval)},})}}, 500) }})（1）获取全局应用app
这样可以通过app.globalData.userInfo获取全局状态。
// index.js
// 获取应用实例
// 用于调用全局状态app.globalData
const app = getApp()
（2）通过Page（）注册当前页面。
（3）其中data是index页面的数据
data: {motto: 'Hello ',userInfo: {},hasUserInfo: false,// 用于判断微信是否支持button.open-type.getUserInfo用法canIUse: wx.canIUse('button.open-type.getUserInfo')},
（4）然后执行onLoad生命周期函数。
看着复制，其实逻辑很简单。
条件一：判断app.globalData.userInfo中有信息，写入data。
this.routerGo()是我自己写的页面跳转函数，自动跳转到下一个页面。可忽略。
条件二：判断app.globalData.userInfo中没有信息&&微信版本支持button.open-type.getUserInfo（this.data.canIUse）获取用户信息的方式，那么就是说wx.getUserInfo是网络请求，可能会在 Page.onLoad 之后才返回，所以定义app.userInfoReadyCallback方法，在wx.getUserInfo的成功回调中执行。
条件三：判断app.globalData.userInfo中没有信息&&微信版本不支持，那么直接调用wx.getUserInfo（）接口。
onLoad函数执行完毕。
// 生命周期函数，页面加载时onLoad: function () {console.log('index.js初始化')// 判断是否已经获取到用户信息if (app.globalData.userInfo) {// 已经获取用户信息// 将用户信息赋值给userInfo// 将hasUserInfo设置为truethis.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})console.log("写入data数据成功")this.routerGo()} else if (this.data.canIUse){// 未获取到用户信息，但微信支持button.open-type.getUserInfo用法// 定义app.userInfoReadyCallback函数，// 这个函数在app.js调用// 由于 wx.getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 微信不支持button.open-type.getUserInfo用法// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},（5）绑定捕获事件。
// 事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},// 绑定自定义点击事件getUserInfo// 获取用户信息// 回调函数，e就是用户授权后的返回值// 若用户授权，用户信息保存在e.detail.userInfo// 若用户拒绝，e.detail.userInfo为undefinedgetUserInfo: function(e) {console.log("index按钮点击了，调用用户信息")console.log(e)console.log(e.detail.userInfo)// 将用户信息app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})this.routerGo()},
（6）自定义方法，实现页面跳转。
routerGo(){console.log('跳转函数调用了')// 定义一个周期函数interval// 判断image图片是否渲染，渲染成功后自动跳转let interval=setInterval( ()=> {if (wx.createSelectorQuery().select('image')) {console.log(wx.createSelectorQuery().select('image'))// 跳转// 跳转成功后执行回调函数clearIntervalwx.navigateTo({url: './../lession/lession',success:()=>{console.log(this)clearInterval(interval)},})}}, 500) }
微信小程序学习：（二）app.js及index.js详解相关推荐
- wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
- php微信小程序物流进度推送,微信小程序 消息推送php服务器验证实例详解
微信小程序 消息推送php服务器验证实例详解 设置页面("设置">>"开发设置"): 1.设置服务器域名 注意http和https协议的不同. 2. ...
- 微信小程序学习(二)
转载请注明出处:https://blog.csdn.net/Strugglein/article/details/80474386 今天带来第二节的学习,今天主要学习目标 1. 配置文件可配置项 2. ...
- 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...
- 微信小程序Ⅴ [获取登录用户信息，重点openID(详解)]
♩ 背景 其实这篇文章几个月前就写完了,但是这段时间,微信小程序官方文档有了更新,同事在我自己的实际操作过程中,发现之前写的过于繁杂,所以现在进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3.2 ...
- 微信小程序form表单提交到MYSQL实例详解(PHP)
1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSO ...
- 微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转 此方法能够从跳转的页面会回到当前页面 1 w ...
- 从微信服务器获取用户信息,微信小程序Ⅴ [获取登陆用户信息，重点openID(详解)]...
♩ 背景 其实这篇文章几个月前就写完了,可是这段时间,微信小程序官方文档有了更新,同事在我本身的实际操做过程当中,发现以前写的过于繁杂,因此如今进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3. ...
- api 定位 微信小程序 精度_微信小程序3种位置API的使用方法详解
获取位置 获取当前的地理位置.速度.当用户离开小程序后,此接口无法调用:当用户点击"显示在聊天顶部"时,此接口可继续调用. wx.getLocation(object) 获取位置 ...
- 微信小程序——云函数三方库request-promise的使用详解
三方库request-promise的使用: 1)首先在浏览器打开github,然后在搜索框输入request搜索,如下图所示: 找到第一个request打开,然后下滑找到我们需要的request-p ...
最新文章
- 17.SpringMVC核心技术-拦截器
- 晨风机器人php接口程序_AuthorizationSystem
- Linux操作oracle——关闭、停止、重启
- Tensorflow-gpu 在Anaconda中使用出现问题的解决方式
- delete 和 delete [] 的真正区别
- 微信公众号配置后台接入
- SQL中 left join 左表合并去重实用技巧
- 模型加速——卷积通道裁剪的学习笔记
- jfinal后台获取权限树，以供前台展示
- Python处理mongo结果中的ObjectId类型为字符串
- Python3.6之py文件转exe文件
- Oracle 购买价格 和 服务费 计算方式
- java广告投放系统_1.互联网广告投放管理系统 V1.0 源代码.doc
- Catboost参数全集
- Linux C/C++程序员 但行好事 莫问前程 Linux系统下 解决Qt5无法连接MySQL数据库的方法
- 立方体在三维坐标中的旋转（3D,Spining）
- xtend怎么使用_Java替代Xtend又推出了另一个块摇摆更新
- ubuntu 回到根目录，回到上一级 常用指令
- LinkedIn领英怎么避免封号？封号怎么解决？（建议收藏）
- CoreDNS篇8-健康检查