我把微信小程序轉為App上架到了App Store

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

在技術社區突然看到已經有比較成熟的「小程序轉 App」工具后，便有了把現有小程序直接通過工具轉為 App 的念頭。

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

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

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 的官網下載安裝最新版本的 IDE 工具：https://www.finclip.com/downloads

二、App 配置

這里的配置包括了logo、開屏動畫和權限配置。

打開 App 配置窗口

1、App 圖標配置

App 圖標配置分為兩種模式：簡單模式和定制模式。

簡單模式下，用戶只需配置一張圖標圖片
定制模式下用戶需要配置多張圖片：
iOS 配置 iphone ， ipad 兩個尺寸
android 則需要配置 48 * 48, 72 * 72, 96 * 96, 144 * 144, 192* 192 尺寸圖標

2、啟動閃屏配置

這里是啟動 App 的閃屏畫面配置，根據提示上傳相應尺寸的圖片即可。

3、URL Scheme 配置

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

4、權限配置

看了下 App 權限配置，目前 iOS 支持的配置權限有：讀取相冊、使用麥克風、獲取位置、使用相機。Android 支持的配置選項有：位置相關權限、相機相關權限、I/O 相關權限、麥克風相關權限。

三、小程序生成 App 工程

特別說明的是，FinClip 兼容微信小程序語法，可以直接將微信小程序代碼包導入 IDE 進行編譯，我的試過后發現可以順利的編譯，速度也比較快。

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

選擇該已上架的小程序所被關聯的小程序，以及小程序對應的應用信息及 BundleID，隨后點擊頁面中的「下一步」繼續流程。

這里也要特別說明下，編譯后記得上傳到 FinClip 的后臺，這樣這里才能順利的進行關聯選擇。

選擇小程序轉為 App 的工程文件目錄后，點擊完成按鈕。

四、編譯生成 App

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

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

安卓配置證書:

參考安卓構建應用(opens new window)進行證書的配置導出

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

iOS配置證書:

參考iOS證書配置(opens new window)進行證書配置導出

上傳生產、開發環境的證書、證書密碼、描述文件。

完畢后，點擊下一步即可進入云端編譯，稍等片刻，等待編譯完成即可。

2、查看云打包進展

打開查看云打包進展，當前的云打包任務的進展現實編譯成功，即可選擇下載鏈接下載應用。

下載后的即為可直接上傳應用商店的安裝包，整個小程序轉 App 的過程也結束了。

結束語

我個人認為這種小程序轉 App 的模式非常友好，能夠讓已經有成熟小程序的開發者在無需掌握原生技術的情況下快速的就生成 App。

我整個過程使用下來，是無需任何付費的，這點又要大大的點一個贊，對開發者真的很友好。也看下官網的產品介紹寫到，由于生成的 App 中運行的小程序是在 FinClip 上面跑，會對小程序的調用次數有一定限制，每月1萬次的免費額度，如果后續如果每月的調用次數超過1萬次，也可以購買包年套餐，價格也可以說非常親民。

經過前一天Messenger應用平臺、Parse物聯網開發者工具等驚喜的轟炸，Facebook于今天凌晨在F8開發者大會上正式開源了React Native。不過目前，只有iOS版，Android版還需要再等一段時間，這是最新的用JavaScript語言開發原生App的嘗試，其示例代碼相當簡潔，內置控件也不少。同時還為React Native開發了一款基于Atom的IDE——Nuclide，也已開源。

React Native主要特性如下：

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

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應用代碼和原生平臺之間所有的操作都采用異步執行模式，原生模塊使用額外線程，開發者可以解碼主線程圖像、后臺保存至磁盤、無須顧忌UI等諸多因素直接度量文本設計布局。

React Native引入了一個類似于iOS上Responder Chain響應鏈事件處理機制的響應體系，并基于此為開發者提供了諸如TouchableHighlight等更高級的組件。

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的主頁上詳細介紹了React Native的種種功能特性，想要了解更多細節，可直接進入主頁查看，而其為React Native搭配的開源IDE Nuclide支持React Native、Web和原生移動開發，基于Atom構建，不過也需要翻墻。

builder是我們開發的一個打包網站的平臺，可以非常方便的把一個手機網站做成APP，也可以直接打包h5代碼，免費使用！

下面介紹如何使用lbuilder打包一個網站，并安裝到手機測試。

分七步進行

1、注冊lbuilder平臺賬號

2、創建APP、配置基本信息

3、配置擴展插件

4、配置打包項目

5、配置安卓證書

6、配置ios證書

7、編譯APP

一、注冊lbuilder平臺賬號

1、打開lbuilder官網http://www.lbuilder.com,點擊右上角注冊一個賬號。

二、創建一個app

1、登錄lbuilder平臺點擊制作APP，進入APP管理后臺，點擊左側新建應用。

2、填寫APP基本信息

設置好保存下一步

3、設置應用圖標和啟動圖。

設置好保存下一步

三、設置插件

根據app需求，選擇插件配置。

四、選擇打包項目

可選擇打包網址，或者直接打包代碼。

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

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

2、復制代碼到代碼模板

點擊www文件夾，刪除代碼模板里面的兩個文件，復制你的代碼到這個文件夾。

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

五、配置安卓證書

可以申請自定義證書配置，也可以使用系統自帶證書打包。

六、設置ios證書

可自己申請證書打包也可以使用系統證書打包

ios證書申請比較復雜，需要蘋果開發者賬號才能申請。如有越獄手機，可以直接使用系統ios證書打包越獄版安裝測試。

ios證書申請比較復雜，耐心看下。

申請ios證書需要一個蘋果開發者賬號

ios證書分開發證書和發布證書，這里首先申請個開發證書，先打包安裝到自己手機測試。

iOS開發證書申請教程（真機調試測試）

iOS發布證書申請教程（上架App Store）

申請好證書會得到兩個證書文件.p12和..mobileprovision，這是一套證書。

選擇.p12和.mobileprovision文件上傳，輸入之前創建ios證書設置的密碼，保存！

七、打包編譯APP

可選打包安卓或者ios

如此就完成了網址或者代碼打包成app

在線咨詢

上一篇：用 Go 如何實現精準統計文章字數
下一篇：加載機制：App和Web分別的加載原理&am

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。