如何开发、调试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时不要有空格）－ 开始构建