一、Donut簡介

Donut 是微信開發(fā)出的多端框架，用于支持使用小程序原生語法開發(fā)移動應用的框架，開發(fā)者可以一次編碼，就可以編譯出小程序和 Android 以及 iOS 應用，實現(xiàn)多端開發(fā)。能夠幫助企業(yè)有效降低多端應用開發(fā)的技術(shù)門檻和研發(fā)成本，以及提升開發(fā)效率和開發(fā)體驗。

1.1 核心特性

目前，Donut已經(jīng)提供了如下的一些功能及特性：

• 基于該框架開發(fā)者可以將小程序構(gòu)建成可獨立運行的移動應用；也可以將小程序構(gòu)建成運行于原生應用中的業(yè)務模塊。
• 該框架支持條件編譯，開發(fā)者可靈活按需構(gòu)建多端應用模塊，可更好地滿足企業(yè)在不同業(yè)務場景下搭建移動應用的需求。
• 此外，基于該框架構(gòu)建的移動應用可實現(xiàn)接近 iOS 和 Android 原生界面和交互體驗，可為用戶提供高質(zhì)量的體驗。

其實不止微信，面對潛力越來越大的 B 端市場，阿里早期就開放了這樣產(chǎn)品——mPaas，只不過阿里沒有做太多的宣傳推廣，再加上并沒有兼容市面中占比和使用范圍最大的微信小程序，所以一直處于不溫不火的狀態(tài)。

1.2 應用場景

Donut 多端框架可以滿足不同企業(yè)的業(yè)務開發(fā)需求，開發(fā)者可按照企業(yè)實際情況進行使用。支持直接將小程序轉(zhuǎn)化為app，還有直接在app中集成模塊。

1.3 開發(fā)模式

Donut 多端框架開發(fā)模式支持嵌入式開發(fā)和非嵌入式開發(fā)兩種模式。

二、環(huán)境搭建

作為主打移動跨平臺的方案，那么必然離不開原生Android和iOS的環(huán)境搭建，以下內(nèi)容以macOS環(huán)境進行講解。

2.1 ?iOS 開發(fā)環(huán)境

2.1.1 安裝 Xcode

1. 首先，打開App Store 或是到 Apple 開發(fā)者官網(wǎng)下載Xcode，然后進行安裝。
2. 安裝 Xcode 后打開并安裝 Apple SDK（完成后這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器）

2.1.2 安裝 CocoaPods

由于iOS安裝第三方依賴需要CocoaPods的支持，運行下方命令安裝 CocoaPods：

sudo gem install cocoapods
# 或 brew install cocoapods

等待安裝完成，然后在開發(fā)者工具運行「環(huán)境檢測」查看到 iOS 開發(fā)環(huán)境搭建完成。如果按照上述步驟操作后，環(huán)境檢測無法通過，可查看環(huán)境搭建常見問題。

2.2 Android 開發(fā)環(huán)境

2.2.1 安裝 JDK

1. 首先，前往官網(wǎng)下載 （當前多端項目模板使用的是 6.7.1 的 gradle 版本，建議使用 JAVA8 <= JAVA 版本 <= JAVA15 的 JAVA 版本）并安裝。
2. 配置環(huán)境前，可打開終端輸入命令 echo $SHELL 判斷本地 shell 版本， 從而選擇對應的環(huán)境變量方式，如下面的 bash 或者 zsh
3. 執(zhí)行 open -e ~/.bash_profile， 或者 open -e ~/.zshrc 打開對應的配置文件（如果執(zhí)行的時候發(fā)現(xiàn)文件不存在，可以通過 touch ～/.bash_profile 或 touch ~/.zshrc 新建打開）
4. 添加 JAVA_HOME 等相關(guān)環(huán)境變量，例如下載的版本為 11.0.17，則添加下方內(nèi)容

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

5. 執(zhí)行命令 source ~/.bash_profile 或者 source ~/.zshrc 使配置生效
6. 驗證 JDK 是否安裝成功 打開終端，輸入java -version和echo $JAVA_HOME，查看效果

2.2.2 安裝 Android SDK

Android SDK 可以通過兩種方式方式進行安裝，可任意選擇一種進行安裝：

通過 Android Studio 安裝 Android

1，首先，需要下載安裝 Command tools zip 包。滾到底部 Command line tools only 下載對應平臺 zip 安裝包，將其解壓縮。

2，將解壓縮的 cmdline-tools 目錄移至您選擇的新目錄，例如 ~/Documents/AndroidSDK。這個新目錄就是您的 Android SDK 目錄，也可以理解是 $ANDROID_HOME 的位置。

