混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview

H5混合开发

混合开发、原生开发、H5开发的区别：

简述：主流APP：原生APP、H5(webapp)、混合APP，相对应的定制研发即原生开发、H5开发、混合开发

原生APP开发优缺点：

• 可以访问手机的所有功能，可实现功能最齐全
• 运行速度快、性能高、用户体验较好
• 兼容性高
• 比较快速的使用设备端提供的接口，处理速度上有优势
• 开发周期长、成本较高，可移植性较差
• 内容有限制
• 获得新版本必须要用户重新手动下载更新

WEB APP开发：

简述：HTML5开发，利用WEB技术进行的APP开发。可以在手机浏览器上打开的网站

优缺点：

1. 支持的设备范围广，一套代码可以同时在安卓、IOS、Windows上运行
2. 开发成本低
3. 无内容限制
4. 适合展示大量的文字信息，且样式比较丰富的页面
5. 用户可以直接使用最新版本（自动更新），而无需手动下载更新
6. 不能直接访问手机硬件和连线缓存
7. 对连网要求较高，离线不能做任何操作
8. 功能有限

 混合开发（原生+H5）：

简述：将原生的代码利用WebView插件或者其他框架为H5提供容器，程序主要的业务实现、界面展示都是由H5完成

优缺点：

• 开发效率高、统一套代码安卓、IOS基本上都可以使用
• 更新和部署都比较方便，每次升级版本只需在服务器端升级即可，不需上传到APP Store进行审核
• 代码维护方便，版本更新快
• 比Web版实现的功能多
• 可以离线缓存
• 加载缓慢，网络要求高：混合APP数据需要全部从后台服务器获取，每个页面都需要重新加载，因此打开速度慢，用户体验不是很好
• 既懂原生又懂H5开发的工程师较少

目前或者开发的两种模式：

1、原生主导开发模式：需要安卓和IOS开发人员，整个APP既有原生开发又有H5开发，在需要H5页面时由原生开发人员实现内联

2、H5主导的开发：只需H5开发工程师，借助一些封装好的工具实现应用的打包和调用原生设备的功能，比如Builder的云端打包功能

如何区分H5开发和原生开发：

页面下拉刷新时，如果没有明显的刷新现象，则是原生开发；H5会闪一下屏

下拉页面的时候显示网址就是H5开发

---

H5页面的开发布局

必不可少的meta

`<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">`

flex布局（推荐）

语法：

• 伸缩容器 display:flex

• 伸缩流方向 flex-direction : row | row-reverse | column | column-reverse解释：reverse反向

• 伸缩换行flex-wrap：适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩容器里是单行还是多行显示。语法：flex-wrap:nowrap | wrap | wrap-reverse

• 主轴对齐justify-content：flex-start | flex-end | center | space-between | space-around解释：主轴对齐适用于伸缩容器，主要用来定义伸缩项目沿着主轴线的对齐方式。其中：flex-start：伸缩项目向一行的起始位置靠齐

   space-between：伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置，最后一个伸缩项目在一行中的终点位置。
   space-around：伸缩项目会平均分布在行里，两端保留一半的空间。

• 侧轴对齐align-items和align-self

  • 伸缩项目在侧轴的对齐方式，主要由属性align-items控制

  • 语法：align-items：flex-start | flex-end | center | baseline | stretch解释：baseline：根据伸缩项目的基线对齐，基线根据伸缩项目的内容计算得到。stretch：默认值，伸缩项目拉伸填充整个伸缩容器

  • 伸缩项目自身在侧轴的对齐方式，主要由属性align-self控制属性值同align-items，实际上相当于特殊给自己定义对齐方式

• 堆栈伸缩行align-content

  • 语法：align-content : flex-start | flex-end | center | space-between | space-around | stetch解释：stetch：默认值，各行将会伸展以占用额外的空间这个属性只有伸缩项目有多行时才生效，这种情况只有flex-wrap为wrap时，并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。

• 伸缩性flex

  • 语法：flex : none | flex-grow

• 显示顺序order

  • 语法：order : number

  • 解释：改变伸缩项目出现在源文档的次序。eg：order:1 ; order : 2伸缩容器会以序号最小的组开始布局，在同一个组里的伸缩项目依据源文档里的次序布局

百分比布局

rem布局（px转rem插件）

