前端 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))
                           }
                       })
                   })

完成 可以查看测试效果了