zoukankan      html  css  js  c++  java
  • 如何开发、调试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.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时不要有空格)- 开始构建

  • 相关阅读:
    0008_Python变量
    shiro Filter过滤器管理197
    oracle 将一个数据库(A)的表导入到另一个数据库197
    top命令使用197
    SpringBoot下载Excel文件,解决文件损坏问题197
    java元注解197
    Content-Type
    centos7 下修改网络配置
    mint 20 install NVIDIA driver for 3080 via run
    使用numpy rot90操作image后,opencv cv2.rectangle 报错
  • 原文地址:https://www.cnblogs.com/lulin1/p/6000220.html
Copyright © 2011-2022 走看看