說說背景，之前在微信開發(fā)了一個(gè)工具類的小程序，小程序的日訪問量和用戶數(shù)還可以，但發(fā)現(xiàn)隨著用戶量的累積，一方面發(fā)現(xiàn)對(duì)于這類工具小程序，受限于微信小程序平臺(tái)規(guī)則，很難對(duì)用戶進(jìn)行更深入的運(yùn)營(yíng)，用戶流失問題也將逐漸凸顯出來。另一方面，其實(shí)自己一直想去系統(tǒng)的開發(fā)一個(gè)App，但又限于對(duì)原生技術(shù)掌握的不夠深入所以一直沒有上手去做。

在技術(shù)社區(qū)突然看到已經(jīng)有比較成熟的「小程序轉(zhuǎn) App」工具后，便有了把現(xiàn)有小程序直接通過工具轉(zhuǎn)為 App 的念頭。

先總結(jié)下自己整體使用的感受，我使用的是 FinClip 的 IDE 轉(zhuǎn) App 功能，整個(gè)過程其實(shí)比較簡(jiǎn)單，不需要太多的技術(shù)要求，傻瓜式的操作，基本上會(huì)小程序的上下架就可以直接完成整個(gè)過程。其中比較亮眼的是，通過 IDE 工具可以通過云編譯直接導(dǎo)出 App 的安裝包，同時(shí)也能在 IDE 里面直接配置logo、開屏動(dòng)畫、權(quán)限等內(nèi)容，這兩個(gè)步驟能夠避免到 Xcode 和 Android Studio 去進(jìn)行配置。

下面我也把自己在 FinClip 小程序轉(zhuǎn) App 的步驟大家簡(jiǎn)要介紹下，更詳細(xì)的內(nèi)容可以直接查閱官方給的文檔：

https://www.finclip.com/mop/document/develop/developer/convertApp.html#_1-2-%E9%85%8D%E7%BD%AE%E5%B7%A5%E7%A8%8B

一、下載安裝工具

直接在 FinClip 的官網(wǎng)下載安裝最新版本的 IDE 工具：https://www.finclip.com/downloads

二、App 配置

這里的配置包括了logo、開屏動(dòng)畫和權(quán)限配置。

打開 App 配置窗口

1、App 圖標(biāo)配置

App 圖標(biāo)配置分為兩種模式： 簡(jiǎn)單模式和定制模式。

• 簡(jiǎn)單模式下，用戶只需配置一張圖標(biāo)圖片
• 定制模式下用戶需要配置多張圖片：
• iOS 配置 iphone ， ipad 兩個(gè)尺寸
• android 則需要配置 48 * 48, 72 * 72, 96 * 96, 144 * 144, 192* 192 尺寸圖標(biāo)

2、 啟動(dòng)閃屏配置

這里是啟動(dòng) App 的閃屏畫面配置，根據(jù)提示上傳相應(yīng)尺寸的圖片即可。

3、URL Scheme 配置

App URL Scheme 配置, 目前 iOS、Android 均只支持一條 URL Scheme 配置。

4、權(quán)限配置

看了下 App 權(quán)限配置，目前 iOS 支持的配置權(quán)限有：讀取相冊(cè)、使用麥克風(fēng)、獲取位置、使用相機(jī)。Android 支持的配置選項(xiàng)有：位置相關(guān)權(quán)限、相機(jī)相關(guān)權(quán)限、I/O 相關(guān)權(quán)限、麥克風(fēng)相關(guān)權(quán)限。

三、小程序生成 App 工程

特別說明的是，F(xiàn)inClip 兼容微信小程序語法，可以直接將微信小程序代碼包導(dǎo)入 IDE 進(jìn)行編譯，我的試過后發(fā)現(xiàn)可以順利的編譯，速度也比較快。

在打開了小程序的頁面后，可以點(diǎn)擊右上角的「生成 App」按鈕，并點(diǎn)擊頁面中的「下一步」開始后續(xù)流程。

選擇該已上架的小程序所被關(guān)聯(lián)的小程序，以及小程序?qū)?yīng)的應(yīng)用信息及 BundleID，隨后點(diǎn)擊頁面中的「下一步」繼續(xù)流程。

這里也要特別說明下，編譯后記得上傳到 FinClip 的后臺(tái)，這樣這里才能順利的進(jìn)行關(guān)聯(lián)選擇。

選擇小程序轉(zhuǎn)為 App 的工程文件目錄后，點(diǎn)擊完成按鈕。

四、編譯生成 App

