** 刚来新公司,就丢给我个任务,说是APP分享出去的页面再次通过微信分享的话,标题都没了,相信很多朋友之后都会遇到这种问题,我就把自己写的分享一下。**
我们先来看看之前分享出去的是什么造型:
再来看看改变后的造型:
话不多说,直接用代码说话吧,由于本人主要是做前端的,我就把前端代码展示一下吧:
配置接口域名,设置ip白名单什么的我就不多说了吧,有什么疑问留言即可,直接见代码吧:
1.创建一个Js文件,用来配置你的微信分享
import axios from 'axios';
import qs from 'qs'
const GET_SHARE_CONFIG_URL =' xxxxxxxxxxxxxxxxxxxxxx ' ; //这里是后台给你的接口地址
let wxconfig = null;
//获取当前页面地址,这里有个坑,一定要截取#之前的,因为微信不识别#的
let location_href = window.location.href.split('#')[0]
let sharUrl = location_href;
// 初始化微信分享配置
async function initConfig() {
try {
wxconfig = (await axios.post(GET_SHARE_CONFIG_URL,qs.stringify({url:sharUrl}), //请求后台给你的接口,把刚才获取到的页面地址给他传过去
{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})).data.data;
wx.config({
debug: false, //开启调试模式位true后可以通过alert弹窗将公众号签名等结果反馈处理
appId: wxconfig.appId, //必填,公众号唯一标识
timestamp: wxconfig.timestamp, //必填,生成签名的时间戳
nonceStr: wxconfig.nonceStr, //必填,生成签名的随机串
signature: wxconfig.signature, //必填,签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] //分享给好友、朋友圈
});
} catch (e) {
console.error(e);
}
};
//
/**
* 设置微信分享
* @param opts
*/
export default {
share(opts) {
if (!wxconfig) {
initConfig();
}
// 默认配置
// opts.link = sharUrl;
wx.ready(function() {
//分享朋友圈
wx.onMenuShareTimeline({
title: opts.title,
link: window.location.href,
imgUrl: opts.imgUrl,
success: opts.success()
});
//分享好友
wx.onMenuShareAppMessage({
title: opts.title,
desc: opts.desc,
link: window.location.href,
imgUrl: opts.imgUrl,
success: opts.success()
});
});
}
}
上面就是配置微信分享的js代码了,直接复制改下路径即可
2.进入我们要分享的html页面
import wxshare from '@/api/wxshare' //引入我们刚才配置的js文件
export default {
data() {
return {
}
},
created() {
this.webshare();
},
methods: {
webshare() {
// 配置微信分享
wxshare.share({
title: '助力七夕土味情话,赢现金好礼!', //分享的主标题
desc: '点击助力,立得10元现金,乐享七夕5折礼券!', //分享的副标题
imgUrl: 'xxxxxxxxxxxxxxxxx', //分享的icon
success: function() {
console.log('已分享');
}
});
}
}
}
以上就是本人做的微信二次分享了,有什么疑问欢迎大家提问。