剖析源码之前,,,,,我们先往返首一下,,,,,wepy 的使用:
<!-- 小程序入口 app.wpy -->
<script>
import wepy from 'wepy';
export default class extends wepy.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
├─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
├─...
// 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 写法的焦点。。
// 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',,,,,若是是,,,,,则再做一次脏数据检查。。
KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!
这篇文章针对微信商城小程序开发时经常遇到的问题...
在微信小程序中是不可修改input样式的 甚至修改巨细也不可,,,,,那么怎么做一个自界说样式的input呢...