微慕小程序Donut多端框架打包上架ios和安卓app

腾讯新出了一个 Donut 多端框架,可以直接将微信小程序转成 ios 和 安卓 app,小程序开发者工具里也集成了 app 相关升级、调试和打包的功能,具体的可以参考官方文档

适配准备

目前微慕小程序专业版完成了iOS和安卓app的适配(增强版可以直接用重构后的 uniapp 版本打包app),欢迎大家试用。

登录这块目前微信官方提供了直接跳转小程序授权、微信、手机号和苹果Apple登录,微慕目前使用了小程序授权、微信、和苹果Apple登录,需要依赖微信开放平台,所以需要提前注册好开放平台账号。

适配步骤

建议先详细阅读下Donut 官方文档 ,各个步骤官方文档上都有详细的说明

1、注册Donut开发平台账号

注册地址:https://dev.weixin.qq.com,注册后绑定你的小程序账号,具体可以参考 Donut 官方文档

2、升级小程序为多端项目

下载最新版的微信开发者工具,然后直接可以在里面选择会自动升级成多端项目。安卓app登录这块有用到微信开放平台,所以还需要你去注册好开放平台,也要和 Donut 绑定。

3、生成开发者证书

1)安卓开发证书

打包app需要用到安卓开发者证书,文章末尾有具体的生成步骤,如果只是试用调试可以先不用生成,Donut 会给你提供一个测试证书可以调试使用。

2)ios开发证书

ios需要先注册苹果开发者账号,然后生成打包证书,具体步骤可以参考 Donut 官方文档:生成 iOS 证书和 Provisioning Profile

4、更新专业版插件

更新最新版的插件后,要设置好 Donut 多端应用ID、Donut 多端应用Secret和微信小程序原始ID(注意是 gh_ 开头那个,不是新建小程序项目用到的 wx 开头的那个)

5、app打包

直接在开发者工具里导入微慕小程序最新版前端源码打包,点击开发者工具顶部:构建--打包生成APK,按提示填写证书别名、证书密码、证书文件等待打包完成,将最终生成的 apk 文件发送到安卓手机上就可以直接点击安装使用了。

ios打包和安卓类似,具体步骤可参考官方文档:打包生成 IPA

安卓相关问题

1、安卓开发证书

生成安卓开发者证书,可以本地安装 java 环境然后用命令行直接生成,具体参考文末的说明。

2、打包的 Package Name 包名

这个不是在生成安卓开发者证书的时候设置的,是需要自己去微信开放平台设置,没设置官方会默认会分配一个测试包名,设置了可以在 Donut 后台同步看到。

3、apk 安装包发送到手机上不能安装

直接将打包好的安卓 apk 文件通过微信发到手机上,接收保存时微信会默认在后面给你加上 .1,直接在文件管理里文件重命名删掉 .1 的后缀,就可以点击安装包安装到手机上了。

4、上架安卓应用商店提示 targetSdkVersion 版本不符合要求

上架小米应用商店提示 targetSdkVersion 版本不符合要求,要求要大于等于30。Donut 默认给设置的 29,然后在文档上找到了可以在 project.miniapp.json 里配置 targetSdkVersion,要求下载版本号 ≥ 1.06.2308242 的开发者工具。开发工具下载的稳定版最新版里面压根没这项配置,重新下载了最新的开发版开发工具才找到可以配置。

5、上架应用商店注意事项

要上架安卓各大应用商店,需提前申请好软著和app备案,其他的要求请参考各大应用商店的规则。

ios相关问题

1、ios签名和开发证书

下载证书到mac上显示证书不受信任,需要先在 https://www.apple.com/certificateauthority/ 上下载 Developer Authentication、Worldwide Developer Relations - G2、Worldwide Developer Relations - G3... 这几个中间证书,安装好后就会显示信任了。

2、wx.weixinAppLogin 报错 errCode:-700000

这个 api 需要唤起微信 app 授权,需要使用自己申请的开发证书,还要在 Donut 后台绑定了 Bundle ID 和 Universal Links,开启了相关的权限。直接使用官方提供的临时证书,是不能使用这些功能的。

3、.mobileprovision 文件所属的 bundleId 与应用无对应关系

跟上一个问题类似,这个一般是用自己的证书如果没设置 Bundle ID 和 Universal Links,打包时就会提示这个报错。

4、Run the app failed:Sign the app fail:undefined

用临时证书打包或真机运行用报上面的错误,先要用 USB 连接添加了设备权限的iphone手机到 mac 上,点击运行电脑上会弹窗让你输入 AppID 账号和密码,注意此账号也要在苹果开发者后台已经添加为开发者,手机也要拿到 UUID 在苹果开发者后台添加到调试设备里,手机要开启开发者模式。

如果报错上面还有:MiniAppBuilder could not sign in with your Apple ID. Your Apple ID or password is incorrect,就是提示你输入的账号密码不正确,重新再开发工具里先清除证书签名缓存,再输入正确的账号和密码,首次使用可能还会在你手机上弹出一个动态码,信任登录然后在电脑上输入手机上获取到的授权码就行了。

5、Build ipa failed:Sign the app fail:undefined

跟上一个问题类似,用临时证书打包时可能会出现这个报错,先清除证书签名缓存,再输入正确的账号和密码。

