H5页面的卡片分享

有时候需要把H5页面以卡片的形式分享到微信

image.png

• 下包 微信的包

npm i weixin-js-sdk

• 引入包

import wx from "weixin-js-sdk";

• methods里面

    async getwxConfig() {
      let wechaturl = window.location.href.split("#")[0];
         //vuex 里面 写好后台给的公众号接口
      const data = await this.$store.dispatch("user/getwxConfig", {
        url: wechaturl,
      });
      console.log(data);
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.data.appid, // 必填，公众号的唯一标识
        timestamp: Number(data.data.timestamp), // 必填，生成签名的时间戳
        nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
        signature: data.data.signature, // 必填，签名
        jsApiList: [
          "checkJsApi",
           "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "openEnterpriseChat",
          "openEnterpriseContact",
        ], // 必填，需要使用的JS接口列表
      });
      wx.ready(function () {
        //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: "人才链企业端注册",
          desc: "全球领先的区块链人才信用SaaS平台",
          link: wechaturl,
          imgUrl: "http://hrpublic.oss-cn-beijing.aliyuncs.com/hrchain.png",
          success: function () {
            // 设置成功
          },
        });
        wx.updateTimelineShareData({
          title: "人才链企业端注册", //分享标题
          desc: "全球领先的区块链人才信用SaaS平台", //分享描述
          link: wechaturl,
          imgUrl: "http://hrpublic.oss-cn-beijing.aliyuncs.com/hrchain.png", //分享卡片的logo
          success: function () {
            // 设置成功
          },
        });
      });
    },

• api.js

export function getwxConfig(params) {
  return request({
    url: '/wechat/nofilter/config',
    method: 'get',
    params
  })
}

• vuex

import {
  getwxConfig
} from '@/api.js'


const actions = {
  getwxConfig(_, data) {
    return new Promise((resolve, _) => {
      getwxConfig(data).then(res => {
        resolve(res)
      }).catch(_ => {
        resolve({ result: false, msg: '网络故障，请重试' })
      })
    })
  },
}