微信跨平台方案Donut快速上手

news2024/12/24 21:49:02

一、Donut简介

Donut 是微信开发出的多端框架,用于支持使用小程序原生语法开发移动应用的框架,开发者可以一次编码,就可以编译出小程序和 Android 以及 iOS 应用,实现多端开发。能够帮助企业有效降低多端应用开发的技术门槛和研发成本,以及提升开发效率和开发体验。

1.1 核心特性

目前,Donut已经提供了如下的一些功能及特性:

  • 基于该框架开发者可以将小程序构建成可独立运行的移动应用;也可以将小程序构建成运行于原生应用中的业务模块。
  • 该框架支持条件编译,开发者可灵活按需构建多端应用模块,可更好地满足企业在不同业务场景下搭建移动应用的需求。
  • 此外,基于该框架构建的移动应用可实现接近 iOS 和 Android 原生界面和交互体验,可为用户提供高质量的体验。

image.png

其实不止微信,面对潜力越来越大的 B 端市场,阿里早期就开放了这样产品——mPaas,只不过阿里没有做太多的宣传推广,再加上并没有兼容市面中占比和使用范围最大的微信小程序,所以一直处于不温不火的状态。

1.2 应用场景

Donut 多端框架可以满足不同企业的业务开发需求,开发者可按照企业实际情况进行使用。支持直接将小程序转化为app,还有直接在app中集成模块。

image.png

1.3 开发模式

Donut 多端框架开发模式支持嵌入式开发和非嵌入式开发两种模式。

image.png

二、环境搭建

作为主打移动跨平台的方案,那么必然离不开原生Android和iOS的环境搭建,以下内容以macOS环境进行讲解。

2.1  iOS 开发环境

2.1.1 安装 Xcode

  1. 首先,打开App Store 或是到 Apple 开发者官网下载Xcode,然后进行安装。
  2. 安装 Xcode 后打开并安装 Apple SDK(完成后这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器)

image.png

2.1.2 安装 CocoaPods

由于iOS安装第三方依赖需要CocoaPods的支持,运行下方命令安装 CocoaPods:

sudo gem install cocoapods
# 或 brew install cocoapods

等待安装完成,然后在开发者工具运行「环境检测」查看到 iOS 开发环境搭建完成。如果按照上述步骤操作后,环境检测无法通过,可查看环境搭建常见问题。

image.png

2.2 Android 开发环境

2.2.1 安装 JDK

  1. 首先,前往官网下载 (当前多端项目模板使用的是 6.7.1 的 gradle 版本,建议使用 JAVA8 <= JAVA 版本 <= JAVA15 的 JAVA 版本)并安装。
  2. 配置环境前,可打开终端输入命令 echo $SHELL 判断本地 shell 版本, 从而选择对应的环境变量方式,如下面的 bash 或者 zsh
  3. 执行 open -e ~/.bash_profile, 或者 open -e ~/.zshrc 打开对应的配置文件(如果执行的时候发现文件不存在,可以通过 touch ~/.bash_profile 或 touch ~/.zshrc 新建打开)
  4. 添加 JAVA_HOME 等相关环境变量,例如下载的版本为 11.0.17,则添加下方内容
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.0.17.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH
  1. 执行命令 source ~/.bash_profile 或者 source ~/.zshrc 使配置生效
  2. 验证 JDK 是否安装成功 打开终端,输入java -version和echo $JAVA_HOME,查看效果

image.png

2.2.2 安装 Android SDK

Android SDK 可以通过两种方式方式进行安装,可任意选择一种进行安装:

通过 Android Studio 安装 Android

1,首先,需要下载安装 Command tools zip 包。滚到底部 Command line tools only 下载对应平台 zip 安装包,将其解压缩。

image.png

2,将解压缩的 cmdline-tools 目录移至您选择的新目录,例如 ~/Documents/AndroidSDK。这个新目录就是您的 Android SDK 目录,也可以理解是 $ANDROID_HOME 的位置。

3,解压缩的 cmdline-tools 目录中,创建一个名为 tools 的子目录

