微信、支付宝、头条(抖音)小程序 web-view H5页面跳转到小程序内

一、引入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);