? ?前言? ? ??

? ? ? ?相信越來越多小伙伴發現不少超級APP的頁面都采用小程序開發了。例如支付寶客戶端，首頁有一個小程序中心的入口，支付寶上很多頁面都是小程序了。

圖1 支付寶小程序入口

? ? ? ?第一次打開的一個新功能時，會出現一個短暫的loading過程。小程序右上角有查看詳情和關閉的按鈕，例如中國體育小程序。

圖2 支付寶“中國體育”小程序截圖

? ? ? ?那么為什么越多越多大廠的app采用了小程序容器化開發呢？博主將在本博客簡要說明小程序容器化的趨勢、優點，以及如何基于uni-app在Android端開發自己的小程序。本文提綱如下：

圖3 博客提綱

?一. 小程序趨勢

? ? ? ?回到前言提到的問題——那么為什么越多越多大廠的app采用了小程序容器化開發呢？這是大前端發展的趨勢。博主認為主要有以下幾個原因：

1.1多端一致性

? ? ? ? Android/iOS雙端一致性，一直是移動端致力解決的問題。一些熱門產品，通常還有PC端、公眾號、H5頁面等門戶產品。在博主的項目中就要求四端：Android、iOS、PC端、H5提供交易功能。同樣的功能，實現了四遍，測試四遍。跨平臺技術是保證多端一致性的重要手段。

1.2 動態化

? ? ? ? 動態化，不僅可以滿足千人千面的需求，通過后臺配置模版實現頁面動態化，不需要客戶端coding大量的代碼；還可以減少app發版的次數和降低上架時間，日漸嚴格的蘋果市場審核機制讓開發者意識到動態化的重要性，尤其是出現BUG時需要緊急發版。對于強監管業務，app也是需要具備隨時下架某個功能的能力。

1.3 低代碼，提升開發效率

? ? ? ?low- code——低代碼，這在業界已經流行好多年了。low- code可以大幅度減少代碼量，通過模版代碼就能快速滿足功能開發或支持第三方接入的需求。同一套模版代碼還可以復用到各個端，開發量減少了，測試時間也減少了，開發效率得到極大的提升。

1.4 安裝包控制

? ? ? ?大廠的超級app通常包羅很多功能，還是拿支付寶來說，支付寶上面的多功多得數不清。如果用純原生的代碼來實現，想想app安裝包會大到什么程序？這對app推廣非常不利的。所以，控制 app安裝包大小，web或小程序化就變成非常重要了 。

二. 為什么選擇uni-app

? ? ? ?市面上能滿足開發并集成自己的小程序的技術還挺多的，例如AntBuilder、FinClip、uni-app等。沒有最好的技術，只有適合自己團隊和業務場景的技術才是最佳的技術，所以博主不會展開討論它們的區別，而是從自身的角度談談為什么選擇uni-app。

2.1?技術棧

? ? ? ?uni-app技術棧還是基于vue.js + weex的，比較符合我們團隊的技術儲備的情況，學習成本非常低，團隊能快速上手。

2.2 uni-app的特點

? ? ? ?uni-app從2018年發布第一個版本以來，一直保持快速迭代的趨勢[1]?。官方github上star數量為:32.7K[2]。uni-app在開發者數量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態、學習成本、開發成本等關鍵指標上擁有更強的優勢[3]。

1）開發者/案例數量更多：數百萬應用、uni統計月活12億、70+微信/qq群、更高的百度指數，跨端完善度高。

2）平臺能力不受限：在跨端的同時，通過條件編譯+平臺特有API調用，可以優雅的為某平臺寫個性化代碼，調用專有能力而不影響其他平臺。支持原生代碼混寫和原生sdk集成。

3）性能體驗優秀：加載新頁面速度更快、自動diff更新數據。App端支持原生渲染，可支撐更流暢的用戶體驗。小程序端的性能優于市場其他框架。

4）周邊生態豐富：插件市場數千款插件。支持NPM、支持小程序組件和SDK。微信生態的各種sdk可直接用于跨平臺App。