提供了云打包和本地編譯兩種生成 App 安裝包的方式，不用看推薦直接選云打包就可以了，本地編譯還需要自己到 Xcode 和 Android Studio 去進(jìn)行編譯配置。

1、配置 App 所需的證書信息

安卓配置證書:

參考 安卓構(gòu)建應(yīng)用(opens new window)進(jìn)行證書的配置導(dǎo)出

上傳生成的證書，并填寫證書別名（Key alias），證書私鑰（Key password），文件私鑰（Key store password）。

iOS配置證書:

參考iOS證書配置(opens new window)進(jìn)行證書配置導(dǎo)出

上傳生產(chǎn)、開發(fā)環(huán)境的證書、證書密碼、描述文件。

完畢后，點(diǎn)擊下一步即可進(jìn)入云端編譯，稍等片刻，等待編譯完成即可。

2、查看云打包進(jìn)展

打開 查看云打包進(jìn)展，當(dāng)前的云打包任務(wù)的進(jìn)展現(xiàn)實(shí)編譯成功，即可選擇下載鏈接下載應(yīng)用。

下載后的即為可直接上傳應(yīng)用商店的安裝包，整個(gè)小程序轉(zhuǎn) App 的過程也結(jié)束了。

結(jié)束語

我個(gè)人認(rèn)為這種小程序轉(zhuǎn) App 的模式非常友好，能夠讓已經(jīng)有成熟小程序的開發(fā)者在無需掌握原生技術(shù)的情況下快速的就生成 App。

我整個(gè)過程使用下來，是無需任何付費(fèi)的，這點(diǎn)又要大大的點(diǎn)一個(gè)贊，對(duì)開發(fā)者真的很友好。也看下官網(wǎng)的產(chǎn)品介紹寫到，由于生成的 App 中運(yùn)行的小程序是在 FinClip 上面跑，會(huì)對(duì)小程序的調(diào)用次數(shù)有一定限制，每月1萬次的免費(fèi)額度，如果后續(xù)如果每月的調(diào)用次數(shù)超過1萬次，也可以購(gòu)買包年套餐，價(jià)格也可以說非常親民。

經(jīng)過前一天Messenger應(yīng)用平臺(tái)、Parse物聯(lián)網(wǎng)開發(fā)者工具等驚喜的轟炸，F(xiàn)acebook于今天凌晨在F8開發(fā)者大會(huì)上正式開源了React Native。不過目前，只有iOS版，Android版還需要再等一段時(shí)間，這是最新的用JavaScript語言開發(fā)原生App的嘗試，其示例代碼相當(dāng)簡(jiǎn)潔，內(nèi)置控件也不少。同時(shí)還為React Native開發(fā)了一款基于Atom的IDE——Nuclide，也已開源。

React Native主要特性如下：

React Native主張“Learn once, write everywhere”而非其他跨平臺(tái)工具一直宣揚(yáng)的“Write once, run everywhere”。通過React Native，開發(fā)者可以使用UITabBar、UINavigationController等標(biāo)準(zhǔn)的iOS平臺(tái)組件，讓應(yīng)用界面在其他平臺(tái)上亦能保持始終如一的外觀、風(fēng)格。

var React=require('react-native'); var { TabBarIOS, NavigatorIOS }=React; var App=React.createClass({ render: function { return ( <TabBarIOS>
    <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS
    initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item>
    </TabBarIOS> ); }, });

JavaScript應(yīng)用代碼和原生平臺(tái)之間所有的操作都采用異步執(zhí)行模式，原生模塊使用額外線程，開發(fā)者可以解碼主線程圖像、后臺(tái)保存至磁盤、無須顧忌UI等諸多因素直接度量文本設(shè)計(jì)布局。

React Native引入了一個(gè)類似于iOS上Responder Chain響應(yīng)鏈?zhǔn)录幚頇C(jī)制的響應(yīng)體系，并基于此為開發(fā)者提供了諸如TouchableHighlight等更高級(jí)的組件。

var React=require('react-native'); var { ScrollView, TouchableHighlight,
        Text }=React; var TouchDemo=React.createClass({ render: function
        { return ( <ScrollView> <TouchableHighlight onPress={=>
        console.log('pressed')}> <Text>Proper Touch Handling</Text>
        </TouchableHighlight> </ScrollView> ); }, });

Facebook在 React Native的主頁上詳細(xì)介紹了React Native的種種功能特性，想要了解更多細(xì)節(jié)，可直接進(jìn)入主頁查看，而其為React Native搭配的開源IDE Nuclide支持React Native、Web和原生移動(dòng)開發(fā)，基于Atom構(gòu)建，不過也需要翻墻。