4,将原始 cmdline-tools 目录内容(包括 lib 目录、bin 目录、NOTICE.txt 文件和 source.properties 文件)移动到新创建的 tools 目录中。

此时,目录结构如下:

$ANDROID_HOME/cmdline-tools 
  └── tools # 新增的 tools 字幕了
      ├── bin
      │   ├── apkanalyzer.bat  # 用于在构建过程完成后深入分析 APK 组成
      │   ├── avdmanager.bat   # 创建和管理 Android 虚拟设备 (AVD)
      │   ├── lint.bat         # 代码扫描工具,可帮助您识别和纠正代码结构质量方面的问题
      │   ├── screenshot2.bat
      │   └── sdkmanager.bat   # 查看、安装、更新和卸载 Android SDK 的软件包
      ├── lib
      │   └── ...
      ├── NOTICE.txt
      ├── package.xml
      └── source.properties

接下来,为了方便后期使用命令行,还需要添加ANDROID_HOME等环境变量配置。打开.bash_profile或者.zshrc配置文件,添加如下代码:

export ANDROID_HOME= "~/Documents/AndroidSDK"  # 测试的路径可自由选择
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/tools  # 配置命令行工具相关 path,方便命令行调用
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/tools/bin # 配置命令行工具相关 path,方便命令行调用
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

接着,执行命令 source ~/.bash_profile 或者 source ~/.zshrc 使配置生效。

通过 Android Studio 工具进行下载安装

推荐使用通过 Android Studio 这个 IDE 来自动帮你下载安装Android环境。

  1. 首先,到关我下载 Android Studio,然后下载对应系统的版本。点击安装,安装时选择 Custom 选项,不选 Standard。

image.png

  1. 然后,打开 Android studio 进行安装 Android SDK Command-line Tools,下拉选择【SDK Manage】。

image.png
3. 当然,为了方便后面的使用,此种方式安装后也需要配置环境变量,此处不多说明。

最后,运行在开发者工具运行环境检测即可查看 Android 开发环境是否已经搭建完成。

image.png

2.3 环境搭建常见问题

1,xcode version not found

image.png

如遇到上方问题,可执行如下方命令查看是否可以获取 xcode 的版本。

xcodebuild -version

如出现报错:xcode-select: error: tool "xcodebuild requires Xcode, but active developer directory "/Library/Developer/CommandLineTools’ is a command line tools instance;则可以运行下方命令将其修复。

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

2,如何查看已安装的 jdk

Mac下安装的 JDK,一般都在 /Library/Java/JavaVirtualMachines 下。进入这个路径可以看到你安装的全部版本 JDK 。

image.png

3,Android SDK not found

这可能是因为尚未安装Android SDK Command-line Tools 导致的,按照上面指引安装后,重启微信开发者工具即可。

image.png

4,ANDROID_HOME not found

这是因为环境变量没有配置好导致的,按照上面指引安装后,重启微信开发者工具即可。

image.png

2.4 运行

如果已经配置好多端运行配置,那么开发者可在微信开发者工具拉起 Android 或 iOS 模拟器,以及进行 Android 或 iOS 真机模拟。

image.png

关于如何创建模拟器或者链接真机,阔以参考:创建模拟器。

三、开发者工具

下载最新nightly 开发者工具 或 RC 版开发者工具 或者 稳定版开发者工具。

然后,在开发者工具上点击「预览」即可快速构建预览版多端应用,点击「详情」-「下一步」,稍等片刻后,使用「移动应用助手App」扫码体验。

image.png
需要说明的是,如果当前小程序已经绑定到 donut 平台的多端应用中,则不会再出现「详情」入口,开发者可以在菜单栏点击「工具 - 升级多端项目」将小程序升级为多端项目之后再构建预览版进行体验。当然,也可以将开发模式切换至「多端应用模式」的小程序绑定到 donut 平台的多端应用中。

image.png

image.png

3.1 操作指南

3.1.1 升级多端项目

