app主要指的是在手机上运行的第三方应用程序～主要分为一下三类
通过navigator.userAgent判断当前页面的运行环境
在ios中：在ios中定义的方法若是想被嵌入的h5页面调用
wkWebView.configuration.userContentController.add(self, name: getAppInfo)
在js中
在js中使用固定语法进行调用window.webkit.messageHandlers.方法名.postMessage(传参数据)
window.webkit.messageHandlers.getAppInfo.postMessage()
在android中
在android中，需要暴露出一个全局变量xxxBridge，类似浏览器环境中的Window
// 获取webview的设置对象
WebSettings webSettings = mWebView.getSettings()
// 设置Android允许js脚本
webSettings.setJavaScriptEnabled(true)
// 暴露出JSBridge的对象到webView的全局环境
mWebView.addJavascriptInterface(getJSBridge(), 'JSBridge')
嵌入的web页面中就多了一个全局变量JSBridge，通过此全局变量可以调用android客户端的方法或属性啦。
在js中
在js中的调用是非常简单的，比如说在android中暴露的全局变量名为JSBridge，该变量上存在getAppInfo方法, 通过如下代码即可调用
Window.JSBridge.getAppInfo()
window.JSBridge.showShareIcon({
id: 1,
type: 1
})
我按照如上方式进行传参，客户端是接收不到的，客户端要求直接传两个参数，参数类型都为简单数据类型，如下：
window.JSBridge.showShareIcon(1，1)
这样就可以正常接收啦。
h5调用android的方法时传递的参数必须为
简单数据类型。
function info() {
if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
return 'iOS' // 手机iOs
} else if (navigator.userAgent.search(/android/i) >= 0) {
return 'Android' // 手机安卓
} else if (navigator.userAgent.search(/windows phone/i) >= 0) {
return 'WinPhone'
} else {
return 'PC'
}
}
const platform = info()
const params = {...}
if (platform === 'iOS' && window.webkit) {
// showShareIcon 为ios抛出的方法
window.webkit.messageHandlers.showShareIcon.postMessage(params)
} else if (platform === 'Android' && window.JSBridge) {
// JSBridge为Android抛出的全局对象
window.JSBridge.showShareIcon(JSON.stringify(params))
}else {
return false
}
若是客户端想调用web页面中的方法，需要我们先将方法暴露出去
tips: 有时客户端拿不到window， 因此需要做下兼容～
const pluginFun = (function(){
// 兼容全局对象
const _global = (function () {
return window || this
}())
const plugin = {
方法1(){},
方法2(){},
...
}
// 将和客户端约定的方法暴露给全局对象
for (const i in plugin) {
!('jsFunc' in _global) && (_global[i] = plugin[i])
}
}())
需求场景：web页面上有提现功能，此功能的逻辑是
在vue中可以使用$on进行事件监听，具体做法如下
created(){
vm.$on('drawal', data=>{
// 获取到客户端返回的信息data, 若是可以提现则调取提现接口，若是不可以提现则提示不可提现原因；
})
}
methods:{
isDrawal(){
if(isAndroid && window.JSBridge){
window.xxxJSBridge.isDrawal(url) // url是支付宝url
}
}
}
const pluginFun = (function(){
// 兼容全局对象
const _global = (function () {
return window || this
}())
function callbackme(data){
vm.$emit('drawal', data)
}
_global.drawal = callbackme
}())
vue项目中正常的页面跳转代码如下
this.$router.push(url)
当代码执行之后将在原来的浏览器窗口中打开该页面。
客户端嵌入的web页面在进行跳转时可能跳转到客户端页面也有可能跳转到其他h5页面。
此时引入了一个新的概念webView。
webView可以看作是本地应用程序内嵌的一个浏览器，它拥有渲染引擎，可以通过http/https请求加载内容，加载回来的代码就可以被执行和渲染。
当web页面嵌入客户端时，需要约定一个跳转协议，假设约定的协议名为bd-triger
// url为要跳转的h5页面的全路径
jumpPage(url){
location.href = 'bd-triger://web?url='+encodeURIComponent(url)
}
location.href='bd-triger://客户端提供的页面名'
那么问题来了—> 嵌入客户端的页面还能使用原本的方法($router.push)进行页面跳转吗？
答案是可以的！
若是使用$router.push等方法去进行页面跳转时，该页面会在当前webView(相当于是同一个浏览器)中打开。
若是使用h5与客户端预先约定的协议进行页面跳转时，则该页面会在新的webView(新的浏览器页面)中打开。
听起来好像是没有很大区别，但是问题的本质是在同一个webView打开的页面状态一致(以第一个页面为准)，如是否全屏，是否监听控制页面跳转等等....
一个完整的页面包含 状态栏+导航栏+内容部分。
页面全屏/非全屏展示
在客户端中分为一级页面和二级页面。在客户端中一般情况下存在几个tab页面，tab页面就是一级页面，由一级页面跳转进入二级页面。
一级页面(tab页面)默认为全屏展示，若是h5页面作为tab页面嵌入，那么就必须设置好状态栏的高度，否则样式就会混乱！
若是二级页面则可以和客户端约定一个路径参数来判断当前web页面是否需要全屏展示(能不用全屏就不用全屏)。
若是需要全屏展示，还有一个新的问题，那就是状态栏高度(设置padding防止页面与状态栏重叠)
举例说明：假设和客户端约定的是否全屏参数为need_full_screen，状态栏高度为height，那么
'bd-triger://web?url='+encodeURIComponent('http://xxx?need_full_screen=1&height=40')
'bd-triger://web?url='+encodeURIComponent('http://xxx')
跳转
在同一个webView打开的页面是否全屏 设置相同并且以第一个页面为准！
举例说明
this.$router.push('/web/pay')
location.href = 'bd-triger://web?url='+encodeURIComponent(`${location.origin}/web/pay`)
location.href = 'bd-triger://web?url='+encodeURIComponent(`${location.origin}/web/pay?need_full_screen=1`)
this.$router.push('/web/orderlist')
location.href = `bd-triger://web?url=${location.origin}/web/orderlist`
location.href = 'bd-triger://web?url='+encodeURIComponent(`${location.origin}/web/orderlist?need_full_screen=1`)
总结
当使用bd协议去打开页面时若是设置全屏(非全屏)，则在当前webview中再打开其他页面都是全屏(非全屏)直至再次使用bd协议在新的webView去打开页面。
和跳转相同，返回在vue中也存在自己的方法this.$router.back()
在同一个webView内进行页面跳转
this.$router.push(url)
当点击返回按钮时可以使用自己的返回方法
this.$router.back()
当打开一个新的webView进行跳转时，可以想成重新打开一个浏览器页面进行跳转(a标签设置target属性值为_blank)。
location.href = bd-triger+ '://web?url=' + encodeURIComponent(url)
但是此时点击返回按钮不能使用back方法了(因为现在打开的是一个全新的窗口栈，里面没有之前的跳转记录)。
在返回时也不能判断前面有没有已经打开的webView,因此自己的返回方法在混合开发中不能使用！
客户端获取的浏览栈记录是全的，只需要和客户端协商方法，当用户点击“返回”按钮时调用客户端方法即可。
// 假定约定方法名为back
window.xxxJSBridge.back()
用户可能通过 导航栏的返回按钮、左滑、手机下方的操作按钮返回到上一页面。
但是有时用户点击返回按钮，我们并不期望用户返回上一级而是期望挽留一下用户。
举例说明： 吸引用户到开通会员页面以99.9的价格开通会员，若是用户不想购买返回上一级，我希望在用户有“返回”这个动作时，给用户来一个挽留弹框，表示现在购买价格为89.9（以一个优惠的价格吸引用户购买）。
此时需要禁止返回操作功能并监听用户返回—>其实客户端可以监听用户退出页面的情况，无论用户以何种方式退出页面客户端都可以监听到并且可以禁止用户退出页面！
示例
在当前页面做挽留弹窗
[1] 在进入页面时调用客户端方法，禁止用户退出页面；
[2] 在进入页面时监听用户退出操作，并挽留
[3] 当挽留次数为0时，调用客户端方法取消用户禁止返回操作并返回
准备：注册监听并挂在到全局
import Vue from 'vue'
export default const wBus = new Vue()
Vue.prototype.wBus = wBus
暴露出去监听方法，方便客户端调用
function callback(data){
this.wBus.$emit('back', data)
}
当前页面
// [1][2]
created(){
// [1] start开始禁止返回
window.PlayLetJSBridge.start()
// [2] 监听用户返回操作
this.wBus.$on('back', () => {
this.onClickLeft()
})
}
onClickLeft () {
if(超过挽留次数){
// 结束禁止返回
window.PlayLetJSBridge.end()
// 返回
window.PlayLetJSBridge.back()
}else{
// 执行挽留逻辑
}
}
打开app内的login页面(客户端页面)
需求
在当前页面page1无论以何种返回方式进行返回，都跳转至挽留页面（/retention），当在挽留页面点击返回时再返回上一级页面。
实现
created(){
window.PlayLetJSBridge.start()
this.wBus.$on('back', () => {
this.onClickLeft()
})
}
onClickLeft () {
this.$router.replace('/retention') // 替换掉当前栈
}
// 返回方法
onBack(){
window.PlayLetJSBridge.back()
}
效果
进入page1，点击返回按钮进入挽留页面没有问题，但是在挽留页面点击返回按钮就会报错。
原因
在进入挽留页面时没有打开新的webView，在同一个webView中的状态相同！，也就是说在page1页面禁止用户返回之后，在挽留页面的状态也是禁止用户返回的！
修改
onClickLeft () {
window.PlayLetJSBridge.end()
this.$router.replace('/retention') // 替换掉当前栈
}
如果是使用$router.push方法进行跳转，那么返回没有任何问题。
但是若是使用约定协议进行跳转，那么相当于当前页面没有被关闭，当点击返回按钮时不会重新进行初始化(不会走beforeCreate,created,beforeMount, mounted)，当然重新跳转是没有问题的
web页面作为客户端的tab页，切换tab的时候并不会销毁页面，也就是说再次打开页面的时候并不会走created生命周期函数(等同于上面的返回页面)，导致数据不刷新(不是最新状态)。此时可以走回调函数解决问题
import Vue from 'vue'
export default const wBus = new Vue()
Vue.prototype.wBus = wBus
const fun = function(){
const _global = (function () {
return window || this
}())
const plugin = {
function callback(data){
this.wBus.$emit('refresh', data) // 哪里使用去哪里出发，此处统一封装
}
}
for (const i in plugin) {
!('jsFunc' in _global) && (_global[i] = plugin[i])
}
}()
vm.$on('refresh', (data)=>{
if(data === 'refresh'){
// 重新调去接口
}
})
下载地址是客户端给我们的(android与ios下载地址不同)，因此在下载之前需要先判断浏览器的所属环境
if(navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0){
// ios
location.href = 'xxx'
}else if(navigator.userAgent.search(/android/i) >= 0){
// Android
location.href='xxx.apk'
}else{
// 跳转到应用宝下载
}