微信小程序学习：（二）app.js及index.js详解
微信小程序学习：（二）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, unionId
console.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.userInfo
this.globalData.userInfo = res.userInfo
console.log('app.js中获取用户信息成功')
console.log(this.globalData.userInfo)
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
// app.userInfoReadyCallback是在index的onLoad函数中定义的
// 判断userInfoReadyCallback这个属性是否存在
// 如果存在，则执行，将用户数据赋值给globalData及index中的data
if (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, unionId
console.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.userInfo
this.globalData.userInfo = res.userInfo
console.log('app.js中获取用户信息成功')
console.log(this.globalData.userInfo)
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
// app.userInfoReadyCallback是在index的onLoad函数中定义的
// 判断userInfoReadyCallback这个属性是否存在
// 如果存在，则执行，将用户数据赋值给globalData及index中的data
if (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设置为true
this.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.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
// 绑定自定义点击事件getUserInfo
// 获取用户信息
// 回调函数，e就是用户授权后的返回值
// 若用户授权，用户信息保存在e.detail.userInfo
// 若用户拒绝，e.detail.userInfo为undefined
getUserInfo: function(e) {
console.log("index按钮点击了，调用用户信息")
console.log(e)
console.log(e.detail.userInfo)
// 将用户信息
app.globalData.userInfo = e.detail.userInfo
this.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'))
// 跳转
// 跳转成功后执行回调函数clearInterval
wx.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设置为true
this.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.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
（5）绑定捕获事件。
// 事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
// 绑定自定义点击事件getUserInfo
// 获取用户信息
// 回调函数，e就是用户授权后的返回值
// 若用户授权，用户信息保存在e.detail.userInfo
// 若用户拒绝，e.detail.userInfo为undefined
getUserInfo: function(e) {
console.log("index按钮点击了，调用用户信息")
console.log(e)
console.log(e.detail.userInfo)
// 将用户信息
app.globalData.userInfo = e.detail.userInfo
this.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'))
// 跳转
// 跳转成功后执行回调函数clearInterval
wx.navigateTo({
url: './../lession/lession',
success:()=>{
console.log(this)
clearInterval(interval)
},
})
}
}, 500)
}