近年來，為了研發效率的提升，技術高頻革新，開發者們紛紛表示：“好是好，就是快學不動了！”。開發者們在不斷學習新語言、框架、工具等內容的同時，也在擔心所學是否真正有用。而小程式其實能夠幫助開發者最大化實現技術先進、研發高效和低投入成本。

我們先來梳理一下小程式的交付過程：

一般小程式從 idea 到釋出，安裝小程式開發者工具→新建模板小程式→開發→編譯→釋出，且整個過程為視覺化操作，只需寫核心邏輯程式碼即可。小程式框架本身所具有的快速載入和快速渲染能力，加之配套的雲能力、運維能力和資料彙總能力，可以釋放開發者的精力。且在語言上，小程式的前端開發學習成本較低。

在小程式的基礎上是否還有效率提高辦法呢？下面就進行梳理：

一、mpvue

mpvue是一個類vue的小程式框架，mpvue 繼承自 Vue.js，其技術規範和語法特點與 Vue.js 保持一致。可以幫助開發者提高效率，增加開發體驗，開發者只需要熟悉vue的api語法使用即可上手。官方還提供了了基於@vue/cli腳手架的快速開發方式。

1、快速建立mpvue專案

vue init mpvue/mpvue-quickstart  tengyu-demo

cd  tengyu-demo

npm install

npm run dev

2、需要注意的三點

1）獲取小程式在 page onLoad 時候傳遞的 options

在所有頁面的元件內可以透過 this.$root.$mp.query 進行獲取。

2）如何獲取小程式在 app onLaunch/onShow 時候傳遞的 options

在所有的元件內可以透過 this.$root.$mp.appOptions 進行獲取。

3）如何捕獲 app 的 onError

由於 onError 並不是完整意義的生命週期，所以只提供一個捕獲錯誤的方法，在 app 的根元件上新增名為 onError 的回撥函式即可。如下：

export 
default 
{

// 只有 app 才會有 onLaunch 的生命週期

onLaunch () {

// ...

},

// 捕獲 app error

onError (err) {

console.log(err)

}

}

這樣就搭建好了一個基本的mpvue小程式, 可以基於以上建立我們自己的專案，直接開發專案，將微信小程式的IDE當作一個預覽偵錯程式即可。

二、Taro

各大廠商釋出了自己的小程式平臺，其中包括：支付寶小程式、百度小程式、位元組跳動小程式等。Taro 是一個開放式跨端跨框架解決方案，支援使用 React/Vue/Nerv 等框架來開發小程式 / H5 / RN 等應用，能夠解決各小程式平臺間存在的語法差異、規範差異等，對於開發者而言，可以在編譯時抹平各端差異從而提升開發效率，降低開發成本。

1、腳手架安裝

# 使用 npm 安裝 CLI

$ npm install -g 
@tarojs
/cli

# OR 使用 yarn 安裝 CLI

$ yarn global add 
@tarojs
/cli

# OR 安裝了 cnpm，使用 cnpm 安裝 CLI

$ cnpm install -g 
@tarojs
/cli

2、初始化Taro專案

taro init tengyu-taro-demo

# 或

npx 
@tarojs
/cli init myApp

# 進入專案根目錄

$ cd myApp

# 使用 yarn 安裝依賴

$ yarn

# OR 使用 cnpm 安裝依賴

$ cnpm install

# OR 使用 npm 安裝依賴

$ npm install

3、多端編譯

使用 Taro 的 build 命令可以把 Taro 程式碼編譯成不同端的程式碼，然後在對應的開發工具中檢視效果。

# yarn

$ yarn dev:weapp

$ yarn build:weapp

# npm script

$ npm run dev:weapp

$ npm run build:weapp

# 僅限全域性安裝

$ taro build --type weapp --watch

$ taro build --type weapp

# npx 使用者也可以使用

$ npx taro build --type weapp --watch

$ npx taro build --type weapp

# watch 同時開啟壓縮

$ set NODE_ENV=production && taro build --type weapp --watch # Windows

$ NODE_ENV=production taro build --type weapp --watch # Mac

三、FinClip

