如何開發、調試Hybrid項目-- 入門篇

前言

隨着移動浪潮的興起，各類APP層出不窮，極速的業務擴展提高了團隊對開發效率的要求，這個時候使用IOS&Andriod開發一個APP彷佛成本有點太高了，而H5的低成本、高效率、跨平臺等特性立刻被利用起來造成了一種新的開發模式：Hybrid APP。 Hybrid採用動態獲取資源包的方式進行熱更新，既有web的能快速迭代發佈的優點，又有直接從客戶端上進行靜態資源加載速度快的優點；儼然成爲咱們業務和頁面的重中之重。

1、什麼是Hybrid？

Hybrid App（混合模式移動應用）：是指介於Web-App、Native-App這二者之間的app，兼具「Native App良好用戶交互體驗的優點」和「Web App跨平臺開發的優點」。 做爲一種混合開發的模式，Hybrid APP底層依賴於Native提供的容器（UIWebview），上層使用Html&Css&JS作業務開發，底層透明化、上層多多樣化，這種場景很是有利於前端介入，很是適合業務快速迭代，因而Hybrid火啦。

Hybrid App 和 Web-App 之比較：對前端來說，咱們主要關心的是Web-App，那麼相對Web-App加載的網頁，Hybrid 模式下加載網頁速度會快不少，緣由是Web-App須要網絡去加載數據，而Hybrid在本地打包，將打包好的dist（以本項目爲例）壓縮成zip發送給端進行處理，因此速度會快不少，同時也提高了用戶體驗。

2、項目結構和如何啓動

這裏以loanActivity（「借錢買理財」活動頁）項目爲例，介紹一下Hybrid的項目結構。如圖所示，主要有:

app ：包括該項目的入口頁面（index.html）、images圖片、scripts腳本、styles樣式（存放css、scss等）、views視圖（存放html文件）。

assets ：包括該項目的所用到的各類數據，主要有該項目接口文檔中的 api.json 數據（key值不變。經過在本地改變value值自測）和 data(mock api 數據) 。

.gitignore ：用於配置不須要加入版本管理的文件，告訴Git哪些文件不須要添加到版本管理中。［配置語法：以斜槓「/」開頭表示目錄；以星號「*」通配多個字符；以問號「?」通配單個字符；以方括號「[]」包含單個字符的匹配列表；以歎號「!」表示不忽略(跟蹤)匹配到的文件或目錄；］ 這樣，被過濾掉的文件就不會出如今GitLab庫中了，固然本地庫中還有，只是push的時候不會上傳。

deploy ： 配置dev , test , beta ,prod環境下如何起服務.

dist ：產出的代碼。

package.json ：package.json是包配置文件，必須是一個嚴格的json文件。其中不少屬性能夠經過npm-config來生成。npm安裝package.json時，直接轉到當前項目目錄下用命令npm install安裝便可，自動將package.json中的模塊安裝到node-modules文件夾下。package.json中包含各類所需模塊以及項目的配置信息（名稱、版本、許可證等）meta 信息，其中name和version必不可少。

README.md ：說明文檔。

接下來講一下如何啓動一個hybrid項目。

首先在gitlab裏新建一個模版項目，將項目地址copy下來，而後執行如下命令：

拷貝項目到本地： *git clone git@git.jdb-dev.com:mars/loanActivity.git *

進入項目： cd loanActivity

修改package.json的name爲你的項目包名： vim package.json

安裝node依賴： npm install

啓動項目： gulp serve

3、如何在測試包上調適

場景：客戶端hybrid debug模式

步驟以下所示： 以loanActivity項目爲例，在命令行輸入: gulp dev:local --platform=ios

一、進入手機客戶端，搖一搖

二、打開Hybrid debug模式開關

三、配置本地server ip 和 port［IP地址能夠經過Charles工具欄裏的 Help - Local IP Address獲取到，port默認爲3000，具體見命令行裏External中的端口號， eg. External:http://100.66.168.187:3000/activityLoanActivity/index.html ］

四、開始測試，在本地改的代碼，能夠在終端展現出來。

4、如何發佈到dev和beta環境

仍以loanActivity項目爲例，主要步驟以下：

一、首先將最新代碼push到gitlab，在命令行輸入：

git add .

git commit -m "newCode"

git push

二、進入Jenkins － 點擊Hybrid新腳本發佈 － Build with Parameters － 按照提示填寫表單，選擇dev或beta環境（填寫REPO時不要有空格）－ 開始構建