這篇文章主要講解了“wepy運行原理是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“wepy運行原理是什么”吧！

分析源碼之前，我們先來回顧一下，wepy 的使用：

<!--小程序入口app.wpy-->
<script>
importwepyfrom'wepy';
exportdefaultclassextendswepy.app{
......
}
</script>

讓我們一起看看 export 出來的 class，是怎么轉換成小程序語言的。

在《深入wepy源碼：wpy文件編譯過程》中，我們介紹了 wepy-cli 是如何編譯 wpy 文件的，里面有說到，complie-script.js 在處理 script 代碼時，會加入 wepy 初始化的代碼。編譯之后 dist 目錄下的文件，如下：

//dist/app.js
App(require('./npm/wepy/lib/wepy.js').default.$createApp(_default,{}));

//dist/pages/index.js
Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index,'pages/index'));

可以看出，主要調用了$createApp和$createPage方法。在看這兩個方法之前，我們先來看一下 wepy 的目錄結構，以便后面的分析更好理解。

wepy目錄結構

├─wepy
├─src
├─app.js全局app邏輯，請求優化、promisifyAPI、攔截器功能等
├─base.js定義了$createApp和$createPage等方法
├─component.js組件邏輯，臟值檢查、組件通信等
├─event.js事件方法
├─mixin.js混合方法
├─native.js空，代碼里用于app.js中重新定義wx接口
├─page.js繼承component，page的一些優化
├─util.js工具方法
├─wepy.js入口文件
├─test
├─...

createApp和createPage

$createApp

//dist/app.js
App(require('./npm/wepy/lib/wepy.js').default.$createApp(_default,{}));

$createApp()返回了一個類型為 object 的 config，里面包含了['onLaunch', 'onShow', 'onHide', 'onError']這些方法。

還執行了$initAPI()，主要利用Object.defineProperty的 get 方法，將返回封裝為 promise，這里也是 API 實現 promise 寫法的核心。

$createPage

//dist/pages/index.js
Page(require('./../npm/wepy/lib/wepy.js').default.$createPage(Index,'pages/index'));

$createPage()和$createApp()類似，只不過是返回的是 Page 的方法，此外，還在生命周期中，添加了數據臟值檢查$apply()。

數據綁定

wepy 使用臟數據檢查對原生小程序setData進行封裝，在函數運行周期結束時執行臟數據檢查。如果在異步函數中更新數據時，則需要手動執行$apply()。

在$createPage()中，會在生命周期中調用$apply()，來看一下它的定義：

$apply(fn){
if(typeof(fn)==='function'){
fn.call(this);
this.$apply();
}else{
if(this.$$phase){
this.$$phase='$apply';
}else{
this.$digest();
}
}
}

$$phase標識是否有 臟數據檢查 在運行，如果沒有，則執行$digest()。

$digest(){
letk;
letoriginData=this.$data;
this.$$phase='$digest';
this.$$dc=0;
while(this.$$phase){
this.$$dc++;
if(this.$$dc>=3){
thrownewError('Cannotcall$applyin$applyprocess');
}
......
this.$$phase=(this.$$phase==='$apply')?'$digest':false;
}
}

$digest()執行時，主要是遍歷originData，將originData[k]和this[k]做對比，如果不一樣，放到readyToSet中，在循環之后，統一執行setData方法。

最后，在檢查 $$phase 是否有被設置為'$apply'，如果是，則再做一次臟數據檢查。

總結

以上是生活随笔為你收集整理的wepy运行原理是什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。