前端 H5 公众号网页 卡片式分享

微信公众号网页 H5 卡片式分享

一个微信H5 卡片式分享 使用uniapp、vue2、js

具体步骤查看微信官方文档

成功的演示

• 分享给朋友
• 分享朋友圈

  第一步 添加js接口安全域名

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

    第二步 添加后端访问白名单

    • 配置后端服务器白名单
    • 需要的参数appid、AppSecret

    • 第三步 后端生成密钥

      • 接收后端传输的签名密钥（密钥生成逻辑前往微信官方文档，密钥只能后端生成返回前端）

        第四步 获取密钥并配置相关信息

        • 前端引入微信官方JS-SDK(组件挂在完毕后的回调函数mounted()生命周期钩子 也可以标签直接引入网址)

              const script = document.createElement('script')  script.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'  document.head.appendChild(script);

          • 向后端发送请求获取生成的签名密钥

            //自定义封装的请求方式 （需按照自己的请求方式发送）uni.request({   url: 'getSignature',   method: "POST",   token: false,   data: {   url: location.href //把当前页面的URL地址发送给后端   },   success: (resp) => {   wx.config({   debug: false, // true 为测试版 可查看配置成功或失败的信息正式使用时需要改为false   appId: resp.data.shareData.appId, // 必填，公众号的唯一标识,需要注册公众号提供appid   timestamp: resp.data.shareData.timestamp, // 必填，生成签名的时间戳   nonceStr: resp.data.shareData.nonceStr, // 必填，生成签名的随机串   signature: resp.data.shareData.signature, // 必填，签名，见附录1   jsApiList: ['updateAppMessageShareData',   'updateTimelineShareData'   ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 updateAppMessageShareData   });   }   })

            • 调用微信官方JS-SDK提供的API

              //这个函数我是在请求完密钥的成功回调中进行调用的 wx.ready(() => {   // 分享到微信好友内容设置   wx.updateAppMessageShareData({   title: "", // 分享标题   desc: "", // 分享内容的摘要   link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致   imgUrl: "", // 分享图标   success: function() {                            //成功的回调   },   fail: function(reject) {                             //失败的回调   alert(JSON.stringify(reject))   }   })   // 分享到微信朋友圈的内容设置   wx.updateTimelineShareData({   title: "", // 分享标题   link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致   imgUrl: "", // 分享图标   success: function() {                           //成功的回调   },   fail: function(reject) {                           //失败的回调   alert(JSON.stringify(reject))   }   })   })

              完成 可以查看测试效果了