微信小程序开发方案（2）

这里就是小程序给业务人员可以看到的代码了，我们从这个代码以及运行，基本可以将微信小程序开发方案的梗概猜测一番，这里首先看看其全局控制器APP：

 

//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)

}

}

})

}

}

})

},

globalData: {

userInfo: null

}

})

 

一个应用只会有一个APP实例，而小程序为这个单例提供了几个基本的事件定义，我们用的最多的应该是onLaunch、onShow、onHide（我还没写微信小程序开发方案的细节，所以猜测）：

 

 

 

 

 

我们这里来追溯一下小程序架构层的执行逻辑，从APP到一个view实例化是怎么做的，这里首先明确几个点：

 

 

 

① 微信小程序事实上依旧是提供的webview执行环境，所以我们依旧可以在js环境中访问window、location等属性

 

 

 

② 微信小程序开发方案提供的展示的全部是Native定制化的UI，所以不要去想DOM操作的事

 

 

 

这里各位可以想象为，小程序界面中有一块webview在执行真正的代码逻辑，只不过这个webview除了装载js程序什么都没做，而所有的页面渲染全部是js通过URL Schema或者JSCore进行的Native通信，叫Native根据设置的规则完成的页面渲染。

 

 

开发小程序方案系列1、2、3、4、（更新完毕）

 

 

 

作者：叶小钗  转自公众号  前端大全

http://www.cnblogs.com/yexiaochai/p/9346043.html

 

 

未完待续……