场景需求：
一般分享场景是在当前页面分享当前页面，但是业务需求是，在当前页面分享好几个其他页面的链接到朋友圈和好友。
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 {
// 获取JSSDK
getJSSDK: 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`);
},
}
