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时不要有空格)- 开始构建

  • 相关阅读:
    tensorflow2.0 GPU和CPU 时间对比
    第一次使用FileZilla Server
    PremiumSoft Navicat 15 for Oracle中文破解版安装教程
    Unmapped Spring configuration files found. Please configure Spring facet or use 'Create Default Context' to add one including all unmapped files.
    ng : 无法加载文件 D: odejs ode_global g.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
    angular
    Github上优秀的go项目
    win10---file explore 中remove quick access folder
    react--useEffect使用
    linux---cat 和 grep 的妙用
  • 原文地址:https://www.cnblogs.com/lulin1/p/6000220.html
Copyright © 2011-2022 走看看