3，解壓縮的 cmdline-tools 目錄中，創(chuàng)建一個名為 tools 的子目錄

4，將原始 cmdline-tools 目錄內(nèi)容（包括 lib 目錄、bin 目錄、NOTICE.txt 文件和 source.properties 文件）移動到新創(chuàng)建的 tools 目錄中。

此時，目錄結(jié)構(gòu)如下：

$ANDROID_HOME/cmdline-tools 
  └── tools # 新增的 tools 字幕了
      ├── bin
      │   ├── apkanalyzer.bat  # 用于在構(gòu)建過程完成后深入分析 APK 組成
      │   ├── avdmanager.bat   # 創(chuàng)建和管理 Android 虛擬設(shè)備 (AVD)
      │   ├── lint.bat         # 代碼掃描工具，可幫助您識別和糾正代碼結(jié)構(gòu)質(zhì)量方面的問題
      │   ├── screenshot2.bat
      │   └── sdkmanager.bat   # 查看、安裝、更新和卸載 Android SDK 的軟件包
      ├── lib
      │   └── ...
      ├── NOTICE.txt
      ├── package.xml
      └── source.properties

接下來，為了方便后期使用命令行，還需要添加ANDROID_HOME等環(huán)境變量配置。打開.bash_profile或者.zshrc配置文件，添加如下代碼：

export ANDROID_HOME= "~/Documents/AndroidSDK"  # 測試的路徑可自由選擇
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/tools  # 配置命令行工具相關(guān) path，方便命令行調(diào)用
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/tools/bin # 配置命令行工具相關(guān) path，方便命令行調(diào)用
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

接著，執(zhí)行命令 source ~/.bash_profile 或者 source ~/.zshrc 使配置生效。

通過 Android Studio 工具進行下載安裝

推薦使用通過 Android Studio 這個 IDE 來自動幫你下載安裝Android環(huán)境。

1. 首先，到關(guān)我下載 Android Studio，然后下載對應系統(tǒng)的版本。點擊安裝，安裝時選擇 Custom 選項，不選 Standard。

2. 然后，打開 Android studio 進行安裝 Android SDK Command-line Tools，下拉選擇【SDK Manage】。

3. 當然，為了方便后面的使用，此種方式安裝后也需要配置環(huán)境變量，此處不多說明。

最后，運行在開發(fā)者工具運行環(huán)境檢測即可查看 Android 開發(fā)環(huán)境是否已經(jīng)搭建完成。

2.3 環(huán)境搭建常見問題

1，xcode version not found

如遇到上方問題，可執(zhí)行如下方命令查看是否可以獲取 xcode 的版本。

xcodebuild -version

如出現(xiàn)報錯：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 。

3，Android SDK not found

這可能是因為尚未安裝Android SDK Command-line Tools 導致的，按照上面指引安裝后，重啟微信開發(fā)者工具即可。

4，ANDROID_HOME not found

這是因為環(huán)境變量沒有配置好導致的，按照上面指引安裝后，重啟微信開發(fā)者工具即可。

2.4 運行

如果已經(jīng)配置好多端運行配置，那么開發(fā)者可在微信開發(fā)者工具拉起 Android 或 iOS 模擬器，以及進行 Android 或 iOS 真機模擬。

關(guān)于如何創(chuàng)建模擬器或者鏈接真機，闊以參考：創(chuàng)建模擬器。

三、開發(fā)者工具

下載最新nightly 開發(fā)者工具 或 RC 版開發(fā)者工具 或者 穩(wěn)定版開發(fā)者工具。

然后，在開發(fā)者工具上點擊「預覽」即可快速構(gòu)建預覽版多端應用，點擊「詳情」-「下一步」，稍等片刻后，使用「移動應用助手App」掃碼體驗。

需要說明的是，如果當前小程序已經(jīng)綁定到 donut 平臺的多端應用中，則不會再出現(xiàn)「詳情」入口，開發(fā)者可以在菜單欄點擊「工具 - 升級多端項目」將小程序升級為多端項目之后再構(gòu)建預覽版進行體驗。當然，也可以將開發(fā)模式切換至「多端應用模式」的小程序綁定到 donut 平臺的多端應用中。

3.1 操作指南

3.1.1 升級多端項目

小程序帳號綁定為多端應用的開發(fā)小程序后，該小程序的管理員或者開發(fā)者則有權(quán)限在微信開發(fā)者工具進行多端應用開發(fā)。打開開發(fā)者工具，然后點擊「工具-升級多端項目」將小程序項目升級為多端項目。

