1. JSBridge 桥接器
- 实现native端和web端双向通信的一种机制
- 以JavaScript引擎或WebView容器为媒介
- 通过约定协议进行通信
2. JSBridge 实现原理
3. H5嵌入原生应用的调试工具
方法1:
https://github.com/liriliri/eruda
代码语言：javascript复制<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>方法2:
https://github.com/Tencent/vConsole
代码语言：javascript复制<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>4. vue混合开发，安卓返回键问题
1、路由跳转页面改写
在组件中，有需要跳转页面，并且不让用户返回的情况，例如：支付、登录、注销等。请做一下修改：
1、this.$router.push()全部改写为this.$router.replace()
2、<router-link to="/">全部改写为<router-link to="/" replace>
因为：this.$router.push会在window.histroy中保留浏览器的历史记录。
这样返回键会返回上一个路由，而this.$router.replace不会在history中保留。
2、子页面返回改写
以聊天界面为例：
1、消息列表页面
每条消息的点击事件使用this.$router.push()，点击进入详情页，这样保证histroy中记录着主页面的地址。
2、详情页面
左上角有个返回按钮，这个返回按钮的跳转事件千万不能用this.$router来跳转，否则会出现返回错乱。
而是使用this.router.back()或者this.router.go(-1)，这样既能成功返回上一页，也会清除掉上一条history记录。
如果需要带状态或者参数返回上一页，我目前的方法是将子页面写成弹窗形式，悬浮在最顶层页面。
5. 通过获取页面属性判断回退
解决单点登陆点击两次回退的问题 (window.location.href = url, 代码书写在单点登陆页面)
window.performance.navigation.type包含三个值：
0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
代码语言：javascript复制 window.addEventListener('pageshow', function (event) {
if(event.persisted || window.performance && window.performance.navigation.type == 2){
console.log('window.performance.navigation.type: ' window.performance.navigation.type)
}
})6. 判断场景
代码语言：javascript复制var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/); //ios终端
// chrome浏览器: Devices -> User Agent string 设置值如下，即为微信环境
Mozilla/5.0 (Linux; Android 9; VKY-AL00 Build/HUAWEIVKY-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/78.0.3904.62 XWEB/2692 MMWEBSDK/200401 Mobile Safari/537.36 MMWEBID/4057 MicroMessenger/7.0.14.1660(0x27000EC6) Process/toolsmp NetType/WIFI Language/zh_CN ABI/arm64 WeChat/arm327. 跳转外链
window.location.href = url 跳转，回退会直接退出应用；使用应用api方法打开新的页面，才可回退到上一个页面
8. h5 ios视频无法播放问题？
这不能播放的：
这是可以播放的：
由于服务器响应缺少：Accept-Ranges: bytes、Content-Range: bytes 10416-10416/37791952、Content-Length: 1 等响应头。
9. h5中ios手机后退页面显示空白,需要下拉才展示页面
代码语言：javascript复制// css
overflow-y: auto
-webkit-overflow-scrolling: touch
height 100%
// vue
updated() {
document.scrollingElement.scrollTop = 0
},
