|
使用场景：
将h5嵌入到小程序或者app中，然后再拉起另外一个小程序
使用方法(通过中转)：
1、app调用方法，让app提供跳转方法，将参数传给app，让app拉起小程序
2、小程序跳转方法，h5通过uni.postMassage{}+uni.navigateBack()传递消息，让小程序拉起另外一个小程序
具体实现：
app
判断使用手机
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
//android终端或者uc浏览器器
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
ios
window.webkit.messageHandlers.AppPushToMiniProgram.postMessage(str)
安卓
javascript:android.AppPushToMiniProgram(str)
小程序
H5（uniapp开发）
第一步：配置文件，此temlate.html里面放的是引入的jweixin-1.4.0.js和uni.webview.1.5.2.js
template.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.11111111</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
}
</script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<script type="text/javascript">
window.$uni = uni;
</script>
</body>
</html>
第二步：调用
mounted() {
this.$nextTick(() => {
// 初始化uni.webview
document.addEventListener('UniAppJSBridgeReady', function () {
let certificate = document.getElementById("certificate");
certificate.addEventListener("click", function(){
$uni.postMessage({
data: {
appId: 'wx9ecd59',
path:'/pages/mairegi',
extraData:{
code:'50'
},
envVersion:'trial'
}
});
$uni.navigateBack()
})
});
});
},
小程序端
<template>
<view>
<web-view :webview-styles="webviewStyles" src="http://192.168.21.51:8080" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
}
}
},
methods:{
handleMessage(res){
console.log(res)
}
}
}
</script>
<style>
</style>
以上操作在本地测试完全可以，但是，，，，，真机测试顿时懵逼。。。
以下是真机走通代码（真机里面如果将UniAppJSBridgeReady放在mounted里面执行会出问题。。）：
1、将上面template.html里面body的代码改成这个
<body>
<noscript>
<strong>Please enable JavaScript to continue.11111111</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
window.$uni = uni;
document.addEventListener('UniAppJSBridgeReady', function () {
let timer = setTimeout(() => {
let certificate = document.getElementById("certificate");
//绑定事件
certificate.addEventListener("click", window.tzcallFack)
clearTimeout(timer)
timer = null
},1000)
});
</script>
</body>
mounted里面只需要将逻辑处理事件全局注册
mounted() {
let _self = this;
window.tzcallFack = this.tzcallFack
},
tzcallFack(){
let _self = this;
window.$uni.postMessage({
data: {
appId: _self.$store.state.APPID,
path:_self.$store.state.PATH,
envVersion:_self.$store.state.ENVVEERSION
}
});
window.$uni.navigateBack()
},
解决了真机测试问题。。。。。。
以上方法只适合单个页面调用时，如果有多个页面调用，初始进来的时候是获取不到其他页面调用的元素的，因此，直接绑定函数调用。
代码如下：
<script type="text/javascript">
window.$uni = uni;
// 绑定需要添加的事件
window.createClickFun = function (idName, event, fnName){
document.getElementById(idName).addEventListener(event,window[fnName])
}
document.addEventListener('UniAppJSBridgeReady', function () {
});
</script>
mounted() {
let _self = this;
window.tzcallFack = this.tzcallFack
window.createClickFun('certificate','click','tzcallFack')
},
来源：https://www.cnblogs.com/xiaojianwei/p/16352698.html |
发表于 2022-6-9 10:42:00
