前言

随着移动浪潮的兴起,各种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.jsonname为你的项目包名: 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时不要有空格)- 开始构建

如何开发、调试Hybrid项目-- 入门篇的更多相关文章

  1. 如何开发H5项目 -- 入门篇

    前言 H5即HTML5,H5开发具有低成本.高效率.跨平台.研发周期短,用户接触成本低等特性. 一.开发环境 在开发一个H5项目之前,需要先搞好环境.主要有node.npm.gulp.bower.下面 ...

  2. 【Android开发日记】之入门篇(三)——Android目录结构

    本来的话,这一章想要介绍的是Android的系统架构,毕竟有了这些知识的储备,再去看实际的项目时才会更清楚地理解为什么要这样设计,同时在开发中遇到难题,也可以凭借着对Android的了解,尽快找出哪些 ...

  3. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  4. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

  5. web前端开发分享-css,js入门篇(转)

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  6. web前端开发分享-css,js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

  7. 【Android开发日记】之入门篇(十二)——Android组件间的数据传输

    组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...

  8. vs code开发.net core项目入门

    今天用vs code来开发net core项目,写一下简要的开发流程,主要步骤如下,看完后你会发现特别简单 1.命令如下: (cmd中运行以下命令,下面命令都基于选择好自己的项目路径) 1.新建文件夹 ...

  9. 基于 abp vNext 和 .NET Core 开发博客项目 - 终结篇之发布项目

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

随机推荐

  1. 如何实现textarea中获取动态剩余字数的实现

    工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步. 案例介绍:我们常见到有的网站有textare ...

  2. ie6兼容问题汇总

    这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间,参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下,也方便我日后再用到: 1.IE的cache设置为Every visit t ...

  3. PHP 文件包含总结 include require 命名空间 autoload spl_autoload_register 读取文件路径

    总结: 1. include或require包含其他文件 使用./或者 ../,这里的当前路径和上一层路径,取决于运行脚本的路径,会存在如下问题. 在写PHP程序时,经常要用到include或requ ...

  4. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  5. RPM

    1.安装RPM 使用-ivh选项即可,能查看安装信息和进度. 例如: #RPM -ivh XXX.rpm RPM升级与更新,使用-Uvh选项或者-Fvh选项,两者略有区别. -Uvh选项:后面接的软件 ...

  6. 利用jQueryRotate旋转插件开发大转盘抽奖

    前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...

  7. Get Script Path in Shell

    #!/usr/bin/bashdir_old=$(pwd)absolute_script_path=$(cd $(dirname $0) && pwd)relative_script_ ...

  8. 【图像处理】【SEED-VPM】3.外设信息

    ———————————————————————————————————————————————————————————————————————— 摄像头接口 具有AV端子输出的彩色摄像头,摄像头广角8 ...

  9. Fair Scheduler中的Delay Schedule分析

    延迟调度的主要目的是提高数据本地性(data locality),减少数据在网络中的传输.对于那些输入数据不在本地的MapTask,调度器将会延迟调度他们,而把slot分配给那些具备本地性的MapTa ...

  10. (DFS、全排列)POJ-2718 Smallest Difference

    题目地址 简要题意: 给若干组数字,每组数据是递增的在0--9之间的数,且每组数的个数不确定.对于每组数,输出由这些数组成的两个数的差的绝对值最小是多少(每个数出现且只出现一次). 思路分析: 对于n ...