微信H5网页跳转小程序，这一篇就够了！

发表时间：2021-1-11

发布人：葵宇科技

浏览次数：42

鉴于微信开放标签说明文档写的不是很清楚，大多数开发者看了以后表示：我从哪里来？要到哪里去？

所以鄙人记录下这篇文章，以便帮助到一些人。

废话不多说，上才艺！

<html>
<head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>小程序跳转测试</title>
</head>
<body style="text-aligin:center;">
<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html -->
    <template>
        <style>.btn { padding: 12px width:200px;height:50px;}</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>

<script src=http://www.wxapp-union.com/"/js/jquery-1.12.4.js"></script>
<script src=http://www.wxapp-union.com/"https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 -->

<script>
    
    $(function () {
    
        //=== 这里仅仅是获取 config 的参数以及签名=== start
        var url = location.href;
	var functions = "updateAppMessageShareData";
        $.get("https://xxx.com/wechat/jssdk/config", {"functions":functions}, function(response){
            if(response.status == 0) {
                var info = response.data;
                wx.config({
                    debug: false,
                    appId: info.appId,
                    timestamp: info.timestamp,
                    nonceStr: info.nonceStr,
                    signature: info.signature,
                    jsApiList: info.jsApiList,
                    openTagList: ['wx-open-launch-weapp']//这里直接添加，什么都不用管
                });
            }
        });
        //=== 获取 config 的参数以及签名=== end
        
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
    });
</script>
</body>
</html>
复制代码

开放对象：

1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

复制代码

客户端要求

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

注意：微信开发者工具暂时不支持！所以建议直接使用手机访问进行测试。
复制代码

其他说明

这个功能其实很简单，并没有想象中那么复杂。实质是在你能够做到自定义分享到朋友圈或朋友的基础上，config多了

openTagList: ['wx-open-launch-weapp']
复制代码

再者需要注意的是，path的页面url 必须带有 .html 带参数的话则参数跟在html的后面。

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html">
        
<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html?id=123">
复制代码