微信js-sdk官方文档：
https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html
一、实现h5分享小卡片
想要实现的效果：
1.登录微信公众平台，进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2.通过npm引入js-sdk
npm install weixin-js-sdk -S
安装成功后，可以在package.json中找到"weixin-js-sdk"
3.在main.js中，将js-sdk挂载到全局
import {createApp} from 'vue'const app = createApp(App)app.config.globalProperties.$wx = jssdk
4.配置js-sdk
这里我新建了一个js文件，wechatSdk.js，用来专门操作js-sdk
import {getWechatConfig} from "@/services/common.js"; //为你提供timestamp、nonceStr、signature的后端接口const APPID = "xxxxxxxxxxxxxxxxxx"; //公众号的appId（注意不是小程序的appid，我太菜了，我就用错了）/*** 获取微信配置* @param {*} tag 调用页面的this* @param {*} share_title 分享标题* @param {*} share_desc 分享描述* @param {*} share_link 分享链接* @param {*} share_cover 分享封面（配图）* @returns */export const wechatConfig = (tag, share_title, share_desc, share_link, share_cover) => {var wx_host = window.location.href.split('#')[0]; //后端获取签名，需要前端传url，url要求看注解const cover = share_cover || '/a2a9a71b293f6664b342e0cefc6e1fccd5f921f83cfa5-RoYLU8_fw658/format/webp'; //不重要的默认图片地址return new Promise((resolve, reject) => {getWechatConfig(wx_host).then((res) => {if (res.code == 200) {const config = {debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: APPID, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.noncestr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表，注意查看官方文档，部分js接口即将废弃，我这里用的是新的openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表（当前标签用于跳转微信小程序）};tag.$wx.config(config); //通过config接口注入权限验证配置tag.$wx.ready(function () {//通过ready接口处理成功验证console.log("js-sdk配置成功！");//分享给朋友tag.$wx.updateAppMessageShareData({title: share_title || "默认标题", // 分享标题desc: share_desc || "默认描述", // 分享描述link: `${wx_host}#/${share_link}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: cover, // 分享后显示的封面图success: function () {console.info("分享给朋友");}, // 设置成功回调});//分享到朋友圈tag.$wx.updateTimelineShareData({title: share_title || "默认标题", // 分享标题link: `${wx_host}#/${share_link}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: cover, // 分享图标success: function () {// 用户点击了分享后执行的回调函数console.info("分享到朋友圈");}})return resolve(true)});tag.$wx.error(function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。console.info("config信息验证失败");console.info(res);return reject(false)});}});})}
注解:
5.在需要使用sdk的vue页面，引入wechatSdk.js
import {wechatConfig } from "@/utils/wechatSdk.js";wechatConfig(this,"分享标题","分享描述","分享链接","分享封面（配图）").then((res) => {//需要获取方法执行结果，可以加.then这一段；//不需要可以不加});
debug开启true时，会弹窗、在控制台输出信息，提示你config结果，你可以通过官方提供的《附录5-常见错误及解决方法》快速定位并解决自己可能遇到的问题，直到弹窗提示ok。
https://developers./doc/offiaccount/OA_Web_Apps/JS-SDK.html#66
调试成功后，你可能会发现，点击对话框中的链接进入网页，点击发送给朋友，分享出去的还是链接，不是小卡片。（我也不知道为什么）你可以长按链接，收藏它，然后从微信我的收藏中找到链接，点击进入网页，选择发送给朋友，这时分享出去的，就是小卡片了。
二、跳转微信小程序
从h5跳转微信小程序，需要区分两种场景：
（1）通过微信内的浏览器打开h5，然后跳转微信小程序；（点击微信对话框中，别人分享给你的链接；点击朋友圈中，别人分享的链接）
（2）通过微信外的浏览器打开h5，然后跳转微信小程序；（在百度浏览器等，微信以外的软件，输入网页地址访问）
此处实现的是第一种，微信内跳转小程序，微信同样也提供了文档。
https://developers./doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
注意：h5跳转小程序，必须用户点击标签按钮，才能跳转，也就是说，需要用户主动触发。
1.跳转微信小程序的前提，是jssdk配置成功，且基于上面wx.config的配置，一定要有
openTagList: ["wx-open-launch-weapp"]
2.将官方文档提供的示例，插入到你需要跳转小程序的地方，作为跳转入口。（跳转小程序的页面一定引入过wechatSdk.js，并调用 wechatConfig 配置成功）
<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx" //所需跳转的小程序原始idpath="pages/home/index?user=123&action=abc" //所需跳转的小程序内页面路径及参数env-version="trial" //所需跳转的小程序版本，合法值为：正式版release、开发版develop、体验版trial><script type="text/wxtag-template"><style>.btn {padding: 12px }</style><button class="btn">打开小程序</button></script></wx-open-launch-weapp>
小程序的原始id，在微信公众平台的设置-基本设置的最下面，帐号信息-原始ID中，以gh_开头。
插入后，vue3项目会报错：
因为<script>在vue2中是可以直接写进template的，但在vue3中不行，所以需要使用<div v-is="'script'"></div>以替代<script>，<style>也不要了，换成内联样式，替换后的代码如下：
<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx" //所需跳转的小程序原始idpath="pages/home/index?user=123&action=abc" //所需跳转的小程序内页面路径及参数env-version="trial" //所需跳转的小程序版本，合法值为：正式版release、开发版develop、体验版trial><div v-is="'script'" type="text/wxtag-template"><button style="padding: 12px">打开小程序</button></div></wx-open-launch-weapp>
nice