3.1.2 配置 SDK 密鑰

使用工具內(nèi)置原生模板項目，會協(xié)助配置開發(fā)平臺對應的的 SdkKey 和 SdkKeySecret 信息到原生對應的代碼文件中以完成多端項目初始化。

• iOS 模版將寫入 CommonDefine.h
• android 模版將寫入 DemoApplication.kt

關(guān)于如何獲取 SdkKey 和 SdkKeySecret，可以查看接入文檔。

完成項目初始化之后即可進行開發(fā)環(huán)境檢測、構(gòu)建資源包、運行模擬器、構(gòu)建安裝包等操作。

3.2 預覽

完成多端項目升級、開發(fā)環(huán)境搭建以及檢測后，開發(fā)者可借助移動應用助手 App 進行真機預覽。

開發(fā)者可在工具欄「預覽」處構(gòu)建預覽版多端應用，默認情況下構(gòu)建安卓多端應用，開發(fā)者可按需進行切換，操作方式如下：構(gòu)建預覽版過程中的日志亦可在「構(gòu)建」面板中查看。

3.3 構(gòu)建安裝包

通過移動應用助手 App 真機預覽后，開發(fā)者可進行資源包和安裝包，將其安裝至手機上進行真機調(diào)試。開發(fā)者在菜單欄「工具 - 構(gòu)建」或者在工具欄下方入口中，按需選擇需構(gòu)建 Android 或 iOS 資源包、安裝包。

3.3.1 構(gòu)建資源包

配置小程序資源包路徑，構(gòu)建構(gòu)建ios資源包或構(gòu)建安卓資源包時將會將構(gòu)建后的產(chǎn)物存放到指定的路徑，之后原生工程運行時將會讀取對應的資源包運行。

配置 ios 資源包

配置project.miniapp.json文件的mini-ios內(nèi)的 projectPath和archivePath。projectPath指向的是ios原生工程的路徑，archivePath相對路徑（相對于projectPath），如demo/Kernel/MiniApp.bundle/Saaa/wxfa0d2b4a0a0d38dc，之后構(gòu)建ios資源包將存在到該目錄下。

需要注意的是，ios 資源包指定的目錄必須在 sdk目錄下的MiniApp.bundle內(nèi)，MiniApp.bundle在 pod install時會被拷貝到.app內(nèi)。

配置Android資源包

配置project.miniapp.json文件內(nèi)mini-android的 projectPath和archivePath。projectPath指向的是安卓原生工程的路徑，archivePath相對路徑（相對于projectPath），如app/src/main/assets/SaaA_embed/wxfa0d2b4a0a0d38dc，之后構(gòu)建安卓資源包將存在到該目錄下。

需要說明的是，安卓資源包指定的目錄必須在 資源（assets）目錄內(nèi)，如app/src/main/assets/SaaA_embed/wxfa0d2b4a0a0d38dc，之后運行時通過SaaA_embed/wxfa0d2b4a0a0d38dc可獲取到資源包。

接下來就是執(zhí)行構(gòu)建命令了，構(gòu)建過程中的日志以及結(jié)果可在「構(gòu)建」面板中查看。

3.3.2 構(gòu)建apk

打開project.miniapp.json，可以看到mini-android對象內(nèi)的buildArgs，配置 variant，其值由buildTypes、productFlavors和flavorDimensions等組合而成，而這些則配置在 miniapp/android/app/build.gradle 文件內(nèi)。當只有一個flavorDimension時，格式為：<product-flavor><Build-Type>, 如ArmDebug、ArmRelease、Arm64Debug和Arm64Release等等 。

接著，點擊「工具 - 操作 - 設(shè)置 apk/ipa 導出路徑」配置apk導出的路徑。

最后，點擊菜單「工具 - 構(gòu)建 - 打包生成 apk 」，構(gòu)建過程中的日志以及安裝包路徑可在「構(gòu)建」面板中查看，如下圖。

3.3.3 構(gòu)建ipa

打開project.miniapp.json，可以看到mini-ios對象內(nèi)的buildArgs，配置 scheme以及 exportOptionPlistPath等配置。

之前在蘋果后臺創(chuàng)建證書時你被要求創(chuàng)建了一對秘鑰，私鑰保存在開發(fā)者本地，公鑰上傳到了蘋果后臺生成了證書。如果之前不是在當前機器上操作的，那你需要將私鑰導出成p12證書，并導入到當前機器。

接下來，點擊「工具 - 操作 - 設(shè)置 apk/ipa 導出路徑」配置ipa包導出的路徑。

