VueH5公众号分享到微信朋友圈或好友 |
您所在的位置：网站首页 › vue如何分享长视频到朋友圈 › VueH5公众号分享到微信朋友圈或好友 |
VueH5公众号分享到微信朋友圈或好友
|
场景需求：
一般分享场景是在当前页面分享当前页面，但是业务需求是，在当前页面分享好几个其他页面的链接到朋友圈和好友。
其次在微信公众号页也不支持自定义的按钮来唤起分享好友的列表。 因此只能提示用户自己去点右上方三个点来唤起！！！ 解决方法：在点击分享后，弹出指示图片遮罩，暗地跳转到新的页面。 前期准备： 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`); }, } |
【本文地址】
今日新闻 |
推荐新闻 |