vue h5项目在微信内置浏览器实现自定义分享微信好友、朋友圈功能
一个描述:所有的 h5 页面在微信内置浏览器内,前端未做任何配置下,点击右上角三点,默认是有分享功能的,如下图:因项目要将分享相关信息入库,所以需要自定义分享,即拼接分享页面路径+活动id+分享者id。当被分享者通过自定义分享路径进入到页面后,调用分享成功接口,将分享相关信息传到后台。注意:1、h5页面在微信内置浏览器中,页面路径里会自动拼接上code=AAA&state=STATE&am
一个描述:
所有的 h5 页面在微信内置浏览器内,前端未做任何配置下,点击右上角三点,默认是有分享功能的,如下图:
因项目要将分享相关信息入库,所以需要自定义分享,即拼接分享页面路径+活动id+分享者id。当被分享者通过自定义分享路径进入到页面后,调用分享成功接口,将分享相关信息传到后台。
注意:
1、h5页面在微信内置浏览器中,页面路径里会自动拼接上code=AAA&state=STATE&appid=BBB这样一串内容,并且页面路径中会有两个 ?号,所以获取当前页面路径后,拼接分享页面路径时要将多余的字符串去掉再拼接字段。同样通过分享进入被分享页面时,当前页面路径后面也是会有code=AAA&state=STATE&appid=BBB这些内容的。
2、当用户A分享页面给用户B后,若用户B是未注册的新户、或未登录的状态,会被拦截到授权登录页,用户需授权微信信息,获取 code,用 code 获取 unionId ,再用 unionId 获取个人信息,这一系列操作原分享页面路径后面的传参字段要特别注意,此处不详述。
实现过程:
1、下载插件: npm install --save weixin-js-sdk。
2、引入插件定义方法:在 src 文件夹下新建 wxsdk.js 文件,定义分享方法,代码如下:
import wx from 'weixin-js-sdk'
import axios from 'axios'
import { devBaseURL, proBaseURL } from './config'
const proEnv = process.env.NODE_ENV;
let baseUrl;
if (proEnv == 'development') {
baseUrl = devBaseURL
} else if (proEnv == 'production') {
baseUrl = proBaseURL
}
axios.defaults.baseURL = baseUrl
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister(callback) {
let data = {
url: window.location.href
};
axios.post('/admin/user/XXX', // 后台提供接口,获取 wx.config 对象内所需字段
data,
{
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Authorization': `Bearer ${localStorage.getItem("token")}`
}
}
).then((res) => {
wx.config({
debug: false, // 开启调试模式
appId: data.data.appid, // 必填,公众号的唯一标识
timestamp: data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.data.nonceStr, // 必填,生成签名的随机串
signature: data.data.signature, // 必填,签名
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
]// 必填,需要使用的JS接口列表
});
}).catch((e) => {
console.log(e);
});
wx.ready((res) => {
// 如果需要定制ready回调方法
if (callback) {
callback();
};
});
},
ShareTimeline(option) {
wx.onMenuShareTimeline({
title: option.title, // 分享标题
link: option.link, // 分享链接
imgUrl: option.imgUrl || '', // 分享图标
success() {
option.success();
},
cancel() {
option.cancel();
},
error() {
option.error();
}
})
},
ShareAppMessage(option) {
wx.onMenuShareAppMessage({
title: option.title, // 分享标题
desc: option.desc, // 分享描述
link: option.link, // 分享链接
imgUrl: option.imgUrl || '', // 分享图标
success() {
option.success();
},
cancel() {
option.cancel();
},
error() {
option.error();
}
})
}
}
export default wxApi
// 分享页面在 mounted 中执行注册方法:
mounted() {
this.$nextTick(() => {
if (this.token) {
wxapi.wxRegister(this.wxRegCallback);
}
});
},
// 在 methods 中定义如下方法:
wxRegCallback() {
// 用于微信JS-SDK回调
this.wxShareTimeline();
this.wxShareAppMessage();
},
wxShareTimeline() {
// 微信自定义分享到朋友圈
let option = {
title: this.bannerTitle, // 自定义分享标题
link: this.sharePath, // 自定义分享路径
imgUrl: "",
success: () => {
// this.$toast("分享成功");
},
cancel: function () {
this.$toast("已取消分享");
},
error: () => {
this.$toast("分享失败");
},
};
// 将配置注入通用方法
wxapi.ShareTimeline(option);
},
wxShareAppMessage() {
// 微信自定义分享给朋友
let option = {
title: this.bannerTitle,
link: this.sharePath,
imgUrl: "",
success: () => {
// this.$toast("分享成功");
},
cancel: function () {
this.$toast("已取消分享");
},
error: () => {
this.$toast("分享失败");
},
};
// 将配置注入通用方法
console.log(option, "分享链接");
wxapi.ShareAppMessage(option);
},
// 获取当前分享页面路径方法:
getCurrentShareUrl() {
let url = window.location.href;
if (this.isWeixinEnv) { // 判断是微信环境打开的 h5 页面
if (url.includes("code=")) { // 判断页面路径中包含 code 那一串信息,路径中有2个?
// 微信环境打开的 h5 页面,地址栏默认有 code 等参数
if (url.indexOf("?") != -1) { // 路径中拼接有字段
let first = url.indexOf("?") + 1; // 从第一个?算起(+1表示不包括该?)
let kong = url.substring(0, first - 1); // 截取第一个 ?前的内容,即部署后 h5 项目的首页
console.log(kong, "kong");
let second = kong + "#/activityDetail"; // 要分享的页面路径(未拼接字段)
console.log(second, "this.currentUrl");
this.currentUrl = second;
}
} else {
// 从公众号链接进去,此时路径中不包含 code 等字段,路径中只有1个?
if (url.indexOf("?") != -1) {
let first = url.indexOf("?") + 1; // 从?算起(+1表示不包括该?)
this.currentUrl = url.substring(0, first - 1);// 截取 ? 前的内容,即被分享页面(未拼接字段)
}
}
} else { // 非微信环境下打开 h5 页面时
this.currentUrl = url.substr(0, url.indexOf("?"));// 截取 ? 前的内容,即被分享页面(未拼接字段)
}
console.log(
window.location.href,
"<---当前页面初始url;;;当前页面去参数、code等值--->",
this.currentUrl
);
this.sharePath =
this.currentUrl +
"?userId=" +
localStorage.getItem("userId") +
"&activityId=" +
this.activityId;
console.log(this.sharePath, "当前页面分享路径sharePath");
},
// 被分享者进入页面后,获取参数
created() {
this.isWeixinEnv = isWeixin();
if (this.isWeixinEnv) {
let weixinParams = getWeixinRequestParams(); // 微信环境下获取路径拼接字段 (路径中有2个?)
this.activityId =
weixinParams["activityId"] || this.$route.query.activityId;
this.shareUserId =
weixinParams["userId"] || this.$route.query.userId || "";
console.log(
weixinParams,
this.activityId,
this.shareUserId,
"当前页面路径的params"
);
} else {
let params = getRequestParams(); // 非微信环境下获取路径拼接字段,utils文件中定义
this.activityId = params["activityId"] || this.$route.query.activityId;
this.shareUserId = params["userId"] || this.$route.query.userId || "";
console.log(
params,
this.activityId,
this.shareUserId,
"当前页面路径的params"
);
}
this.getCurrentShareUrl();
},
// utils文件:
export const getRequestParams = () => {
let url = location.href;
let requestParams = {};
if (url.indexOf("?") !== -1) {
let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
let strs = str.split("&"); //将字符串内容以&分隔为一个数组
for (let i = 0; i < strs.length; i++) {
requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
// 将数组元素中'='左边的内容作为对象的属性名,'='右边的内容作为对象对应属性的属性值
}
}
return requestParams;
}
export const getWeixinRequestParams = () => {
let url = location.href;
let requestParams = {};
if (url.indexOf("?") !== -1) {
let one; // 第二个?后内容
let first = url.indexOf("?") + 1; // 从第一个?算起(+1表示不包括该?)
let kong = url.indexOf(" ", first); // 第一个?后的第一个空格
let heng = url.indexOf("?", first); // 第一个?后的第一个?(即第二个?)
if (heng == -1) {
one = url.substring(kong).substring(1, url.length);
} else {
one = url.substring(heng).substring(1, url.length);
}
let strs = one.split("&"); //将字符串内容以&分隔为一个数组
for (let i = 0; i < strs.length; i++) {
requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
// 将数组元素中'='左边的内容作为对象的属性名,'='右边的内容作为对象对应属性的属性值
}
}
return requestParams;
}
// 判断是否是微信环境
export function isWeixin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
return true;
} else {
return false;
}
}
更多推荐
所有评论(0)