场景需求：
一般分享场景是在当前页面分享当前页面，但是业务需求是，在当前页面分享好几个其他页面的链接到朋友圈和好友。
PS：微信自带的分享面板是无法第三方唤起的，只能点三个点。
其次在微信公众号页也不支持自定义的按钮来唤起分享好友的列表。 因此只能提示用户自己去点右上方三个点来唤起！！！
解决方法：
在点击分享后，弹出指示图片遮罩，暗地跳转到新的页面。
前期准备：
1.绑定域名
先登录微信公众平台进入"公众号设置"—>"功能设置"里填写如下的JS接口安全域名 备注：登录后可在“开发者中心”查看对应的接口权限。
ps:可能还有公众号权限、ip白名单的配置。
2.安装weixin-js-sdk
npm i weixin-js-sdk 3.调用微信配置的文件，直接复制即可。
在utils下面新建wxShare.js
/* eslint-disable*/
import wx from "weixin-js-sdk"; //微信sdk依赖
const jsApiList = ["onMenuShareAppMessage", "onMenuShareTimeline"];
//要用到微信API
function getJSSDK(data, dataForWeixin) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: "wx8f663359de28f56c", // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: jsApiList, // 必填，需要使用的JS接口列表success: () => {alert("success");},});wx.ready(function () {wx.onMenuShareAppMessage({title: dataForWeixin.title,desc: dataForWeixin.desc,link: dataForWeixin.link,imgUrl: dataForWeixin.imgUrl,trigger: function trigger(res) {// alert(111);},success: function success(res) {// alert('已分享');},cancel: function cancel(res) {// alert('已取消');},fail: function fail(res) {// alert('进来了');},});// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口wx.onMenuShareTimeline({title: dataForWeixin.title,link: dataForWeixin.link,imgUrl: dataForWeixin.imgUrl,trigger: function trigger(res) {// alert(11);// alert('用户点击分享到朋友圈');},success: function success(res) {// alert('已分享');},cancel: function cancel(res) {//alert('已取消');},fail: function fail(res) {// alert(JSON.stringify(res));},});});wx.error((res) => {alert(stringify(res));console.log(JSON.stringify(res) + "微信验证失败");});
}
export default {// 获取JSSDKgetJSSDK: getJSSDK,
};
4. 后端接口返回wx.config所需的配置信息。
5.页面调用。
关键点：
1.调用接口时的url是当前页面的url。
2.在跳转到所要分享的页面时候，不能用router.push，为了兼容ios,需要使用window.location.replace。
3.分享的图标，放置在assets下面。但是配置需要放置网络地址。当项目打包完成后所有的图片都会在dist的img文件夹里面，所以可以直接在配置时写{{域名.com/img/图片名}}。
4.如果有二维码图片的话想长按识别二维码，不能放置为背景图片，只能放做img。
5.微信公众号的H5会自带缓存,所以需要去掉缓存。在dist文件加时间戳。
在Vue.config.js里面
const version = new Date().getTime();
const mode = process.env.NODE_ENV;
const isDev = mode === "development";
在mudule.export上面// CSS 相关选项css: {extract: {// 打包后css文件名称添加时间戳filename: isDev ? "[name].css" : `css/[name].${version}.css`,chunkFilename: isDev ? "[name].css" : `css/chunk.[id].${version}.css`,},loaderOptions: {css: {},postcss: {plugins: [require("postcss-px2rem")({remUnit: 37.5,}),],},},},configureWebpack: {output: {filename: isDev ? "[name].js" : `js/[name].[chunkhash:10].${version}.js`,chunkFilename: isDev? "[name].js": `js/[id].[chunkhash:10].${version}.js`,},},
import { shareWx } from "@/api/port";mounted() {this.toWxAgentShare();},methods: {//招募代理的分享到朋友圈toWxAgentShare() {let url = window.location.href.split("#")[0];shareWx({ url }).then((res) => {if (res.data.code == 200) {const { data } = res.data;let bankShare = {title: "自定义标题",desc: "自定义描述",link: `需要分享的链接?phone=${this.phone}&code=${this.code}`,imgUrl: "域名/img/Share.png", 分享的图片};wxShare.getJSSDK(data, bankShare);}});},toWxAgentShare() {window.location.replace(`${process.env.VUE_APP_H_URL}insure/bankShare`);},
}