6、.ipa文件 上传交付时报错:Asset validation failed (90161) Invalid Provisioning Profile

Invalid Provisioning Profile. The provisioning profile included in the bundle xxx [Payload/demo.app] is invalid. [Missing code-signing certificate]. A Distribution Provisioning profile should be used when submitting apps to the App Store. For more information, visit the iOS Developer Portal. (ID: xxx)

用分发证书打包成功后,在 Transporter 里上传交付时报错,上面的报错提示证书文件无效,解决办法:

  • 核对证书和描述文件,确保受信任而且未过期
  • 打包时用的证书和描述文件,是否误用了开发证书和描述文件
  • 把本地已经在钥匙串里安装了的证书全部删掉,然后重新安装再打包
  • 上面的方法都不能解决的,重新在苹果开发者后台重新生成新的分发证书和描述文件

7、invalid provisioning profile.the provisioning profile included in the bundle is invalid

打包的证书要安装在mac电脑本地钥匙串里,直接双击证书文件,安装好了可以在钥匙串-我的证书里看到。

8、Transporter 里交付成功,苹果开发者后台看不到提价信息

这个一般是交付的版本有问题,像一些隐私权限描述未添加...注意下自己开发者账号对应的邮箱,苹果官方会给你发送具体的错误信息邮件。有收到提示邮件就是有问题的,这个时候苹果开发者后台 app 管理里是看不到你交付的版本的,需要修改后重新交互,成功了后台构建那就可以看到交互的版本了。

9、The provided entity includes an attribute with a value that has already been used (-19232)

每次构建上传的版本号需要累加,不能比之前的低

10、选择图片、保存图片时app崩溃

需要在 project.miniapp.json 中设置 iOS - 隐私信息访问许可描述,然后操作的时候用户才可以正常操作。Donut 的适配也确实太粗暴了,竟然不是给个提示报错未设置隐私描述之类的,直接让app崩了!

11、上架appstore注意事项

app测试没问题后可以在 mac 电脑上,通过 Transport 上传到 appstore 后台提审,app相关的一些配置在 project.miniapp.json 文件中设置,建议不要轻易去更改一些配置,微慕默认的配置已成功过审了,如果提审后有因为某些原因被拒绝,可以反馈给我们解决。

ios 审核会比较严格,微慕第一版也是提交了11个版本最终才过审,所以需要有强大的心理,注意提交正式版也需要先进行 app 备案。

其他问题

1、相关功能不能用

比如视频不能播放、canvas绘图报错...官方为了减小打包大小 SDK 里很多功能默认是没有开启的,如果项目里有用到音视频、canvas 这些功能,需要先在 project.miniapp.json 配置文件里,自己开启相关的 SDK:Media SDK、XWeb SDK,否则是不能用的。

2、安卓app安装后一直在启动页

打包 android 的 sdk 版本 sdkVersion 是 1.1.1,更新到最新的 1.1.2 重新打包后就没问题了。所以遇到这种奇奇怪怪的问题,记得更新开发工具、sdk版本到最新版,如果已经是最新版那就回退个版本,说不定运气好就解决了。

3、条件编译

官方也提供了类似 uniapp 条件编译的语法,json 文件中需要自己通过 mini-wechat、mini-ios、mini-android 去分别配置,功能上没有 uniapp 提供的条件编译强大。为了同时兼容小程序和app可以使用条件编译语法,注意小程序开发者工具本地配置里也要勾选上-启用条件编译:


// js 文件中使用
// #if MP
// #elif IOS
// #elif ANDROID
// #endif

// wxml 模板文件中使用
<!-- #if MP -->
<!-- #elif IOS -->
<!-- #elif ANDROID -->
<!-- #endif -->

// wxss 样式文件中使用
/* #if MP */
/* #elif IOS */
/* #elif ANDROID */
/* #endif */

附:windows下生成安卓开发证书

Android平台打包发布apk应用,需要使用数字证书(.keystore文件)进行签名,用于表明开发者身份,Android证书的生成是自助和免费的,不需要审批或付费。

可以使用JRE环境中的keytool命令生成,以下是windows平台生成证书的方法:

1)、安装JRE环境

可从Oracle官方下载jre安装包:https://www.oracle.com/technetwork/java/javase/downloads/index.html(记住安装的路径,后面生成证书的时候要用到)

2)、打开命令行(cmd)

可以先切换到要生成的目录下,我直接在D盘根目录下生成输入:

d:

3)、将JRE安装路径添加到系统环境变量

我的JRE装在D盘下 "D:\Programs\jre\bin"

set PATH=%PATH%;"D:\Programs\jre\bin"

注意这里安装路径不要写错了,我这里刚开始路径里 Programs 就少了个s,后面就一直报错:keytool不是内部或外部命令,也不是可运行的程序

4)、使用keytool -genkey命令生成证书

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore
  • testalias:是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字
  • android.keystore:是证书文件名称,可修改为自己想设置的文件名称,也可以指定完整文件路径
  • 36500:是证书的有效期,表示100年有效期,单位天,建议时间设置长一点,避免证书过期

按提示输入信息后就会在D盘根目录下生成 android.keystore 文件,这个文件就可以用来直接打包安卓app了