回复 刷新

暂无评论

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

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

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

废话不多说,上才艺!

<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="/js/jquery-1.12.4.js"></script>
<script src="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">
        
复制代码

最后

  • 65
  • 0
  • 0