使用場景:
將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>