小程序帐号绑定为多端应用的开发小程序后,该小程序的管理员或者开发者则有权限在微信开发者工具进行多端应用开发。打开开发者工具,然后点击「工具-升级多端项目」将小程序项目升级为多端项目。

image.png

3.1.2 配置 SDK 密钥

使用工具内置原生模板项目,会协助配置开发平台对应的的 SdkKey 和 SdkKeySecret 信息到原生对应的代码文件中以完成多端项目初始化。

  • iOS 模版将写入 CommonDefine.h
  • android 模版将写入 DemoApplication.kt

关于如何获取 SdkKey 和 SdkKeySecret,可以查看接入文档。

image.png

image.png

完成项目初始化之后即可进行开发环境检测、构建资源包、运行模拟器、构建安装包等操作。

image.png

3.2 预览

完成多端项目升级、开发环境搭建以及检测后,开发者可借助移动应用助手 App 进行真机预览。

开发者可在工具栏「预览」处构建预览版多端应用,默认情况下构建安卓多端应用,开发者可按需进行切换,操作方式如下:构建预览版过程中的日志亦可在「构建」面板中查看。

image.png

3.3 构建安装包

通过移动应用助手 App 真机预览后,开发者可进行资源包和安装包,将其安装至手机上进行真机调试。开发者在菜单栏「工具 - 构建」或者在工具栏下方入口中,按需选择需构建 Android 或 iOS 资源包、安装包。

image.png

3.3.1 构建资源包

配置小程序资源包路径,构建构建ios资源包或构建安卓资源包时将会将构建后的产物存放到指定的路径,之后原生工程运行时将会读取对应的资源包运行。

配置 ios 资源包

配置project.miniapp.json文件的mini-ios内的 projectPath和archivePath。projectPath指向的是ios原生工程的路径,archivePath相对路径(相对于projectPath),如demo/Kernel/MiniApp.bundle/Saaa/wxfa0d2b4a0a0d38dc,之后构建ios资源包将存在到该目录下。

需要注意的是,ios 资源包指定的目录必须在 sdk目录下的MiniApp.bundle内,MiniApp.bundle在 pod install时会被拷贝到.app内。

配置Android资源包

配置project.miniapp.json文件内mini-android的 projectPath和archivePath。projectPath指向的是安卓原生工程的路径,archivePath相对路径(相对于projectPath),如app/src/main/assets/SaaA_embed/wxfa0d2b4a0a0d38dc,之后构建安卓资源包将存在到该目录下。

需要说明的是,安卓资源包指定的目录必须在 资源(assets)目录内,如app/src/main/assets/SaaA_embed/wxfa0d2b4a0a0d38dc,之后运行时通过SaaA_embed/wxfa0d2b4a0a0d38dc可获取到资源包。

接下来就是执行构建命令了,构建过程中的日志以及结果可在「构建」面板中查看。

image.png

3.3.2 构建apk

打开project.miniapp.json,可以看到mini-android对象内的buildArgs,配置 variant,其值由buildTypes、productFlavors和flavorDimensions等组合而成,而这些则配置在 miniapp/android/app/build.gradle 文件内。当只有一个flavorDimension时,格式为:<product-flavor><Build-Type>, 如ArmDebug、ArmRelease、Arm64Debug和Arm64Release等等 。

image.png

image.png

image.png

接着,点击「工具 - 操作 - 设置 apk/ipa 导出路径」配置apk导出的路径。

image.png

最后,点击菜单「工具 - 构建 - 打包生成 apk 」,构建过程中的日志以及安装包路径可在「构建」面板中查看,如下图。

image.png

image.png

3.3.3 构建ipa

打开project.miniapp.json,可以看到mini-ios对象内的buildArgs,配置 scheme以及 exportOptionPlistPath等配置。

image.png

image.png
之前在苹果后台创建证书时你被要求创建了一对秘钥,私钥保存在开发者本地,公钥上传到了苹果后台生成了证书。如果之前不是在当前机器上操作的,那你需要将私钥导出成p12证书,并导入到当前机器。

