我把微信小程序轉(zhuǎn)為App上架到了App Store

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

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

先總結(jié)下自己整體使用的感受，我使用的是 FinClip 的 IDE 轉(zhuǎn) App 功能，整個(gè)過(guò)程其實(shí)比較簡(jiǎn)單，不需要太多的技術(shù)要求，傻瓜式的操作，基本上會(huì)小程序的上下架就可以直接完成整個(gè)過(guò)程。其中比較亮眼的是，通過(guò) IDE 工具可以通過(guò)云編譯直接導(dǎo)出 App 的安裝包，同時(shí)也能在 IDE 里面直接配置logo、開(kāi)屏動(dòng)畫(huà)、權(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、開(kāi)屏動(dòng)畫(huà)和權(quán)限配置。

打開(kāi) App 配置窗口

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

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

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

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

這里是啟動(dòng) App 的閃屏畫(huà)面配置，根據(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 工程

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

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

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

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

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

四、編譯生成 App

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

1、配置 App 所需的證書(shū)信息

安卓配置證書(shū):

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

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

iOS配置證書(shū):

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

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

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

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

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

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

結(jié)束語(yǔ)

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

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

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

React Native主要特性如下：

React Native主張“Learn once, write everywhere”而非其他跨平臺(tái)工具一直宣揚(yáng)的“Write once, run everywhere”。通過(guò)React Native，開(kāi)發(fā)者可以使用UITabBar、UINavigationController等標(biāo)準(zhǔn)的iOS平臺(tái)組件，讓?xiě)?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í)行模式，原生模塊使用額外線程，開(kāi)發(fā)者可以解碼主線程圖像、后臺(tái)保存至磁盤(pán)、無(wú)須顧忌UI等諸多因素直接度量文本設(shè)計(jì)布局。

React Native引入了一個(gè)類(lèi)似于iOS上Responder Chain響應(yīng)鏈?zhǔn)录幚頇C(jī)制的響應(yīng)體系，并基于此為開(kāi)發(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的主頁(yè)上詳細(xì)介紹了React Native的種種功能特性，想要了解更多細(xì)節(jié)，可直接進(jìn)入主頁(yè)查看，而其為React Native搭配的開(kāi)源IDE Nuclide支持React Native、Web和原生移動(dòng)開(kāi)發(fā)，基于Atom構(gòu)建，不過(guò)也需要翻墻。

builder是我們開(kāi)發(fā)的一個(gè)打包網(wǎng)站的平臺(tái)，可以非常方便的把一個(gè)手機(jī)網(wǎng)站做成APP，也可以直接打包h5代碼，免費(fèi)使用！

下面介紹如何使用lbuilder打包一個(gè)網(wǎng)站，并安裝到手機(jī)測(cè)試。

分七步進(jìn)行

1、注冊(cè)lbuilder平臺(tái)賬號(hào)

2、創(chuàng)建APP、配置基本信息

3、配置擴(kuò)展插件

4、配置打包項(xiàng)目

5、配置安卓證書(shū)

6、配置ios證書(shū)

7、編譯APP

一、注冊(cè)lbuilder平臺(tái)賬號(hào)

1、打開(kāi)lbuilder官網(wǎng)http://www.lbuilder.com,點(diǎn)擊右上角注冊(cè)一個(gè)賬號(hào)。

二、創(chuàng)建一個(gè)app

1、登錄lbuilder平臺(tái)點(diǎn)擊制作APP，進(jìn)入APP管理后臺(tái)，點(diǎn)擊左側(cè)新建應(yīng)用。

2、填寫(xiě)APP基本信息

設(shè)置好保存下一步

3、設(shè)置應(yīng)用圖標(biāo)和啟動(dòng)圖。

設(shè)置好保存下一步

三、設(shè)置插件

根據(jù)app需求，選擇插件配置。

四、選擇打包項(xiàng)目

可選擇打包網(wǎng)址，或者直接打包代碼。

lbuilder可以直接打包H5代碼，如果沒(méi)有搭建域名，只有代碼也可以很方便的打包成APP。

1、選擇代碼打包，下載代碼模板，解壓有兩個(gè)文件夾。

2、復(fù)制代碼到代碼模板

點(diǎn)擊www文件夾，刪除代碼模板里面的兩個(gè)文件，復(fù)制你的代碼到這個(gè)文件夾。

3、重新壓縮為zip包，上傳打包

五、配置安卓證書(shū)

可以申請(qǐng)自定義證書(shū)配置，也可以使用系統(tǒng)自帶證書(shū)打包。

六、設(shè)置ios證書(shū)

可自己申請(qǐng)證書(shū)打包也可以使用系統(tǒng)證書(shū)打包

ios證書(shū)申請(qǐng)比較復(fù)雜，需要蘋(píng)果開(kāi)發(fā)者賬號(hào)才能申請(qǐng)。如有越獄手機(jī)，可以直接使用系統(tǒng)ios證書(shū)打包越獄版安裝測(cè)試。

ios證書(shū)申請(qǐng)比較復(fù)雜，耐心看下。

申請(qǐng)ios證書(shū)需要一個(gè)蘋(píng)果開(kāi)發(fā)者賬號(hào)

ios證書(shū)分開(kāi)發(fā)證書(shū)和發(fā)布證書(shū)，這里首先申請(qǐng)個(gè)開(kāi)發(fā)證書(shū)，先打包安裝到自己手機(jī)測(cè)試。

iOS開(kāi)發(fā)證書(shū)申請(qǐng)教程（真機(jī)調(diào)試測(cè)試）

iOS發(fā)布證書(shū)申請(qǐng)教程（上架App Store）

申請(qǐng)好證書(shū)會(huì)得到兩個(gè)證書(shū)文件.p12和..mobileprovision，這是一套證書(shū)。

選擇.p12和.mobileprovision文件上傳，輸入之前創(chuàng)建ios證書(shū)設(shè)置的密碼，保存！

七、打包編譯APP

可選打包安卓或者ios

如此就完成了網(wǎng)址或者代碼打包成app

在線咨詢(xún)

上一篇：用 Go 如何實(shí)現(xiàn)精準(zhǔn)統(tǒng)計(jì)文章字?jǐn)?shù)
下一篇：加載機(jī)制：App和Web分別的加載原理&am

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。