未来准备支持一件生成支付宝、百度等小程序吗

[lmw6412036]

No description provided.

[imyelo]

除了支付宝小程序，目前没有支持跨端的计划。

[chaucerling]

@imyelo 有具体的 roadmap 吗？我最近用 wxapp-boilerplate，做多端的兼容，发现不少底层支持不一致的地方，很难在js和编译时处理

https://openclub.alipay.com/read.php?tid=11844&fid=65
https://openclub.alipay.com/read.php?tid=11879&fid=65
https://openclub.alipay.com/read.php?tid=12013&fid=65

[imyelo]

@chaucerling 抱歉没有具体的计划。不过最近我也在试着生成支付宝小程序，确实也发现了挺多跟微信不一致的地方，除了上面这几个问题，这里也有一些资料：https://github.com/douzi8/wxToAlipay

[chaucerling]

这个转换工具我一开始做项目迁移时用过，转换效果不太理想，所以后面才采用 wxapp-boilerplate 的方式
，具体代码见下面的issue，这里对api和wxml组件的key做了转换
cantonjs/wxapp-boilerplate#41 (comment)

[chaucerling]

后面自定义组件的兼容我也另外写了一个js文件对option进行转换

// 微信 properties 可以用 setData 修改，this.triggerEvent('fn', data) 调用父组件的方法
// 支付宝 props 不能用 setData 修改，只能通过 this.props.fn(data) 调用父组件的方法更新
// wxml 的事件绑定用 @bindXXXX (@bind后的第一个字母大写)
// 另外的解决方法是用全局的 model 管理父子组件的数据共享问题

function noop() {}

const miniappComponent = function (options) {
	if (__WECHAT__) {
		let created = options.created || noop;
		options.created = function (...args) {
			let triggerEvent = this.triggerEvent;
			this.triggerEvent = (eventName, eventDetail = {}, eventOption = {}) => {
				eventName = eventName.replace(/^(on|bind)/, '');
				eventName = eventName.charAt(0).toUpperCase() + eventName.slice(1);
				triggerEvent(eventName, eventDetail, eventOption);
			};
			created.call(this, ...args);
		};
		// Component(options);
		return options;
	}
	if (__ALIPAY__) {
		let created = options.created || noop;
		options.didMount = function (...args) {
			this.data = {
				...this.data,
				...this.props,
			};
			this.triggerEvent = (eventName, eventDetail, eventOption) => {
				if (eventName.search(/^on/) < 0) {
					eventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
				}
				this.props[eventName]({
					detail: eventDetail,
					option: eventOption,
				});
			};
			created.call(this, ...args);
		};
		options.props = {};
		Object.keys(options.properties || {}).map((k) => {
			options.props[k] = options.properties[k].value;
		});
		// console.log(options);
		// Component(options);
		return options;
	}
};

export {
	miniappComponent as default,
};

现在支付宝小程序已经正式上线，你可以搜索首旅如家找到，功能和微信的基本一致

[chaucerling]

an example to improve wxapp-boilerplate when working on alipay
https://github.com/chaucerling/wxapp-boilerplate-alipay-example