接下来,点击「工具 - 操作 - 设置 apk/ipa 导出路径」配置ipa包导出的路径。

image.png

然后,点击菜单「工具 - 构建 - 打包生成 ipa 」,构建过程中的日志以及安装包路径可在「构建」面板中查看,如下图。

image.png

image.png

四、使用云开发功能

微信是支持云开发的,不过在多端框架使用云开发等云能力的方法时需要注意以下事项。首先,使用云开发时,需要在 cloud.init 时显式指定云开发环境所在的微信 AppID:

wx.cloud.init({
  appid: 'wx1234567890',
  envid: 'env-id-example',
})

4.1 多端登录模式

采用以下登录方式,登录成功后,可以无缝使用云开发,和在微信小程序内使用无异。

4.1.1 唤起微信小程序登录

调用 JSAPI 唤起微信小程序登录,获取临时登录凭证 (code),通过凭证进而换取用户标识信息等。另外,登录成功后,可以调用微信 JSAPI 以使用微信开放能力,如云开发等。

真正调用前需要做如下一些准备:

  • 需引入微信能力拓展 SDK (iOS、Android)。
  • 配置唤起的微信小程序版本。在 app.miniapp.json 中,添加 “authorizeMiniprogramType” 参数,可指定跳转小程序版本 (0:正式版,1:开发版,2:体验版)。

image.png

  • 配置小程序官方授权页。在 app.json 中,添加 “useAuthorizePage” 参数,并设为 “true”。配置后,小程序将在编译时插入小程序官方授权页 (官方授权页不占用代码包体积)。

image.png

  • 在微信开发者工具中,选择“小程序模式”,点击预览,使用微信扫码。

以下是唤起小程序登录的示例代码:

