微信小程序的执行流程是怎么样的?( 三 )


我们一般是在全局上会有一个对象 , 保存所有需要Native执行函数的对象 , 比如这里的onLaunch , Native在执行到一个状态时候会调用js全局环境该对象上的一个函数
因为我们js注册native执行是以字符串key作为标志 , 所以Native执行的时候可能是window.app['onLauch...']('参数')
而我们在window对象上会使用bind的方式将对应的作用域环境保留下来 , 这个时候执行的逻辑便是正确的
这里在小程序全局没有找到对应的标识 , 这里猜测是直接在app对象上 , Native会直接执行APP对象上面的方法 , 但是我这里有个疑问是View级别如果想注册个全局事件该怎么做 , 这个留到后面来看看吧 , 这里是Native载入webview时 , 会执行对象定义的onLaunch事件 , 在下面的代码看得到:

微信小程序的执行流程是怎么样的?

文章插图
 
这里会结合app.json获取首先加载页面的信息 , 默认取pages数组第一个 , 但是具体哪里获取和设置的代码没有找到 , 也跟主流程无关 , 我们这里忽略……然后我们看到代码执行了onShow逻辑:
微信小程序的执行流程是怎么样的?

文章插图
 
然后流转到注册微信容器层面的事件 , 我觉得 , 无论如何 , 这里应该是像微信容器注册事件了吧 , 但是我找不到全局的key
微信小程序的执行流程是怎么样的?

文章插图
 

微信小程序的执行流程是怎么样的?

文章插图
 

微信小程序的执行流程是怎么样的?

文章插图
 
Page流程
如果有微信小程序的同学 , 麻烦这里指点一下 , 是不是猜测正确 , 顺便可以帮忙说明下这里 , 这里也是我觉得全局key , 被Native调用的点 , 然后 , 逻辑上会获取默认view的类开始做实例化 , 我们这里来到view级别代码:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello Wor11ld',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求 , 可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
他首先一来便获取了当前app实例:
const app = getApp()
其次开始了view实例化流程 , 这个是Page的类入口 , 大家要注意view.js只是定义的类 , 但是其实例化应该在全局的控制器 , 其实例化在这里完成的:
微信小程序的执行流程是怎么样的?

文章插图
 

微信小程序的执行流程是怎么样的?

文章插图
 
Page实例化后会自己执行onLoad以及onShow , 但是这里的onLoad以及onShow就看不出来分别了
微信小程序的执行流程是怎么样的?

文章插图
 
总结
我们这里一起瞎子摸象一般对微信小程序架构做了简单的摸索 , 这里发现事实上小程序流程与自己所想有一些出入 , 这里初步认为流程是这样的:
① 我们写好小程序代码后 , 提交代码
② 在发布流程中我们的代码经过构建流程 , app.json以及入口的index.html(伪造页面) , 重新组装为一个只有js代码的空页面


推荐阅读