阅读 378

踩坑记录之【H5跳转小程序】

最近做一个需求,从 H5 跳转小程序。微信虐我千百遍,我待微信如初恋。

踩完坑把实现做个记录

微信官方文档:developers.weixin.qq.com/doc/offiacc…

主要是通过微信开放标签 wx-open-launch-weapp 实现

开放对象:

  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

具体实现,以 react 为例

  1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

image.png

  1. 引入JS文件

在需要调用JS接口的页面引入如下JS文件:res.wx.qq.com/open/js/jwe… (支持https);如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:res2.wx.qq.com/open/js/jwe… (支持https)

本例在 <%document.ejs 文件中

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码
  1. 通过config接口注入权限验证配置并申请所需开放标签,通过ready接口处理成功验证,通过error接口处理失败验证

在 ComponentDidMount 中 code 如下

$.ajax({
        type: 'POST',
        data: {url: window.location.href},
        url: 'https://**.**.cn/api/backend-seller/wechat/open/sign',    //规定连同请求发送到服务器的数据;
        dataType: "json",
        success: function (data) {
            const config = {
                appId: "wx********", // 必填,公众号的唯一标识
                timestamp: data.data.timestamp, // 必填,生成签名的时间戳
                onceStr: data.data.nonceStr, // 必填,生成签名的随机字符串
                signature: data.data.signature, // 必填,签名
            }
            window.wx.config({
                ...config,
                jsApiList: ['chooseImage'], // 安卓上必填一个,随机即可
                openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
            })
            window.wx.ready(function () {
                var btn = document.getElementById('lottery-btn');
                 btn.addEventListener('success', function (e) {
                    console.log('success', e.detail);
                 });
                btn.addEventListener('error', function (e) {
                    console.log('fail', e.detail);
                });
            })
        },
    })
复制代码
  1. 在 JSX 中使用标签
<wx-open-launch-weapp
    id="lottery-btn"
    username="gh_******" // 必填,所需跳转的小程序原始ID,在(微信公众平台-设置-基本设置-账号信息)中查看
    path="pages/home/index?user=123&action=abc" // 非必填,所需跳转的小程序内页面路径及参数
>
    <script type="text/wxtag-template">
        <img style={{width:'48px',height:'66px',marginRight:'25px'}} src='https://onebillion-cloud-prod.oss-cn-shanghai.aliyuncs.com/1625897988309.png' alt='' />
    </script>
</wx-open-launch-weapp>
复制代码

注意点

  1. config 中的 appId 是公众号而非跳转小程序的 appId
  2. 一个页面可以同时存在多个跳转按钮,但是 config 要和标签 id 相应绑定
  3. wx-open-launch-weapp 插槽中模版的样式是和页面隔离的,标签样式无法解析 rem ,要用 px 表示尺寸
  4. 标签本身可以设置样式,因此对其设置 absolute,外部按正常方式写,只是样式多一个 relative 即可
  5. 内部高度无法使用百分比,需要传入真实高度,因此不适用不知道外部高度的场景
文章分类
前端
文章标签