5）學習成本低：基于通用的前端技術棧，采用vue語法+微信小程序api，無額外學習成本。

6）開發成本低：?HBuilderX是高效開發神器，熟練掌握后研發效率至少翻倍。

三. 集成uni-app

? 3.1 安裝環境

? ? ? ?環境安裝參考官網[4]，uni-app支持通過可視化界面、vue-cli命令行兩種方式快速創建項目。推薦大家使用可視化界面。可視化的方式比較簡單，HBuilderX內置相關環境，開箱即用，無需配置nodejs。

? ? ? ?開始之前，開發者需先下載安裝HBuilderX IDE工具：

• 安裝HBuilderX：官方IDE下載地址

? ? ? ? HBuilderX是通用的前端開發工具，但為uni-app做了特別強化。分兩個版本：1）App開發版，可開箱即用；2）標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。推薦下載App開發版，博主安裝的MacOS 開發版。

圖3.1 HBuilderX安裝包

• ?下載SDK：從官網下載最新版本的SDK[5], 下載鏈接。如下圖所示：

圖3.2 下載SDK

?? 3.2 集成 SDK

• ? ?添加依賴

? ? ? ? ? 1）在app的build.gradle添加7步配置：

plugins {id 'com.android.application'id 'kotlin-android' }//1.必須配置 def mfph = [//宿主包名"apk.applicationId" : "com.rzl.uniapp.android", ]android {compileSdkVersion 30buildToolsVersion "29.0.3"defaultConfig {applicationId "com.rzl.uniapp.android"minSdkVersion 21 // 2. 改為21targetSdkVersion 30versionCode 1versionName "1.0"testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"// 3. 添加以下配置multiDexEnabled truemanifestPlaceholders = mfphndk {abiFilters 'x86','armeabi-v7a',"arm64-v8a" //不支持armeabi}//4. 此處配置必須添加 否則無法正確運行aaptOptions {additionalParameters '--auto-add-overlay'//noCompress 'foo', 'bar'ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"}}// 5. 導入aar需要的配置repositories {flatDir {dirs 'libs'}}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'}}compileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}kotlinOptions {jvmTarget = '1.8'} }dependencies {//6. 導入SDK相關依賴jar、aarimplementation fileTree(include: ['*.jar'], dir: 'libs')implementation fileTree(include: ['*.aar'], dir: 'libs')implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"implementation 'androidx.core:core-ktx:1.2.0'implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'com.google.android.material:material:1.1.0'implementation 'androidx.constraintlayout:constraintlayout:1.1.3'testImplementation 'junit:junit:4.+'androidTestImplementation 'androidx.test.ext:junit:1.1.1'androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'// 7. 添加依賴庫implementation 'com.android.support:recyclerview-v7:28.0.0' //必須集成implementation 'com.android.support:support-v4:28.0.0' //必須集成implementation 'com.android.support:appcompat-v7:28.0.0' //必須集成implementation 'com.alibaba:fastjson:1.1.46.android' //必須集成implementation 'com.facebook.fresco:fresco:1.13.0'//必須集成implementation 'com.facebook.fresco:animated-gif:1.13.0'//必須集成implementation 'com.github.bumptech.glide:glide:4.9.0'//必須集成 }

2）將sdk libs下的庫（用到什么庫添加什么）拷貝到app的libs下面：

圖3.3 依賴的SDK libs

• ?SDK初始化：

? ?1）添加application，在application中添加初始化代碼:

