h5项目编写成app，你还不了解吗？直接打包和套webview结合uniapp两种实现方式

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4

• 4 页面获取webview实例 主动调取对应的H5方法

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

这样其实就算勉强完成app的功能了

搭建h5的页面

这里可以使用单页面应用 多页面应用 看大家自己选择 不过现在都是vue或者react直接写会比较快 操作方式都是一样的

h5页面引入 uni.webview.1.5.4.js

这一部分主要使得 h5页面可以和app产生桥梁 互相通信
这里有官方的一些链接 uni官方webview文档

下载 uni.webview.1.5.4.js 到你的h5入口文件

放入入口文件 index.html

这里用vue项目举例 其他的框架举一反三即可

• 1 将下载好的 js放入一个文件夹 我这里命名sdk 按照图中的引入方式进行对应的增添代码
• 2 去页面中执行对应的代码 如果你想监听是否引入成功 可以在h5项目 任意js逻辑部分 写下如下代码

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

不难看出 uni.postMessage 就是H5向uniapp底座发送的消息 uniapp通过handleMessage去接受 看上面app部分即可

• 3 注册函数给uniapp使用 uniapp可以通过实例直接调用 对应方法 如： wv.evalJS(‘goBack()’)
  我是在App,vue里注册的 便于集中管理
  

其实这样 一个简单的H5和uniapp就可以结合在一起 进行组合开发了

优化

解决物理返回键和H5页面的路由跳转问题

不难看出 我们只是在uniapp配置的入口页面引入了 H5页面来进行业务类型开发
那么H5页面本身是有路由页面切换的 但是如果采用手机本身的物理返回键 直接会退出整个应用

那么 如何去规避这个问题？让返回键也跟随H5的页面栈返回呢？

• 1 首先 uniapp的页面是有 onBackPress 这个钩子函数 正好来捕捉物理返回键的调用 和其他一切触发返回的操作
  当它 return true 返回的操作将会失效

• 2 我们可以在 uniapp的页面的data中定义一个是否 变量isExit 来判断是否调用真实返回退出的操作 如果是H5页面非首页内的切换后退 不会触发uniapp的返回退出操作
  

• H5页面去做相关判断 如果是跳转其他页面和首页给uniapp底座发送不同消息 让app判断 isExit 具体为true还是false

webview缓存解决方案

其实webview在使用线上的链接时 是会存在缓存的 解决方案 很简单给链接拼接一个时间戳或者随机数的方式 实现每次访问不同的链接 清理缓存
但是缓存有时候又是很必要的 这就需要去考虑是否需要每时每刻刷新了
我是将他存入缓存 需要更新时去除这个缓存 重新进应用就会再次获取一个随机数 去清除缓存的

• 1
• 2
• 3
• 4
• 5
• 6
• 7