收藏
评论

快速构建并启动多端应用官方

我们将在本节课程中,从打开小程序开发者工具开始,到手机运行成功多端应用结束,快速完整的介绍所有必要细节,并为你指引延展学习。


在正式课程开始时,我们需要确认一下名词:

● 小程序项目:你自己开发的或者使用样例,在「微信开发者工具」中运行起来的项目。

● 移动应用:微信开放平台中注册管理,如果你预期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 无法使用的情况,就意味着你的小程序项目转多端项目时,需要做一些必要的改造,大概分两类:

  1. 登录问题:由于多端应用独立于微信之外运行,因此 wx.login 等依赖微信账号的 API 就无法使用,我们会在下一节学习这个内容。
  2. API 无法使用:多端应用里,实现 API 的基础库 SDK 需要跟着你的项目代码一起打包进安装包中(而小程序直接用微信自带的基础库),由于 API 涉及到的功能太多,完全打包会严重占用安装包的体积,因此多端能力对 SDK 做了拆分,我们只要根据需要勾选所需的扩展 SDK,这个问题就能解决。


至此我们已经成功的完成了多端项目的首次运行,接下来的任务就是针对一些多端APP场景,做一些针对性的改造工作。你会在后面的教程中学习到关于身份管理、API 适配、条件编译的知识,我们下节见!

最后一次编辑于  2024-12-10
赞 0
收藏

6 个评论

  • 阿杰
    阿杰
    03-31

    运行到本机iphone 应用闪退是怎么回事

    03-31
    赞同
    回复
  • 为
    03-11

    有没有源码分享使用一下??

    03-11
    赞同
    回复
  • HERO
    HERO
    2024-12-03

    按照流程操作,切换到多端平台的还是,报错

    VM441:1 cloud init error:  Error:  rid: 07b49f14-1733220134.errCode: -601002

    2024-12-03
    赞同
    回复 1
  • HERO
    HERO
    2024-12-03

    按照流程操作,切换到多端平台的还是,报错

    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)

    2024-12-03
    赞同
    回复
  • HERO
    HERO
    2024-12-03

    按照流程操作,切换到多端平台的还是,报错

    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)

    2024-12-03
    赞同
    回复
  • HERO
    HERO
    2024-12-03

    按照流程操作,切换到多端平台的还是,报错

    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)

    2024-12-03
    赞同
    回复
登录 后发表内容
课程标签