package com.rzl.uniapp.androidimport android.app.Application import io.dcloud.feature.sdk.DCUniMPSDK import java.util.* import io.dcloud.feature.sdk.DCSDKInitConfig import io.dcloud.feature.sdk.MenuActionSheetItemclass MyApplication : Application() {override fun onCreate() {super.onCreate()// sdk初始化代碼val sheetItems: List<MenuActionSheetItem> =ArrayList<MenuActionSheetItem>()val config: DCSDKInitConfig = DCSDKInitConfig.Builder().setCapsule(true).setMenuDefFontSize("16px").setMenuDefFontColor("#ff00ff").setMenuDefFontWeight("normal").setMenuActionSheetItems(sheetItems).build()DCUniMPSDK.getInstance().initialize(this, config)} }

?2）新建一個assets目錄，在asset目錄下面創建apps文件夾，并拷貝SDK?assets的data文件夾及js文件到assets目錄下。

圖3.4 創建assets及相關目錄

?3）加載測試小程序

? ? ? ?從SDK的官方demo拷貝一個小程序到assets/apps下面，例如博主拷貝了：__UNI__2108B0A夾放到apps下面。? 通過以下方法啟動小程序。

? ? ? // 啟動測試小程序
? ? ? ? try {
? ? ? ? ? ? DCUniMPSDK.getInstance().startApp(applicationContext, "__UNI__2108B0A")
? ? ? ? } catch (e: Exception) {
? ? ? ? ? ? e.printStackTrace()
? ? ? ? }

點擊Android stdio的運行按鈕之后，測試小程序被加載進來了。說明環境全部都OK，接下來可以編寫自己的小程序了。

四. 編寫并運行自己的小程序

? 4.1 編寫小程序

• 打開HBuilderX，文件->新建->項目，項目信息如下：

圖4.1 HBuilderX創建項目界面

創建好目錄之后，我們來看看工程的代碼結構。

圖4.2 工程的代碼結構

?1）pages：頁面布局寫在這下面；

?2）manifest.json:小程序的配置文件，選擇性配置一些信息，如下圖所示。前提：你需要到dcloud開發者中心官網注冊一個賬號，注冊地址。在后臺創建一個應用，如下圖所示。

圖3.7 dcloud開發者中心后臺應用列表截圖 圖4.3 manifest.json配置圖

3）pages.json：頁面路由配置及全局樣式。例如：

{
?? ?"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
?? ??? ?{
?? ??? ??? ?"path": "pages/about/about",
?? ??? ??? ?"style": {
?? ??? ??? ??? ?"navigationBarTitleText": "關于"
?? ??? ??? ?}
?? ??? ?}
?? ?],
?? ?"globalStyle": {
?? ??? ?"navigationBarTextStyle": "black",
?? ??? ?"navigationBarTitleText": "關于",
?? ??? ?"navigationBarBackgroundColor": "#F8F8F8",
?? ??? ?"backgroundColor": "#F8F8F8"
?? ?}
}

? 4.2 運行小程序? ?

? ? ?點擊HBuilderX左上角的運行按鈕，選擇編譯設備，例如chrome瀏覽器。?

圖4.4 HBuilderX編譯選擇界面

? 4.3 打包小程序

• 代碼運行沒有問題，就可以打包了。打開HBuilderX，點擊左上角的發行按鈕，生成wgt包 。

圖4.5 HBuilderX打包界面

4.4 集成小程序

? 1）在app的assets/apps下面：創建__UINI__XX目錄（XX是小程序的appID）；再在__UINI__XX下面創建www目錄。

2）將wgt重命名zip包，解壓縮，將壓縮包的內容拷貝到assets/apps/__UINI__XX/www文件夾下面。

圖4.6 拷貝小程序文件示意圖

4.5 運行小程序

? ? ?在調起小程序的入口，將名字改為我們的小程序名稱即可。調起方法如下：

// xx是小程序appID DCUniMPSDK.getInstance().startApp(applicationContext, "__UNI__xx")

在Android studio中代碼，看到我們的小程序被加載進來了。?

圖4.7 小程序加載頁面

5.Demo代碼

? ? ?demo代碼上傳到github，如果需要，請小伙伴自行下載。下載地址。

6.參考鏈接

[1]?https://uniapp.dcloud.io/release?id=_014520180728-alpha

[2]?https://github.com/dcloudio/uni-app

[3]?https://uniapp.dcloud.io/README

[4]?https://uniapp.dcloud.io/quickstart-hx

[5]https://nativesupport.dcloud.net.cn/UniMPDocs/SDKDownload/android

總結

以上是生活随笔為你收集整理的小程序容器化：基于uni-app的Android小程序开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。