在蚂蚁金服的开放平台上看到一些贴子，说提供一个工具，一键转换微信小程序为支付宝小程序。我与百度的人交流时，也听到相似的东西。其实都没有这么简单，它们最多是将一些循环条件分支指令改一下名，将一些文件的后缀名改一下，更多的差异点在API与各式的配置对象上。
本文将重点说一下小程序的组件机制，之前娜娜奇的组件机制是基于template标签实现的，但百度的template有点BUG，给他们提了，不知现在修了没有。与template机制在快应用又出入太大，于是转向用自定义组件机制开发娜娜奇的组件机制。下面链接有一些相关的测试与说明
各种小程序的差异点
此外，微信小程序和百度小程序限制代码容量大小为4M，支付宝小程序为2M。
经测试，使用了自定义组件机制的确是比template实现的简洁一些。但自定义组件机制是一个比较高级的特性，因此兼容性上比template差多了。只能内部推到各方改进了。
微信在Component的配置对象提供了一些对象如methods， lifetimes，pageLifetimes，来减少其直辖的配置项。
比如说lifetimes收纳了created、attached、ready、moved、detached这些生命周期钩子，pageLifetimes收纳了onShow, onHide这些与页面切换的钩子，methods收纳剩下的方法，另外还有许多配置项。的确，微信小程序独自发布这么久，肯定是最完善的
支付宝的自定义组件机制没有properties，只有props，并且作用也不一样，props只是指定默认值，不是规定参数类型。支付宝也没有lifetimes与pageLifetimes对象，生命周期函数的名字也不一样 didMount 、didUpdate 、didUnmount，数量也少了，但从名称来看，支付宝在内部应该运行一个自己的迷你React。
其他方面，支付宝没有 dataset， selectComponent，selectAllComponents，getRelationNodes这些东西，但支持了早被React废弃的mixin机制。
支付宝没有created这样的钩子是相当麻烦的事，因此积级推动他们加上这个钩子！
百度的自定义组件机制与微信的较为相近，但也没有lifetimes与pageLifetimes对象，只有4种生命周期钩子：created，attached，ready，detached。有selectComponent，selectAllComponents。
快应用的页面与组件的配置对象都是一样，但它没有构造函数，只是要求我们export一个对象
有props对象，用来定义类型与默认值，也有与state相似的data对象，也有三个做了访问限制的private, protected, public对象。生命周期钩子上有onInit、onReady、onDestroy这三个。
从组件的设计来看， 微信 > 百度 > 支付宝 > 快应用
因此想兼容这么多种小程序，我们必须自己写一个工厂方法，根据不同的平台生成不同的配置项，并且放弃掉一些微信的强大功能了。
var hooksName = {
wx: [\'created\', \'attached\', \'detached\'],
bu: [\'created\', \'attached\', \'detached\'],
ali: [\'didMount\', \'didMount\', \'didUnmount\'],
quick: [\'onInit\', \'onReady\', \'onDestroy\'],
};
export function registerComponent(type, name) {
registerComponents[name] = type;
var reactInstances = (type.reactInstances = []);
var wxInstances = (type.wxInstances = []);
var hooks = [
function created() {
var instance = reactInstances.shift();
if (instance) {
console.log(\'created时为\', name, \'添加wx\');
instance.wx = this;
this.reactInstance = instance;
} else {
console.log(\'created时为\', name, \'没有对应react实例\');
wxInstances.push(this);
}
},
function attached() {
if(appType == ali){
created.call(this)
}
if (this.reactInstance) {
updateMiniApp(this.reactInstance);
console.log(\'attached时更新\', name);
} else {
console.log(\'attached时无法更新\', name);
}
},
function detached() {
this.reactInstance = null;
参与讨论
发表评论