然后，點擊菜單「工具 - 構(gòu)建 - 打包生成 ipa 」，構(gòu)建過程中的日志以及安裝包路徑可在「構(gòu)建」面板中查看，如下圖。

四、使用云開發(fā)功能

微信是支持云開發(fā)的，不過在多端框架使用云開發(fā)等云能力的方法時需要注意以下事項。首先，使用云開發(fā)時，需要在 cloud.init 時顯式指定云開發(fā)環(huán)境所在的微信 AppID：

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

4.1 多端登錄模式

采用以下登錄方式，登錄成功后，可以無縫使用云開發(fā)，和在微信小程序內(nèi)使用無異。

4.1.1 喚起微信小程序登錄

調(diào)用 JSAPI 喚起微信小程序登錄，獲取臨時登錄憑證 (code)，通過憑證進而換取用戶標識信息等。另外，登錄成功后，可以調(diào)用微信 JSAPI 以使用微信開放能力，如云開發(fā)等。

真正調(diào)用前需要做如下一些準備：

• 需引入微信能力拓展 SDK (iOS、Android)。
• 配置喚起的微信小程序版本。在 app.miniapp.json 中，添加 “authorizeMiniprogramType” 參數(shù)，可指定跳轉(zhuǎn)小程序版本 (0：正式版，1：開發(fā)版，2：體驗版)。

• 配置小程序官方授權(quán)頁。在 app.json 中，添加 “useAuthorizePage” 參數(shù)，并設(shè)為 “true”。配置后，小程序?qū)⒃诰幾g時插入小程序官方授權(quán)頁 (官方授權(quán)頁不占用代碼包體積)。

• 在微信開發(fā)者工具中，選擇“小程序模式”，點擊預覽，使用微信掃碼。

以下是喚起小程序登錄的示例代碼：

wx.weixinMiniProgramLogin({
  success (res) {
    if (res.code) {
      // 發(fā)起網(wǎng)絡請求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
      // login 成功后，可以直接使用云開發(fā)功能
      wx.cloud.callFunction({
        name: 'myCloudFunction'
      })
    } else {
      console.log('登錄失?。? + res.errMsg)
    }
  }
})

4.1.2 移動喚起微信登錄

移動應用微信登錄是一種喚起用戶的微信 APP 進行登錄的方式。調(diào)用 JSAPI 實現(xiàn)該登錄方式，獲取臨時登錄憑證 (code)。通過憑證進而換取用戶標識信息等。另外，登錄成功后，可以調(diào)用微信 JSAPI 以使用微信開放能力，如云開發(fā)等。

在喚起微信登錄之前，需要準備如下的能力：

• 需引入微信能力拓展 SDK (iOS、Android)。
• 準備一個移動應用賬號，可以在微信開放平臺創(chuàng)建。
• 打開 Donut 開發(fā)平臺 - 身份管理，選擇 “接入多端應用”。

下面是一段示例代碼：

wx.weixinAppLogin({
  success (res) {
    if (res.code) {
      // 發(fā)起網(wǎng)絡請求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登錄失??！' + res.errMsg)
    }
  }
})
// login 成功后，可以直接使用云開發(fā)功能
wx.cloud.callFunction({
  name: 'myCloudFunction'
})

4.2 游客模式

默認情況下，在多端框架內(nèi)使用云開發(fā)時，是沒有微信登錄態(tài)信息的（即 cloud.getWXContext 內(nèi)無 OPENID）。為了允許未登錄模式用戶訪問云環(huán)境資源，需要在「微信開發(fā)者工具-云開發(fā)-設(shè)置-權(quán)限設(shè)置-未登錄用戶訪問云資源權(quán)限設(shè)置」打開相應云環(huán)境的開關(guān)。

4.3 常見問題

云數(shù)據(jù)庫訪問權(quán)限

云開發(fā)數(shù)據(jù)庫訪問時，由于未登錄模式的限制，需要使用自定義安全規(guī)則。參考安全規(guī)則如下（所有用戶可讀，僅登錄后創(chuàng)建者可寫）：

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

uploadFile 和其他接口

未登錄模式下，不支持 wx.cloud.uploadFile 等需要登錄態(tài)的接口，如有上傳文件需求，建議使用“多端登錄模式”，或者通過騰訊云對象存儲等形式直接上傳到存儲桶中。

參考鏈接：Donut官網(wǎng)文章來源地址http://www.zghlxwxcb.cn/news/detail-632219.html

到了這里，關(guān)于微信跨平臺方案Donut快速上手的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！