微信公众号平台微信分享&&微信h5跳转微信小程序---签名错误导致原因

最新推荐文章于 2024-04-29 18:41:36 发布

陶小橦

最新推荐文章于 2024-04-29 18:41:36 发布

阅读量1k

点赞数

分类专栏：笔记文章标签：微信分享前端h5 签名错误

本文链接：https://blog.csdn.net/weixin_43704691/article/details/117767729

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

微信分享实现

前端发送接口获取微信配置信息

api.getWxConfigParams({
  currentUrl: encodeURIComponent(window.location.href)
}).then(res => {
  if (res.code === 0) {
    const { appId, nonceStr, signature, timeStamp } = res.data
  //执行第二步
  } else {
    console.error(res.msg)
  }
})
// 注: 换取签名的地址一定是动态的,前端在传值给后台的时候记住要进行编码,一定不要传送带#(hash)的部分

前端根据接口返回的数据信息调用微信配置

  ···
  const data = {
      debug: false,
      appId,
      nonceStr,
      signature,
      timestamp: timeStamp,
      jsApiList: [...jsApiList] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    }

    wx.config(data)
    wx.ready(function () {
      wx.showOptionMenu && wx.showOptionMenu()
      success && success()
    })
    wx.error(function (res) {
      fail && fail()
    })
    // 注: 需要在配置后的功能需要配置在jsApiList里面,主要有以下几个常用功能
    'onMenuShareAppMessage', // 获取'分享给朋友'按钮状态&&自定义分享内容 --- 即将废弃
    'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（更新点击右上角分享时的信息）
    'updateTimelineShareData', // 朋友圈
    'chooseImage', // 拍照或从手机相册中选图
    'previewImage', // 预览图片
    'hideOptionMenu', // 隐藏
    'showOptionMenu', // 显示
    'uploadImage', // 上传图片
    'downloadImage', // 下载图片
    'getNetworkType', // 获取网络状态
    'chooseWXPay' // 微信支付

配置成功后调用微信分享api

// 分享当前页
    shareCurryPage ({ name = '', userId = '' }) {
      wxConfig.injectConfig(() => {
        console.warn('zhixinglllll========>', wx)
        wx.onMenuShareAppMessage({
          title: `我是${name}分享标题`, // 分享标题
          desc: '我是分享描述', // 分享描述
          link: `我是分享地址?${userId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: '我是分享图片', // 分享图标
          function (res) {
            // 设置成功
            console.warn(res)
          }
        })
      })
    },
    // 注: 在配置分享图片的时候需要检查一下地址是否正确,注意this的指向

微信h5跳转微信小程序-原文

1.新增wxconfig配置

...
const data = {
  debug: false,
  appId,
  nonceStr,
  signature,
  timestamp: timeStamp,
  jsApiList: [...jsApiList], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
  openTagList: ['wx-open-launch-weapp'] // 跳转小程序配置
}
...

// 微信的jsdk的版本必须在1.6.0及以上版本才能使用

2.使用代码

<wx-open-launch-weapp
  id="launch-btn"
  username="小程序原生id"
  path="跳转地址.html"
>
  <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>

// 注: 在微信环境打开才可以看到对应标签

签名失败

微信配置config打开debug是弹出签名失败提示
检查失败原因

注意点如下:
1. 注意配置文件中的各个值的命名方式,严格遵守大小写
2. 换取签名中间值的时候所使用的appid,timestamp,noncestr要保持一致
3. 上送的地址不能含有#,最好进行转码
4. 生成的签名可以根据开发文档上提供的地址进行检查
5. 如果以上问题都没有错误,请阅读开发文档的第一条要求,确定绑定域名方可使用
域名绑定步骤
- 登录公众号平台
- 进入公众号设置
- 设置好对应的安全域名地址
- 最后再次打开设置界面将验证文件下载下来上传到安全域名对应的服务器文件夹根目录下