zoukankan      html  css  js  c++  java
  • 微信公众号H5页面跳转微信小程序(微信开放标签wx-open-launch-weapp)

    最近接到一个需求,要求实现从微信公众号h5页面跳转到指定的小程序页面。就查到微信开放标签,但是使用起来真的是有点。。。。,分享下我的实现过程;

    补充一点:所要跳转的小程序必须要是正式版。

    步骤一:绑定域名

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

    步骤二:引入JS文件

    在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

    备注:支持使用 AMD/CMD 标准模块加载方法加载

    (我用框架是Vue,如果是类似的框架在index.html标签 引入即可)

    步骤三:获取签名及wx.config参数所需的参数

    以Vue框架为例,wx.config所需要的的参数有如下:

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [], // 必填,需要使用的JS接口列表
      openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
    });

    以上的除了jsApiList,openTagList,其他的内容都是由后端返回,调用接口直接使用就好。

    created() {
        http({
          method: 'POST',
          url: "xxxxxxx",// 请求接口的url
    data: { url:window.location.href.split(
    '#')[0] }, headers: { "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8" } }).then(res => { console.log(wx) wx.config ({ appId:res.data.appId, timestamp:res.data.timestamp, nonceStr: res.data.noncestr, signature:res.data.signature , jsApiList: ["onMenuShareTimeline"], openTagList: ['wx-open-launch-weapp'] }); // 通过ready接口处理成功验证 wx.ready(() => { var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); }); // 通过error接口处理失败验证 wx.error(function (res) { console.log(res) }); }).catch(err =>{ console.log(err); }); }

    想要使用微信开放标签的第一步是config得成功,不然后出现各种错误,

    步骤四:使用标签

    HTML代码如下:

    <wx-open-launch-weapp
            id="launch-btn"
            username="gh_xxxxx"
            path="pages/index/index.html"
          >
            <script type="text/wxtag-template">
              <div>
                <style>
                  .btn{
                    outline: none;
                     300px;
                    height: 45px;
                    border: 1px solid rgba(240, 131, 0, 1);
                  }
                </style>
                <button class="btn">立即跳转</button>
              </div>
            </script>
          </wx-open-launch-weapp>

    1.username:是所要跳转的小程序的原始Id,不是appId

    2.path:是所要跳转的小程序的页面,页面路径后面必须要加.html后缀。

    微信开放标签有最低的微信版本要求,以及最低的系统版本要求。

    如果开发过程中出现以下情况的,要确认一下,微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

  • 相关阅读:
    用 Java 通过串口发送手机短信(二)简单使用
    jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
    java的mysql连接池
    html5客户端本地存储之sessionStorage及storage事件
    flash chart(amCharts的破解)
    实现igoogle效果的两种方法比较
    “SQL Server (SQL2005) 服务因 126 (0x7E) 服务性错误而停止”的解决方法 
    一个超简单的方法验证文本框中内容的数据类型
    我的对联
    Ajax调用后类方法时报”对象未定义“错误解决方法
  • 原文地址:https://www.cnblogs.com/taxpolat/p/13646877.html
Copyright © 2011-2022 走看看