wx.weixinMiniProgramLogin({
  success (res) {
    if (res.code) {
      // 发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
      // login 成功后,可以直接使用云开发功能
      wx.cloud.callFunction({
        name: 'myCloudFunction'
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

4.1.2 移动唤起微信登录

移动应用微信登录是一种唤起用户的微信 APP 进行登录的方式。调用 JSAPI 实现该登录方式,获取临时登录凭证 (code)。通过凭证进而换取用户标识信息等。另外,登录成功后,可以调用微信 JSAPI 以使用微信开放能力,如云开发等。

在唤起微信登录之前,需要准备如下的能力:

  • 需引入微信能力拓展 SDK (iOS、Android)。
  • 准备一个移动应用账号,可以在微信开放平台创建。
  • 打开 Donut 开发平台 - 身份管理,选择 “接入多端应用”。

下面是一段示例代码:

wx.weixinAppLogin({
  success (res) {
    if (res.code) {
      // 发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})
// login 成功后,可以直接使用云开发功能
wx.cloud.callFunction({
  name: 'myCloudFunction'
})

4.2 游客模式

默认情况下,在多端框架内使用云开发时,是没有微信登录态信息的(即 cloud.getWXContext 内无 OPENID)。为了允许未登录模式用户访问云环境资源,需要在「微信开发者工具-云开发-设置-权限设置-未登录用户访问云资源权限设置」打开相应云环境的开关。

image.png

4.3 常见问题

云数据库访问权限

云开发数据库访问时,由于未登录模式的限制,需要使用自定义安全规则。参考安全规则如下(所有用户可读,仅登录后创建者可写):

{
  "read": true,
  "write": "auth != null && doc._openid == auth.openid"
}

uploadFile 和其他接口

未登录模式下,不支持 wx.cloud.uploadFile 等需要登录态的接口,如有上传文件需求,建议使用“多端登录模式”,或者通过腾讯云对象存储等形式直接上传到存储桶中。

参考链接:Donut官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/446789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html画布绘制图形

一.题目要求 使用canvas标签完成直角三角形、矩形及圆形的绘制. 二.相关知识点 1.认识<canvas> 标签翻译&#xff1a;画布。 <canvas> 标签定义图形&#xff0c;比如图表和其他图像&#xff0c;您必须使用脚本来绘制图形。 <canvas> 标签只是图形容器&am…

[学习笔记] [机器学习] 2. Seaborn及练习案例

视频链接 数据集下载地址&#xff1a;https://download.csdn.net/download/weixin_44878336/87711308 目录 1. 绘制统计图形1.1 可视化数据的分布1.2 绘制单变量分布1.3 绘制双变量分布1.4 绘制成对的双变量分布 2. 用分类数据绘图2.1 类别散点图2.1.1 sns.stripplot()2.1.2 sn…

Hi3861 硬件 i2c 驱动 oled

一、前言 最近想用 3861 做个有意思的东西&#xff0c;记录一下开发过程。今天使用 3861 的硬件 i2c 驱动 oled。 硬件平台&#xff1a;Bearpi-Nano 软件SDK&#xff1a;润和sdk 二、搬一个 OLED 轮子 我之前写过一篇基于 stm32cubemx 快速使用 iic 接口 oled 的过程&#xff0…

一文搞懂C#实时调试时,程序数据库文件.pdb(符号文件)的作用。延伸搞懂Debug/Release、AnyCPU(首选32位)/x86/x64/ARM的区别

一、准备工作 MS引用&#xff1a;在 Visual Studio 调试器&#xff08;C#、C、Visual Basic、F#&#xff09;中指定符号 (.pdb) 和源文件 MS引用&#xff1a;为 C#、ASP.NET 或 Visual Basic 项目 &#xff08;.NET Framework&#xff09; 生成符号文件 MS引用&#xff1a;用…

图解网络(三)——IP

文章目录 前言一、IP地址与MAC地址的作用二、IP基础2.1 基础2.2 IP 地址的分类 三、ping的工作原理3.1 ICMP 协议3.2 TCP发数据和ping的区别3.2.1 如果用的是TCP的方式去发送消息3.2.1 如果用的是ping 四、断网了&#xff0c;还能 ping 通 127.0.0.1 吗&#xff1f;4.1 什么是1…

编译和链接

目录 1. 程序的翻译环境和执行环境 2. 详解编译链接 2.1 翻译环境 2.2 编译本身也分为几个阶段&#xff1a; 2.2.1汇编过程的简略图 2.3讲解汇编过程的具体过程和要点 2.4运行环境 1. 程序的翻译环境和执行环境 在ANSIC的任何一种实现中&#xff0c;存在两个不同的环境。…

C++基础入门(一)

前言 欢迎进入C世界&#xff01;这是一种令人兴奋的语言&#xff0c;它在C语言的基础上添加上了对面向对象编程和泛型编程的支持&#xff0c;在20世纪90年代便是最重要的编程语言之一&#xff0c;并在21世纪仍保持强劲势头。C继承了C语言的高效、简洁、快速和可移植性的传统。C…

【计算机视觉 | 图像分割】Segment Anything论文讲解

文章目录 一、前言二、论文出发点三、创新思路四、方法4.1 Segment Anything Task4.2 Segment Anything Model4.3 Segment Anything Data Engine4.4 Segment Anything Dataset 五、结果 一、前言 论文&#xff1a;https://arxiv.org/pdf/2304.02643.pdf 项目&#xff1a;https…

数据结构(一)—— 数组

文章目录 一、数组基础二、题1. 704 二分查找2. 27 移除元素3. 977 有序数组的平方4. 209 长度最小的子数组 一、数组基础 数组是存放在连续内存空间上的相同类型数据的集合&#xff0c;也就是说数组内存空间的地址是连续的。 因为数组的在内存空间的地址是连续的&#xff0c;…

COIG:首个大规模、可商用的中文开源指令数据!

文 | ZenMoore ChatGPT 出现后的这几个月&#xff0c;整个学界和业界的疯狂想必大家都已经看到了。 然而&#xff0c;在背各种各样的动物还有山海经怪兽的英语单词的时候&#xff0c;其实不妨停下来想一想复现中文 ChatGPT 到底缺什么&#xff1f;缺大模型吗&#xff1f;缺工程…

C++的引用

目录 引用概念 引用的用法 做函数形参 优点一 优点二 引用做返回值 让我们更深入的了解引用与指针 语法层引用与指针完全不同的概念 站在底层的角度看指针与引用 笔记类型文章 引用概念 在语言层面上&#xff1a;引用不是定义新的变量&#xff0c;而是给已存在变量再…

大模型带来的Web复兴,会是昙花一现吗?

大家是不是对GPT、对话式AI、生成式AI之类的话题&#xff0c;已经有点审美疲劳了&#xff1f; 写这篇文章之前&#xff0c;我有点犹豫&#xff0c;究竟还要不要接着讨论GPT了。最终决定写&#xff0c;是觉得个人用户、开发者&#xff0c;以及正在紧锣密鼓训大模型的AI公司和云厂…

Go | 一分钟掌握Go | 1 - 安装Go

作者&#xff1a;Mars酱 声明&#xff1a;本文章由Mars酱原创&#xff0c;部分内容来源于网络&#xff0c;如有疑问请联系本人。 转载&#xff1a;欢迎转载&#xff0c;转载前先请联系我&#xff01; 为什么学Go 为什么要学Go&#xff1f;网上太多广告和说辞了&#xff0c;什…

“SCSA-T学习导图+”首发:路由技术之OSPF入门

本期引言&#xff1a; 路由技术是网络环境中&#xff0c;为不同的节点传输数据提供传输路径的技术&#xff0c;企业网络的拓扑一般会比较复杂&#xff0c;不同的部门或者总部和分支可能处于不同的网段中&#xff0c;此时就需要使用路由协议来连接不同的网段&#xff0c;实现数…

django channels(websocket)的使用,实现网页间实时聊天

目录 一、创建项目mysite和应用chat 1. 创建项目mysite 2. 创建应用chat并添加应用到settings.py的INSTALLED_APPS中 3. 添加模板文件 4. 添加视图及路由 5.配置根路由指定chat应用的路由 6. 集成channels 二、实现聊天服务器 1. 创建一个新文件chat/templates/chat/r…

响应式开发HTNL5CSS3视频播放器

目录 前言 一、本视频播放器需要实现的功能 ​二、代码分布结构 三、部分主要代码 1.index01.html 2.video1.css 3.video1.js 四、images图片资源及视频 五、运行效果 前言 1.本文讲解的响应式开发技术&#xff08;HTML5CSS3Bootstrap&#xff09;的HTML5视频播放器等…

TS-黑马(二)

目录&#xff1a; &#xff08;1&#xff09;ts-类型-字面量与nullish类型 &#xff08;2&#xff09;ts-类型-泛型 &#xff08;3&#xff09;ts-意义 &#xff08;4&#xff09;ts-class语法 &#xff08;1&#xff09;ts-类型-字面量与nullish类型 我们子啊传递参数的时…

以 100GB SSB 性能测试为例,通过 ByteHouse 云数仓开启你的数据分析之路

动手点关注 干货不迷路 I. 传统数仓的演进&#xff1a;云数仓 近年来&#xff0c;随着数据“爆炸式”的增长&#xff0c;越来越多的数据被产生、收集和存储。而挖掘海量数据中的真实价值&#xff0c;从其中提取商机并洞见未来&#xff0c;则成了现代企业和组织不可忽视的命题。…

总的所有的全部的完全的整个的整体的: all entire full gross whole total

all entire full gross whole total 所有的,完全的,完整的全部的,整个的,整体的,总的 all entire full gross whole total all entire full gross whole total一些词典的解释allentirefullgrosswholetotal 区别辨析entire、whole、complete、full、total、gross与alltotal&…

【JavaWeb】HTMLCSS

一:B/S 软件的结构 二&#xff1a;前端的开发流程 3、网页的组成部分 页面由三部分内容组成&#xff01; 分别是内容&#xff08;结构&#xff09;、表现、行为。 内容&#xff08;结构&#xff09;&#xff0c;是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们…