一、引入JSSDK。
为什么把这个放第一条,因为我敲代码的时候把它忘了。 在HTML文件的head里引入小程序的JSSDK。
微信小程序:res.wx.qq.com/open/js/jwe…
支付宝小程序:https://appx/web-view.min.js
头条小程序:s3.pstatp.com/toutiao/tma…
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"></script>
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
二、首先先获取每个小程序内置浏览器的userAgent。
首先,在需要跳转的H5页面内写下如下代码
<input type="button" value="获取UserAgent" onclick="userAgent()" /><br />
<script type="text/javascript">
function userAgent() {
alert(navigator.userAgent)
}
</script>
然后运行该html文件,复制浏览器上的本地链接
在小程序内的wxml || axml || ttml中写如web-view
<web-view src="http://127.0.0.1:8848/H5/test.html"></web-view>
然后点击页面上的按钮就能弹出小程序内置浏览器的userAgent了。
微信:
支付宝:
头条(抖音):
以此类推,如果有什么其他的小程序也都可以用此方法。
然后就是关键部分了:
三、通过userAgent判断不同的小程序。
var id = '123';
if (navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
wx.miniProgram.navigateTo({
url: "../jumpPage/jumpPage?id=" + id
})
}
})
} else if (navigator.userAgent.indexOf("AlipayClient") !== -1) {
my.navigateTo({
url: "../jumpPage/jumpPage?id=" + id
})
} else if (navigator.userAgent.toLowerCase().indexOf("toutiaomicroapp") !== -1) {
tt.miniProgram.navigateTo({
url: "/pages/jumpPage/jumpPage?id=" + id
//字节跳动的小程序文档讲:redirectTo、navigateTo 等页面跳转的 api 只支持 url 为 / 开始的绝对路径
})
} else {
alert('不在你的小程序里面');
}
四、最后的最后,把H5域名加入到 web-view 的 H5 域名白名单内,完毕。
五、补充:小程序跳转到H5传参通过url路由传参;获取方法如下:
function getData(key, Url) {
var str = Url;
str = str.substring(1, str.length);
var arr = str.split("?");
var obj = new Object();
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
}
var url = window.location.search;
var id = getData('id', url);