微信公众号h5跳转小程序
文章 80 0 0 0
发布时间:2022年04月07日

概述

微信环境下调用微信开放标签跳转到指定的小程序,完成小程序与微信公众号h5的交互,也是网页向app环境的跳转。

1.安装

1.安装sdk包

npm install weixin-js-sdk

2.引入sdkjs

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.config注入

注意:调用config的时候需要后台提供接口用当前的域名去请求微信的加密参数,才能使用开发标签。

import wx from 'weixin-js-sdk';
wx.config({
    debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: appId, // 必填,公众号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature, // 必填,签名,见附录1
    jsApiList: [
        'wx-open-launch-weapp', // 跳转小程序时必填
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'showOptionMenu',
        "showMenuItems",
        "showAllNonBaseMenuItem",
        "hideAllNonBaseMenuItem"
    ], //所有JS接口列表见附录2
    openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
});
wx.ready(() => {
}, 500);
wx.error(function(res) {
    console.log('config err: ', res);
});

3.页面引入

<wx-open-launch-weapp
    id="launch-btn"
    username="gh_xxxxxxxx"
    path="pages/home/index?user=123&action=abc"
>
    <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
    </script>
</wx-open-launch-weapp>

<script>
    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>

微信公众号开放标签

如果你在uniapp中使用,也只能使用微信提供的标签,但是样式一方面又带来了巨大的困扰,微信的写法uniapp编译的时候不识别,建议标签定位上去一个遮罩。

注:如果用uniapp去开发,在测试工具上没有效果的话,请使用真机测试,有的时候测试工具上可能展现的与真机不同。

评论专区