用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2020-7-17 00:51

鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去? 所以鄙人记录下这篇文章,以便帮助到一些人。 废话不多说,上才艺! html head meta charset="utf-8" meta name = ...

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

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

废话不多说,上才艺!

<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">
复制代码

最后

这是笔者第一次写东西,如有不足之处望海涵!

不清楚的地方可以在下方留言,笔者会尽可能的给予回复。

转载请著名出处。

鲜花
鲜花
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 华布斯 来自: 掘金