我们将在本节课程中,从打开小程序开发者工具开始,到手机运行成功多端应用结束,快速完整的介绍所有必要细节,并为你指引延展学习。
在正式课程开始时,我们需要确认一下名词:
● 小程序项目:你自己开发的或者使用样例,在「微信开发者工具」中运行起来的项目。
● 移动应用:微信开放平台中注册管理,如果你预期APP中需要使用微信生态能力(登录、支付、分享等),就必须要这个。
● 多端应用:和微信小程序、移动应用类似,具有 wx 开头的 appid,用于承载多端应用的身份管理、插件开发等多端能力。可以直接在多端控制台创建,也可以在开发者工具快速创建并绑定小程序账号。
● 多端应用项目:在小程序开发者工具中运行的,可以同时进行小程序和 App 的编译和构建(可通过小程序项目转换而来,也可以直接在开发者工具新建项目)。
一、打开小程序项目
在小程序开发者工具中,打开自己的项目或者样例项目,且能够顺利运行且真机也能顺利运行。
二、升级多端应用项目
点击开发者工具顶部「模式」选择框,在下拉列表中,选择「多端应用模式」
如果你的小程序未绑定过「多端应用」,则会展示如下快速注册码
使用该小程序管理员的微信,扫描快速注册码,按照提示步骤完成注册,手机端完成注册后,在开发者工具中点击「已绑定」按钮。
需要注意的是,创建时选择的小程序,一定要与开发者工具打开项目的小程序保持一致,创建成功后,开发者工具也会收到相应通知。
绑定成功,会在右侧提示「绑定成功,请重新操作」字样。
再次执行一开始的,顶部「模式」选择框,在下拉列表中,选择「多端应用模式」,会弹出弹框提示要升级多端项目,点击确定。
确定后,工具会将当前小程序项目升级为多端项目,主要做了如下事情:
● 在根目录中生成了 project.miniapp.json 配置文件,后面绝大部分 APP 的设定都在这里完成。
● 在 project.config.json 文件中,添加 "projectArchitecture": "multiPlatform" 内容。(如果后面你的项目要复原回小程序项目重复升级,需要手动把这个内容删除再操作)
● 生成 miniapp 和 i18n 目录,为多端相关资源文件目录和国际化信息目录,本节课直接默认,后面我们会展开学习这里的内容。
升级成功后的页面如下:
至此,我们已经完成了升级多端项目部分。
三、预览多端应用到设备
在升级到多端应用项目之后,我们可以直接通过「小程序开发工具」将多端项目运行到「真机设备」或「模拟器」中。
使用数据线连接电脑和手机,iOS 开启开发者模式,Android 开启 USB 调试模式,然后操作小程序开发者工具。
点击「选择设备-刷新」按钮,小程序开发者工具会自动识别所有类型的设备,选择对应的设备后就可以开始「运行」。
根据 window 和 MacOS,以及 iOS 和 Android 手机,大概有 4 种常见组合,一般开发者工具会自动检测提示你来操作安装必要的内容,跟着提示操作即可。
这里补充一些避坑指南:
1.在连接 iOS 手机时,会弹出一个账号密码框,账号需要填你AppleID的手机号或者邮箱,其中手机号需要在前面带 +86 这种区号。
2.如果出现构建失败或者 error IPA 字样,一般是数据线连接出现抖动,重新插拔然后再发起运行就可以。
运行成功的工具页面如下,看到绿色提示,你就可以前往手机端查看了。
iOS 第一次运行时,会提示开发者未授权之类的提示,这时需要前往「设置-通用-VPN与设备管理」,在开发者 APP 那里,将你的 AppleID 信任一下,返回再运行就好了。
四、打包项目为安装包
「小程序开发者工具」还支持将多端项目直接打包为 Android 安装包和 iOS 安装包。
首先打包 Android 安装包 APK,点击顶部工具栏中的「构建」按钮,在弹出的菜单中选择「打包生成 APK」。
在弹出的对话框中填写「证书配置」内容,点击确定即可开始打包。
如果一开始你没有证书,可以参考此文档用开发者工具创建。注意将别名、密码和证书文件都保存好,这个证书是开发者层面的,可以用于多个应用程序。
确认后,会在终端中开始显示打包过程(如果是第一次打包,会让你选择打包产物存放的目录,我们这里直接选项目目录里的 dist 目录),然后就可以在对应目录中,看到打包的 APK,可以发送到 Android 手机中直接安装使用。
然后是打包 iOS 安装包 IPA,点击顶部工具栏中的「构建」按钮,在弹出的菜单中选择「打包生成 IPA」。
在弹出的对话框中,确认打包信息。如果你没有正式的苹果分发证书,可以先使用临时签名证书,点击「确认」。
使用临时证书打包时,需要使用你的 iOS 设备连接电脑,并输入该 iOS 设备绑定的 appleID 账号(同上述预览步骤类似)。
打包过程结束后,可以在对应目录中,看到打包的 IPA。
五、运行展示
下面展示真机运行的「示例项目-小相册」:
如果你的项目在运行时,出现登录失败,或者部分小程序 API 无法使用的情况,就意味着你的小程序项目转多端项目时,需要做一些必要的改造,大概分两类:
- 登录问题:由于多端应用独立于微信之外运行,因此 wx.login 等依赖微信账号的 API 就无法使用,我们会在下一节学习这个内容。
- API 无法使用:多端应用里,实现 API 的基础库 SDK 需要跟着你的项目代码一起打包进安装包中(而小程序直接用微信自带的基础库),由于 API 涉及到的功能太多,完全打包会严重占用安装包的体积,因此多端能力对 SDK 做了拆分,我们只要根据需要勾选所需的扩展 SDK,这个问题就能解决。
至此我们已经成功的完成了多端项目的首次运行,接下来的任务就是针对一些多端APP场景,做一些针对性的改造工作。你会在后面的教程中学习到关于身份管理、API 适配、条件编译的知识,我们下节见!
运行到本机iphone 应用闪退是怎么回事
有没有源码分享使用一下??
按照流程操作,切换到多端平台的还是,报错
VM441:1 cloud init error: Error: rid: 07b49f14-1733220134.errCode: -601002
按照流程操作,切换到多端平台的还是,报错
VM441:1 cloud init error: Error: rid: 07b49f14-1733220134.errCode: -601002
at fail (<anonymous>:1:245464)
at i (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Function.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at p (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Object.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at a (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at $u (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Uu (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1(env: Windows,wxext14566970e7e9f62,1.06.2409140; lib: 3.2.5-74)
按照流程操作,切换到多端平台的还是,报错
VM441:1 cloud init error: Error: rid: 07b49f14-1733220134.errCode: -601002
at fail (<anonymous>:1:245464)
at i (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Function.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at p (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Object.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at a (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at $u (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Uu (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1(env: Windows,wxext14566970e7e9f62,1.06.2409140; lib: 3.2.5-74)
按照流程操作,切换到多端平台的还是,报错
VM441:1 cloud init error: Error: rid: 07b49f14-1733220134.errCode: -601002
at fail (<anonymous>:1:245464)
at i (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Function.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at p (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Object.success (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at a (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at $u (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at Uu (WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1)
at WAServiceMainContext.js?t=wxext14566970e7e9f62&s=1733219958885&v=3.2.5-74:1(env: Windows,wxext14566970e7e9f62,1.06.2409140; lib: 3.2.5-74)