微信小程序源代码如何获取数据，如何获取和渲染数据

我们在使用微信开发工具新建一个项目时，其实已经为我们生成代码事例了，我们先创建一个项目看一下微信为我们自动生成的代码：

我们先看一下app.js代码：

App({

onLaunch: function () {

// 展示本地存储能力

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

// 获取用户信息

wx.getSetting({

success: res => {

if (res.authSetting['scope.userInfo']) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

wx.getUserInfo({

success: res => {

// 可以将 res 发送给后台解码出 unionId

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

},

fail:res=>{

wx.showToast({

title: 'getUserInfo failed',

icon: 'none',

duration: 2000

})

}

})

}else{

wx.showToast({

title: '没有授权',

icon: 'success',

duration: 2000

})

}

}

})

},

globalData: {

userInfo: null

}

})

上面的代码共发三部分，分别是本地存储能力展示，微信登录展示和用户信息获取功能展示。由上可知通过wx.login方法得到res.code，然后将其发到后台调用微信接口可以获取openid等信息。

wx.getSetting方法

该方法是获取用户设置信息，通过此方法得到用户对当前程序的授权设置情况，如是否有获取头像权限。

用户权限配置检查

if (res.authSetting[‘scope.userInfo’])

这个意思是用户是否设置了用户授权，如果没有，我们会弹出一个 “没有授权”提示。如果已经授权了，我们就使用wx.getUserInfo方法获取资料。注意的是，因为这个方法是访问网络远程的数据，因为在访问等待结果之前，可能我们的默认页面（小程序第一个页面也是就我们常说的首页）已经加载完了。那么怎么判断我们的页面加载早于这个方法的结果返回之前呢？这里有一个巧妙的方法。我们先看一下index页面的js文件内容：

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse('button.open-type.getUserInfo')

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

console.log('page onload');

if (app.globalData.userInfo) {

console.log('set data');

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse){

console.log('canIUse');

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res => {

console.log('get call back');

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

console.log('兼容处理');

// 在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res => {

console.log('get user info success')

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

},

getUserInfo: function(e) {

console.log('do get user info'+e);

if(e){

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

}else{

console.log('用户选择了拒绝');

}

}

})

上面代码，我们重点看onLoad这个方法里，这里做了三个判断，第一种情况判断app.globalData.userInfo是否有值 ，如果有那就直接给页面的数据赋值。

第二种情况判断当前微信是否支持
button.open-type.getUserInfo这个版本属性，如果有，那么重点来了：我们给app页面增加一个方法userInfoReadyCallback，这个方法作用就是接收wx.getUserInfo

的结果，然后赋值给index页面中的数据。

最后的else里是调用的wx.getUserInfo方法，意思是上面即没有得到用户数据，也不支持
button.open-type.getUserInfo版本属性，那就只好每次访问这个页面都调用wx.getUserInfo方法获取用户信息了。

最后如果有同学会有疑问，那么userInfoReadyCallback方法能不能在app.js中定义呢？答案是不行，因为这样userInfoReadyCallback永远不会有空的情况，我们也就无从知晓page页面是否先于app中的代码加载完毕。