FinClip主要將小程式的能力SDK 化，只需簡單整合 FinClip SDK ，即可在 iPhone、Android、Windows、Linux、macOS、統信、麒麟等平臺下的應用中執行你的小程式，這意味著，移動端、PC 端、車載裝置、智慧電視、智慧手錶都能執行小程式了，從而使APP架構由緊耦合向松耦合的轉變 , 將業務功能碎片化，實現獨立開發、獨立測試及獨立釋出，真正做到敏捷開發，提升效率。

FinClip 天然支援微信小程式語法 WXML，無需使用第三方跨端跨框架解決方案，即可編譯執行已有微信小程式程式碼。

1、整合SDK

FinClip小程式SDK 目前支援pod整合或者手動整合。具體文件可見： https://www.finclip.com/mop/document/runtime-sdk/ios/ios-integrate.html

1）安裝pod環境

Cocoapods 提供了一個非常簡單的依賴管理系統，避免手動匯入產生的錯誤。

sudo gem install cocoapods

pod setup

2）建立Podfile檔案

如果你不需要使用擴充套件SDK，那麼在podfile中只依賴FinApplet即可。如果你需要使用擴充套件SDK中的api，那麼你還需要依賴FinAppletExt。

當你在使用map元件的功能時，如果想使用三方地圖來實現的話，可引用FinAppletBDMap（百度地圖）或FinAppletGDMap（高德地圖），預設由原生地圖實現。

如果需要在小程式中使用WebRTC功能，可以在podfile中新增 FinAppletWebRTC 依賴，這個庫是我們基於GoogleWebRTC的二次封裝庫，支援iOS9以上系統版本。

如果需要在小程式中使用藍芽功能，可以在podfile中新增 FinAppletBLE 依賴。

如果需要在小程式中使用live-pusher，live-player功能，可以在podfile中新增 FinAppletAgoraRTC 依賴。

如果需要在小程式中使用addPhoneContact，新增手機通訊錄聯絡人，可以在podfile中新增 FinAppletContact 依賴。

如果需要在小程式中使用剪貼簿功能，可以在podfile中新增FinAppletClipBoard依賴。

在 Xcode 專案的根目錄下，新建一個Podfile檔案，在Podfile檔案中新增對小程式SDK的依賴：

pod 
'FinApplet'

pod 
'FinAppletExt'

pod 
'FinAppletBDMap'

pod 
'FinAppletGDMap'

pod 
'FinAppletWebRTC'

pod 
'FinAppletBLE'

pod 
'FinAppletAgoraRTC'

pod 
'FinAppletContact'

pod 
'FinAppletClipBoard'

2、初始化SDK

在工程的 AppDelegate 中的以下方法中，呼叫 SDK 的初始化方法。

NSString *plistPath = [[NSBundle mainBundle] pathForResource:@
"servers" 
ofType:@
"plist"
];

NSArray *array = [NSArray arrayWithContentsOfFile:plistPath];

NSMutableArray *storeArrayM = [NSMutableArray array];

for 
(NSDictionary *dict in array) {

FATStoreConfig *storeConfig = [[FATStoreConfig alloc] init];

storeConfig.sdkKey = dict[@
"sdkKey"
];

storeConfig.sdkSecret = dict[@
"sdkSecret"
];

storeConfig.apiServer = dict[@
"apiServer"
];

storeConfig.apmServer = dict[@
"apmServer"
];

if 
([@
"SM" 
isEqualToString:dict[@
"cryptType"
]]) {

storeConfig.cryptType = FATApiCryptTypeSM;

} 
else 
{

storeConfig.cryptType = FATApiCryptTypeMD5;

}
    
[storeArrayM addObject:storeConfig];

}

FATConfig *config = [FATConfig configWithStoreConfigs:storeArrayM];

[[FATClient sharedClient] initWithConfig:config error:nil];

3、開啟小程式

FATAppletRequest *request = [[FATAppletRequest alloc] init];

request.appletId = @
"小程式id"
;

request.apiServer = @
"伺服器地址"
;

request.transitionStyle = FATTranstionStyleUp;

request.startParams = startParams;
    
[[FATClient sharedClient] startAppletWithRequest:request InParentViewController:self completion:^(BOOL result, FATError *error) {

    
NSLog(@
"開啟小程式:%@"
, error);

} closeCompletion:^{

    
NSLog(@
"關閉小程式"
);

}];

有哪些框架/工具有利於小程式研發提效