微信小程序手记

一、登录时请求结果滞后页面加载的问题

转自：http://www.jb51.net/article/102366.htm

问题描述：

用户首次后再次进入小程序时，我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流，初始化用户信息（看需求，如果需要自动登录）。当我们通过第三方服务器跟微信建立请求时，微信需要用户确认是否公开信息。在请求的同时，我们的首页index已经加载完成，图中初始化数据显示为空。无论我们将请求信息写在app.js的onload中或者index.js中，当我们点击确认后，请求信息才执行success方法，将第三方服务器返回的数据处理，这样的因需要用户点击而产生的滞后性，我们很难要求程序停下来等我们。

解决方案：

通过设计一个“临时加载页”来达到我们想要的效果，这个临时加载页类似于Android的欢迎界面，但当数据加载完成，或者我在第二次进入时，将自动跳转到我们的主页。

二、关于官方示例中为防止由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回的解决方案

这个问题也是和第一个问题差不多，官方这里提到的问题重点是在请求到数据之前页面加载并需要完成数据读写，但是此时并没有数据。我们返回到第一个问题，第一个问题的描述的是还没请求到数据的时候页面加载完成之后存在空白数据的问题（这里的前提是已经解决了官方说的这个问题，但是在等待请求加载完成这段时间页面的数据还是空白的）

官方用回调来解决这个问题，即在数据请求完成之后拿到数据才去执行数据的写入：

// index.js// 定义一个函数，注意这个函数式挂载到app对象上app.userInfoReadyCallback = res => {      this.setData({        userInfo: res.userInfo,        hasUserInfo: true      })  }  

// app.jsif (this.userInfoReadyCallback) {      this.userInfoReadyCallback(res)  }// 在app.js获取用户信息之后判断app对象上是否有userInfoReadyCallback方法，// 如果有，这就说明index.js里面的Page.onLoad执行了，请求成功发生在页面加载之后，这样就通过回调执行了数据的写入页面；// 如果没有userInfoReadyCallback方法，说明在page onload之前请求已经完成，这时候数据已经存放在全局对象globalData上，页面加载的时候访问全局对象上的数据就行了

注意：

这里有一个非常关键的地方需要注意，官方在index.js定义userInfoReadyCallback这个方法的时候使用了ES6的箭头函数，这是关键所在，如果这里换成普通的function定义是不行的会报错，因为换成function定义之后，在app.js请求回调中调用的时候，函数里面this指向的是app对象，而不是当前页面的Page对象

一个很简单的例子：

function foo() {   setTimeout( () => {      console.log("id:", this.id);   },100);}foo.call( { id: 42 } );// 输出 => id: 42

三、授权登录获取信息时用户点了拒绝

解决方案参考小米商城小程序的方法

小米商城的好像必须用户授权登录才能浏览首页，如果需求是允许用户随便看看