? ?前言? ? ??

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

圖1 支付寶小程序入口

? ? ? ?第一次打開的一個(gè)新功能時(shí)，會(huì)出現(xiàn)一個(gè)短暫的loading過程。小程序右上角有查看詳情和關(guān)閉的按鈕，例如中國體育小程序。

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

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

圖3 博客提綱

?一. 小程序趨勢

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

1.1多端一致性

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

1.2 動(dòng)態(tài)化

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

1.3 低代碼，提升開發(fā)效率

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

1.4 安裝包控制

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

二. 為什么選擇uni-app

? ? ? ?市面上能滿足開發(fā)并集成自己的小程序的技術(shù)還挺多的，例如AntBuilder、FinClip、uni-app等。沒有最好的技術(shù)，只有適合自己團(tuán)隊(duì)和業(yè)務(wù)場景的技術(shù)才是最佳的技術(shù)，所以博主不會(huì)展開討論它們的區(qū)別，而是從自身的角度談?wù)劄槭裁催x擇uni-app。

2.1?技術(shù)棧

? ? ? ?uni-app技術(shù)棧還是基于vue.js + weex的，比較符合我們團(tuán)隊(duì)的技術(shù)儲(chǔ)備的情況，學(xué)習(xí)成本非常低，團(tuán)隊(duì)能快速上手。

2.2 uni-app的特點(diǎn)

? ? ? ?uni-app從2018年發(fā)布第一個(gè)版本以來，一直保持快速迭代的趨勢[1]?。官方github上star數(shù)量為:32.7K[2]。uni-app在開發(fā)者數(shù)量、案例、跨端抹平度、擴(kuò)展靈活性、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等關(guān)鍵指標(biāo)上擁有更強(qiáng)的優(yōu)勢[3]。

1）開發(fā)者/案例數(shù)量更多：數(shù)百萬應(yīng)用、uni統(tǒng)計(jì)月活12億、70+微信/qq群、更高的百度指數(shù)，跨端完善度高。

2）平臺(tái)能力不受限：在跨端的同時(shí)，通過條件編譯+平臺(tái)特有API調(diào)用，可以優(yōu)雅的為某平臺(tái)寫個(gè)性化代碼，調(diào)用專有能力而不影響其他平臺(tái)。支持原生代碼混寫和原生sdk集成。

3）性能體驗(yàn)優(yōu)秀：加載新頁面速度更快、自動(dòng)diff更新數(shù)據(jù)。App端支持原生渲染，可支撐更流暢的用戶體驗(yàn)。小程序端的性能優(yōu)于市場其他框架。

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

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

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

三. 集成uni-app

? 3.1 安裝環(huán)境

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

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

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

? ? ? ? HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強(qiáng)化。分兩個(gè)版本：1）App開發(fā)版，可開箱即用；2）標(biāo)準(zhǔn)版，在運(yùn)行或發(fā)行uni-app時(shí)，會(huì)提示安裝uni-app插件，插件下載完成后方可使用。推薦下載App開發(fā)版，博主安裝的MacOS 開發(fā)版。

圖3.1 HBuilderX安裝包

• ?下載SDK：從官網(wǎng)下載最新版本的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. 此處配置必須添加 否則無法正確運(yùn)行aaptOptions {additionalParameters '--auto-add-overlay'//noCompress 'foo', 'bar'ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"}}// 5. 導(dǎo)入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. 導(dǎo)入SDK相關(guān)依賴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）新建一個(gè)assets目錄，在asset目錄下面創(chuàng)建apps文件夾，并拷貝SDK?assets的data文件夾及js文件到assets目錄下。

圖3.4 創(chuàng)建assets及相關(guān)目錄

?3）加載測試小程序

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

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

點(diǎn)擊Android stdio的運(yùn)行按鈕之后，測試小程序被加載進(jìn)來了。說明環(huán)境全部都OK，接下來可以編寫自己的小程序了。

四. 編寫并運(yùn)行自己的小程序

? 4.1 編寫小程序

• 打開HBuilderX，文件->新建->項(xiàng)目，項(xiàng)目信息如下：

圖4.1 HBuilderX創(chuàng)建項(xiàng)目界面

創(chuàng)建好目錄之后，我們來看看工程的代碼結(jié)構(gòu)。

圖4.2 工程的代碼結(jié)構(gòu)

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

?2）manifest.json:小程序的配置文件，選擇性配置一些信息，如下圖所示。前提：你需要到dcloud開發(fā)者中心官網(wǎng)注冊一個(gè)賬號(hào)，注冊地址。在后臺(tái)創(chuàng)建一個(gè)應(yīng)用，如下圖所示。

圖3.7 dcloud開發(fā)者中心后臺(tái)應(yīng)用列表截圖 圖4.3 manifest.json配置圖

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

{
?? ?"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages
?? ??? ?{
?? ??? ??? ?"path": "pages/about/about",
?? ??? ??? ?"style": {
?? ??? ??? ??? ?"navigationBarTitleText": "關(guān)于"
?? ??? ??? ?}
?? ??? ?}
?? ?],
?? ?"globalStyle": {
?? ??? ?"navigationBarTextStyle": "black",
?? ??? ?"navigationBarTitleText": "關(guān)于",
?? ??? ?"navigationBarBackgroundColor": "#F8F8F8",
?? ??? ?"backgroundColor": "#F8F8F8"
?? ?}
}

? 4.2 運(yùn)行小程序? ?

? ? ?點(diǎn)擊HBuilderX左上角的運(yùn)行按鈕，選擇編譯設(shè)備，例如chrome瀏覽器。?

圖4.4 HBuilderX編譯選擇界面

? 4.3 打包小程序

• 代碼運(yùn)行沒有問題，就可以打包了。打開HBuilderX，點(diǎn)擊左上角的發(fā)行按鈕，生成wgt包 。

圖4.5 HBuilderX打包界面

4.4 集成小程序

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

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

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

4.5 運(yùn)行小程序

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

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

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

圖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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。