需求：微信公众号的H5页面，需要分享给朋友或朋友圈的链接是卡片形式，内容也要自己定义
解决方案：
一、公众号配置
1. 登录微信公众平台
2. 进入 “公众号设置” 的 “功能设置”， 填写 “JS接口安全域名”
3. 进入 “设置与开发” 的 “基本配置” ，填写 “IP白名单”
tip:域名不要加 http://
tip:公众号必须是经过认证且未过期的
tip:域名要是备过案的
tip:ip白名单内填写的是请求服务器的ip地址
二、下载依赖并引用
安装：npm install weixin-js-sdk
引用：import wx from "weixin-js-sdk"
weixin-js-sdk是微信提供的网页开发工具包
三、后台请求
前端先需要从后台获取一些配置参数，比如appId、timestamp、nonceStr、signature，这里需要后端支持
然后通过wx.config()配置配置权限
最后在wx.ready()中使用接口
话不多说，上代码
import wx from "weixin-js-sdk";// 微信提供的网页开发工具包import {gzhH5Server } from "@/api";//这个是我项目中的一个请求接口，export default {mounted(){let link = window.location.href.split("#")[0];// 获取当前的网址gzhH5Server({url: link})// 接口请求，获取appId等配置参数.then(res=>{// 为了省事，这里就去掉一些关于请求失败的逻辑半段，和不相干的代码let d = res.data;// 我的接口返回从参数格式，不必照抄wx.config({// 默认为false 为true的时候是调试模式，会打印出日志debug: false,appId: res.data.app_id,// 必填，appIdtimestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.noncestr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名// 必填，需要使用到的接口列表，凡是要用到接口都要填写jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] })wx.ready(function(){const link = link,// 分享链接title = '标题', // 分享标题desc = '描述',// 分享描述imgUrl = "";// 分享图标， 用网络图片// 分享给好友 wx.updateAppMessageShareData({title, // 分享标题desc, // 分享描述link, //分享链接imgUrl, // 分享图标success: function() {console.log('分享成功')}})// 分享到朋友圈wx.updateTimelineShareData({title, // 分享标题link, //分享链接imgUrl, // 分享图标success: function() {console.log('分享成功')}})})})}
微信开放平台 JS-SDK说明文档：https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html
