如何开发、调试Hybrid项目-- 入门篇

前言

随着移动浪潮的兴起，各种APP层出不穷，极速的业务扩展提升了团队对开发效率的要求，这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了，而H5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式：Hybrid APP。 Hybrid采用动态获取资源包的方式进行热更新，既有web的能快速迭代发布的优势，又有直接从客户端上进行静态资源加载速度快的优势；俨然成为我们业务和页面的重中之重。

一、什么是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发送给端进行处理，所以速度会快很多，同时也提升了用户体验。

二、项目结构和如何启动

这里以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

三、如何在测试包上调适

场景：客户端hybrid debug模式

步骤如下所示： 以loanActivity项目为例，在命令行输入: gulp dev:local --platform=ios

1、进入手机客户端，摇一摇

2、打开Hybrid debug模式开关

3、配置本地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项目为例，主要步骤如下：

1、首先将最新代码push到gitlab，在命令行输入：

git add .

git commit -m "newCode"

git push

2、进入Jenkins － 点击Hybrid新脚本发布 － Build with Parameters － 按照提示填写表单，选择dev或beta环境（填写REPO时不要有空格）－ 开始构建