px2rem 结合lib-flexible
    1、安装：
        npm i lib-flexible --save
        npm i px2rem-loader --save-dev

    2、引入
        在main.js中引入
        import 'lib-flexible'

    3、配置
        vue.config.js中
        // css:
        module.exports = {
          chainWebpack: config => {
            config.module
              .rule('css')
                .test(/\.css$/)
                .oneOf('vue')
                .resourceQuery(/\?vue/)
                .use('px2rem')
                  .loader('px2rem-loader')
                  .options({
                    remUnit: 75
                  })
          }
          
          // less:
          .rule('less')
          .test(/\.less$/)
          .oneOf('vue')
          .resourceQuery(/\?vue/)
          .use('px2rem')
          .loader('px2rem-loader')
          .before('postcss-loader')
          .options({
            remUnit: 75
          })
          .end()

    4、使用：750px的设计图量多少px就直接写多少px即可

    5、补充：
    （1）按照px来编写都会转化成rem的形式，但是有些地方我们不想转换，可以用下面两种方法。
    
    a.在px后面添加/*no*/或者单位写成大写的PX，不会转化px，会原样输出。 — 一般border需用这个
    b.在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
   
* postcss-pxtorem 结合lib-flexible(推荐）
​
    1、安装：npm install postcss-pxtorem -D

    2、vue.config.js中配置
       

 css: {
            loaderOptions: {
              postcss: {
                plugins: [
                  require('postcss-pxtorem')({
                    rootValue : 75, // 换算的基数
                    selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                    propList   : ['*'],
                  }),
                ]
              }
            }
          }

    3、rem函数：结合lib-flexible(推荐）
 

   // 设置 rem 函数
          function setRem () {
    
            // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
            let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
            let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
            htmlDom.style.fontSize= htmlWidth/10 + 'px';
          }
          // 初始化
          setRem();
          // 改变窗口大小时重新设置 rem
          window.onresize = function () {
            setRem()
          }

 

px布局

只要结合百分比布局和弹性盒布局使用。手机端视觉体验上差别不大，根据项目具体情况选择技术方案,一般border边框和字体大小可以使用px

---

开发注意事项、H5与原生（安卓）交互

开发注意事项

1、H5开发兼容性

• transition 谨慎使用

• 一定要遵守url传参规范url标准形式：特殊字符：，"" {} {name:xxx} ## 空格 等等问题：IOS有可能h会出现白屏

2、与原生App"互斥"的功能

• 下拉刷新（推荐由H5的开发工程师实现）

• overflow-y

H5与原生（安卓）交互：

• android和h5交互

window.control.callHandler("事件名","参数")

1.打开带小程序标题新页面

事件名js_wx 参数是JSON.stringify({"url": path})

例子：打开百度网址的新页面window.control.callHandler("js_wx", JSON.stringify({

                        "url": "https://www.baidu.com/"
                    }))

2.打开本地h5页面（主要针对需要打开word\pdf文件）

事件名js_native 参数是JSON.stringify({"name": name})例子：打开日报window.control.callHandler("js_native", JSON.stringify({

                        "name": "dailyReport"
                    }))

3.token失效退出登录事件名token_invalid 参数是""window.control.callHandler("token_invalid","")

4.控制首页隐藏、显示底部栏window.control.callHandler("bottom_title","show") 显示window.control.callHandler("bottom_title","invisible") 隐藏

5.h5透明标题 结合1方法url参数带transparentTitle=1

• IOS与H5交互window.webkit.messageHandlers.js_wx.postMessage(JSON.stringify({

  'url': url

  }))

---

webpack打包优化解决方案

1、根据插件查看包的大小和体检，进行针对性分析--方式一

安装：npm install webpack-bundle-analyzer --save-dev

配置：

vue.config.js

module.exports = {
     chainWebpack: config => {
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  }
}

package.json

{ 
     "scripts”: { 
          ... 
          "analyzer": "use_analyzer=true npm run serve” 
      }

2、CDN引入--方式二

• index.html cdn引入

vue.config.js

configureWebpack: config => {

 // devtool: 'source-map'

 // 优化，采用外部CDN

 config.externals = {

   'vue':'Vue',

   'element-ui':'ELEMENT',

   'echarts':'echarts'

 }

  },

3、Gzip压缩--方式三

1、安装依赖：npm install --save-dev compression-webpack-plugin

2、vue.config.js进行配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production'// 需要gzip压缩的文件后缀

const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {

  // devtool: 'source-map'

  if (isProduction) {
          config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    threshold: 10240,
    minRatio: 0.8
        })
     )
  }

}

---

H5调试工具、webview

  H5调试工具：

• vConsole安装：npm install vconsole

在mian.js文件里引入： import Vconsole from 'vconsole'

const vconsole = new Vconsole Vue.use(vconsole)

• eruda

参考网址：GitHub - liriliri/eruda: Console for mobile browsers

npm install eruda

在 main.js里引入：

• import erdua from 'eruda'
• import erudaDom from 'eruda-dom'

erdua.init()

Vue.prototype.$echarts = echarts

webview：

• 概念：其实webview就是用来展示的view组件，他是使用webkit引擎来进行展示，它具有前进后退放大缩小等功能，简单来说，webview就相当于在你的手机中安装一个高性能的webkit浏览器。

• webview的初始化浏览器：网络请求耗时->服务端处理->渲染耗时->完成webview:webview初始化->网络请求耗时->服务端处理->渲染耗时->完成