【小程序迁移】微信小程序迁移到支付宝记坑

前言

最近微信小程序云开发开始收费，从免费直接涨到了19.9元/月，论割韭菜还得是你腾讯，我的小程序尽管用的人不多，但那都是心血之作啊。为了学习微信小程序开发，把大部分的接口和API都调用过了，个人最多只能接受涨到5块/月，没办法，只能上微信的友商支付宝看看了。

微信云开发计费调整公告官方
微信团队07-04
各位微信云开发用户：
感谢大家一直以来对微信云开发的支持。由于云计算成本整体上升，为了继续为各位用户提供稳定可靠的服务，微信云开发将于 2022 年 08 月 18 日，对计费方式进行如下变更，部分指标价格将有所上浮。
新计费模式下，新用户免费使用 1 个月后，统一使用 “基础套餐+按量付费” 模式：购买带有一定配额的基础套餐后，超出套餐配额部分再按照实际使用量付费。

研究了一下，发现支付宝平台一样提供小程序云开发功能，并且免费！那就每天的空闲时间迁移一下吧。于是开始了我的微信小程序《通信人的工具箱》的迁移工作，有兴趣的朋友可以两边的都试一下看看区别，支付宝的可能还在审核。
然后就开始了迁移工作，并把需要手动修改的部分都记录了下来，方便后来的朋友参考。为了熟悉支付宝开发，我没有使用官方的antmove小工具进行迁移。小工具我试用了一下，发现里面使用了一大堆的JS代码做装饰器，把wx.装饰成my.，降低了程序的执行效率，提高了代码包的体积，也不利于学习，所以笔者手动迁移代码。
需要注意的是：下述的仅仅为我的小程序用到的接口需要修改的地方，并不是所有的区别。

文档控制台网址汇总

不像微信的全部集中在一个控制台，一份文档，支付宝小程序更像是拼凑出来的东西，小程序一份文档一个控制台，云开发又一个，还不太好找，因此把链接汇集于此。

1. 小程序开发文档：小程序本地API的文档。
2. 小程序云开发文档：小程序云开发API的文档。
3. 小程序开放平台：相当于微信公众平台，在这里你可以管理小程序的版本、信息、设置体验版、提交审核等。
4. 小程序云：管理云开发资源，包括云函数、云文件、数据库等。
5. 阿里云OpenAPI开发者门户：用于设置云函数超时时间，内存大小，数据库导入导出、云存储等的网站，不提交工单我都不知道有这东西。
6. 提交工单：有问题直接提问，回复还是挺迅速的。
7. EMAS平台：IDE云开发工具跳转，没什么用，可用作跳板打开小程序云。

本地区别

仅企业可用的功能

1. 录音，详见：my.getRecorderManager。
2. 粘贴板，详见：my.setClipboard。

第一点就很难受了，，相当于小程序的声音频谱分析功能无法迁移了。第二点是真的不能理解，我就是往用户的粘贴板写入处理结果，结果就不行。

限制功能

1. 音乐播放器不支持播放本地的或者云存储的音乐，只能播放调用录音接口或者上传到优酷的音频文件，详见：音频播放 API 使用说明。

直接使得小程序的“信号发生器”功能无法迁移，_{心凉了半截}，不过为了学习，还是接着往下看吧。

插件区别

1. 基础库2.0下不支持echarts数据绘图插件，官方建议用@AntV/F2代替。

云开发API区别

1. 云文件的云端路径无法指定，不支持创建文件夹。
2. 云文件只可以存储指定类型格式的文件。详见：uploadFile

需要做的代码变更

xml部分

1. 控件标签 bindtap -> onTap
2. 控件标签 bindchange -> onChange
3. 控件标签 bindinput -> onInput
4. 渲染控制 wx: -> a:
5. image控件： bindtouchend -> onTap
6. canvas控件：canvas-id -> id
7. input控件：要添加controlled='true’标签，否则可能不受setData控制
8. textarea控件：可以慎重添加controlled='true’标签，但是有坑，用了可能会出现用户无法输入的情况。

CSS部分

1. 不支持CSS样式暗夜模式的识别与匹配，具体为微信端的“@media (prefers-color-scheme: dark)”标签。
2. page注意p要小写，否则样式不生效，微信无所谓。

JS部分

1. my.showLoading不支持mask参数，实测默认是有遮罩的。
2. my.showLoading的title参数名替换为content，详见：my.showLoading。
3. wx.showModal -> my.confirm ，且不支持showCancel参数。
4. my.showToast没有icon参数，取而代之的是type，title参数名替换为content，详见：my.showToast。
5. 支付宝的弱社交功能，Page内没有onShareAppMessage和onShareTimeline，只有onShareAppMessage，详见：页面运行机制。
6. 表单元素查询不能使用this.selectComponent。
7. wx.setNavigationBarTitle -> my.setNavigationBar，详见：my.setNavigationBar。

自定义组件

1. components不支持在调用它的页面中selectComponent或createSelectorQuery获取实例对象，需要在components的ref()中返回，在宿主的xml中使用ref标签定义监听函数，在JS的对应的监听函数中获取，详见：ref 获取组件实例。
2. 开发时遇到components的methods中的this指针没有setData方法，已经确定this指向没有改变，按照官方文档也不行。最后含有setData方法的this指针通过组件的didmount()生命周期的监听函数中的this获取。

比微信好的地方

1. 保存图片到用户相册无需一长串的权限申请，直接调用my.saveImageToPhotosAlbum即可，就是不支持模拟器调试。

    my.saveImageToPhotosAlbum({
      filePath:that.data.output_image_src,
    }).then(e=>{
      my.showToast({
        content:'保存成功',
        type:'success',
      });
    }).catch(e=>{
      console.error(e);
      my.showToast({
        content:'保存失败,请用真机测试相册保存功能',
        type:'fail',
      })
    });

2. 数据库更新支持"没有则创建"的选项，这个比微信要好，详见：updateOne。
3. 获取用户的唯一id不需要通过云函数，只需要调用授权函数即可。

  const res = await my.serverless.user.authorize({
    authProvider: "alipay_openapi"
  });
  if (res.success) {
  	//获取用户UUID
    my.serverless.user.getInfo().then(user => {
      console.log(user);
      //设为全局对象
      that.globalData.user = user.result.user;
  	}
  }

附录一些常用的代码段

云函数

//云端定义
module.exports = async (ctx) => {
  const {a, b} = ctx.args;
  return a + b;
}
//同步式调用
const { result } = await mpserverless.function.invoke('sum', { a: 1, b: 1 });
//异步式调用
mpserverless.function.invoke('sum', { 
	a: 1, b: 1 
}).then(console.log).catch(console.error);

数据库

//更新一条数据，不存在则创建
mpserverless.db.collection('users').updateOne({
    age: {$gt: 18}
}, {$set: {
    name: "Smith",
    age: 22,
    }
}, {
    upsert: true,
})
.then(res => {})
.catch(console.error);

云文件

//上传一个文件，无法指定云端路径
mpserverless.file.uploadFile({
      filePath: path,
    })
	.then(res => {})
	.catch(err => {});

后语

经过这次迁移，我知道微信涨价的底气在哪了，支付宝的小程序云开发感觉就是个半成品。支付宝的小程序大部分是一些点单的，交易的，其它类别用的人并不多，所以开发的除了商业需要，基本就像我一样是纯粹学习的。微信平台则用户众多，社交属性强大，这些更提供了它涨价的基础。现在19.9元/月还能勉强承受，后面变成39我估计就下线小程序云功能了。。。