微信小程序转换为支付宝小程序 总结

 场景：目前市场最早使用小程序的是微信，后面的小程序不管是 支付宝，百度 还是 今日头条，斗音 还是360，他们都是模仿的微信小程序，所以里面的开发工具大多数是相差不大，如果已经有现场的微信小程序，可以可好的转换为支付宝小程序。

1:转换工具：需要安装VSCode ，在VSCode里面安装一个插件，安装方式：

VSCode插件: https://marketplace.visualstudio.com/items?itemName=chengguan.wx2my

命令行工具CLI: https://www.npmjs.com/package/wx2my

 

2:用VSCode环境打开 微信小程序，并且在项目里面找到 app.json,右击app.json文件,有一个wx2my 的选项,点击 就可以.

 

 

3:在转换的时候会有一些问题,该工具存在一些缺陷,但是可以手动处理,.

1:转换失败:缺少文件,需要根据提示做相应的修改,

2:转换的文件需要手动在文件夹根目录下添加一个文件:Behavior.js

添加内容:

const wx2my = require('./wx2my');

const Behavior = require('./Behavior');

// Create by wx2my.

module.exports = function Behavior(obj) {

const keyMap = {

properties: 'props',

created: 'onInit',

attached: 'didMount',

detached: 'didUnmount'

};

Object.keys(keyMap).forEach(key => {

if (Object.prototype.hasOwnProperty.call(obj, key)) {

obj[keyMap[key]] = obj[key];

delete obj[key];

}

}); // if exist lifetimes replace others.

 

if (obj.lifetimes) {

const keyMap = {

created: 'onInit',

attached: 'didMount',

detached: 'didUnmount'

};

const lifetimesObj = obj.lifetimes;

Object.keys(keyMap).forEach(key => {

if (Object.prototype.hasOwnProperty.call(lifetimesObj, key)) {

obj[keyMap[key]] = lifetimesObj[key];

}

});

delete obj.lifetimes;

}

 

return obj;

};

 

3:用支付宝小程序打开 转换后的代码.报错不用管,先打开在支付宝小程序里面去处理.

加载js的方式跟微信不一样,需要手动修改  

注意一下:威胁你的访问方式 需要修改:

// var date = require('utils/dateextend.js');

import date from './utils/dateextend.js';   在相对路径前面需要加:  ./   

 

4:在微信小程序里面的字体大小 跟支付宝里面的不一样，例如：微信里面的字体大小时 0.9rem 是正常的，但是在支付宝里面会变的非常大。需要设置到 0.3rem ，那样就可以正常。

5：在微信里面使用 height时 是：height：100%   但是在支付宝里面就会显示不出来，

需要在后面加一个 height：100%  !important

6: 在微信里面的单位 rem 在支付宝里面其实也是可以使用，但是相同的大小，在显示时是不一样的效果，所以需要重新设置一下字体大小。

7：支付宝添加 gt-modal跟微信不一样。

例如：微信里面 点击预定可以弹出来这样的界面，

 

但是在支付宝里面会出现错误信息：

联系过支付宝开发人员，说支付宝小程序不要使用自定义控件，这样会有一些异常，所以这里记住，尽量不要使用自定义控件。

8:支付宝小程序 页面之间的跳转：

<1> a标签跳转

在html标签内使用navigator跳转，使用方式如下：

<navigator url="../my/my" hover-class="navigator-hover">点击跳转到新页面</navigator>

 

<2> 编程式导航-JS代码内部跳转

在 pages\index\index.axml  文件中 写入button 按钮

<button type="primary" onTap="change">跳转到my</button>

在 pages\index\index.js 文件中 写 change() 点击事件

    change() {      

 // 事件处理      

 console.log('我是点击事件')     

   my.navigateTo({ url: '../my/my' }) 

   }