金狮贵宾会

登录
免费开通

深入wepy源码:wepy运行原理剖析

剖析源码之前,, ,,,,我们先往返首一下,, ,,,,wepy 的使用:

<!-- 小程序入口 app.wpy -->
<script>
import wepy from 'wepy';
export default class extends wepy.app {
  ......
}
</script>

让我们一起看看 export 出来的 class,, ,,,,是怎么转换成小程序语言的。。。

深入wepy源码:wepy运行原理剖析

在《深入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逻辑,,,,,,请求优化、promisify API、阻挡器功效等    
    ├─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() {
  let k;
  let originData = this.$data;
  this.$$phase = '$digest';
  this.$$dc = 0;
  while (this.$$phase) {
    this.$$dc++;
    if (this.$$dc >= 3) {
        throw new Error('Can not call $apply in $apply process');
    }
    ......
    this.$$phase = (this.$$phase === '$apply') ? '$digest' : false;
  }
}

$digest() 执行时,, ,,,,主要是遍历 originData,, ,,,,将 originData[k] 和 this[k] 做比照,, ,,,,若是纷歧样,, ,,,,放到 readyToSet中,, ,,,,在循环之后,, ,,,,统一执行 setData 要领。。。

最后,, ,,,,在检查 $$phase 是否有被设置为 '$apply',, ,,,,若是是,, ,,,,则再做一次脏数据检查。。。


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,, ,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,, ,,,,若有知识产权人并不肯意我们使用,, ,,,,若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,, ,,,,仅系客观性形貌,, ,,,,如您需要相识该类商品/服务详细的资讯,, ,,,,请您直接与该类商品/服务的提供者联系。。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,, ,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。

KESION 一直通过手艺立异,, ,,,,提供产品和服务,, ,,,,助力企业向数字化转型,, ,,,,通过科技驱动商业刷新,, ,,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



热门标签
SaaS
上/下篇
  • 微信商城小程序开发注重要点

  • 微信小程序修改自界说input

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
深入wepy源码:wepy运行原理剖析 - KESION