图片转换。链接转换
图片
1.首先npm i weixin-js-sdk
使用:
import wx from ‘weixin-js-sdk’
项目中运用
1.封装wxapi.js:多页面调用
import wx from 'weixin-js-sdk'
import Axios from 'axios'
let url = window.location.href.split('#')[0];
// let url = window.location.href;
console.log(url, 'url')
const wxApi = {
wxRegister(callback) {
// 这边的接口请换成你们自己的
let postData = {
url: url
}
Axios.get('/video/getweixinticket', {
params: {
...postData,
}
}).then((res) => {
let data = res.data.data;
wx.config({
debug: false, // 开启调试模式
appId: data.appid, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名,见附录1
jsApiList: [
'onMenuShareWeibo',
'updateAppMessageShareData',
'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
}).catch((error) => {
// console.log(error)
})
wx.ready((res) => {
// 如果需要定制ready回调方法
if (callback) {
callback();
}
})
wx.error(function (res) {
// console.log(res)
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
},
ShareTimeline(option) {
wx.updateTimelineShareData({ //分享到朋友圈”及“分享到QQ空间
title: option.title, // 分享标题
link: option.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: option.imgUrl, // 分享图标
success() {
// 用户成功分享后执行的回调函数
option.success()
},
cancel() {
// 用户取消分享后执行的回调函数
option.error()
}
})
},
ShareAppMessage(option) {
wx.updateAppMessageShareData({ //分享给朋友”及“分享到QQ”
title: option.title,
desc: option.desc,
link: option.link,
imgUrl: option.imgUrl,
success: function () {
option.success()
},
cancel: function () {
option.error()
}
})
},
ShareAppweibo(option){
wx.onMenuShareWeibo({
title: option.title,
desc: option.desc,
link: option.link,
imgUrl: option.imgUrl,
success: function () {
option.success()
},
cancel: function () {
option.error()
}
});
},
}
export default wxApi
2.在页面运用
import wxApi from “@/utils/wxapi.js”;
需要的地方调用
var _this = this;
wxApi.wxRegister(_this.wxRegCallback);
// 微信分享
wxRegCallback() {
// 用于微信JS-SDK回调
this.wxShareAppMessage();
this.ShareTimeline();
this.ShareAppweibo();
},
//微信分享给朋友”及“分享到QQ”
wxShareAppMessage() {
let option = {
title: this.ImitateDvo.title, // 分享标题
desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
imgUrl: this.ImitateDvo.videoPicUrl,
link:
window.location.href.split("#")[0] +
"?#" +
window.location.href.split("#")[1], // 分享链接接,
// imgUrl: this.content.figure, // 分享图标,需要绝对路径
success: () => {},
error: () => {}
};
wxApi.ShareAppMessage(option);
},
//微信分享到朋友圈”及“分享到QQ空间
ShareTimeline() {
let option = {
title: this.ImitateDvo.title, // 分享标题
desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
link:
window.location.href.split("#")[0] +
"?#" +
window.location.href.split("#")[1], // 分享链接接,
imgUrl: this.ImitateDvo.videoPicUrl, // 分享图标,需要绝对路径
success: () => {
alert(分享成功);
},
error: () => {}
};
wxApi.ShareTimeline(option);
},
//微信分享到微博
ShareAppweibo() {
let option = {
title: this.ImitateDvo.title, // 分享标题
desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
link:
window.location.href.split("#")[0] +
"?#" +
window.location.href.split("#")[1], // 分享链接接,
imgUrl: this.ImitateDvo.videoPicUrl, // 分享图标,需要绝对路径
success: () => {
alert(分享成功);
},
error: () => {}
};
wxApi.ShareAppweibo(option);
},
做的时候会遇到很多坑。遇到的地方,看下微信官方文档报错解决的办法,这个是自己做的时候,单页面运用可以,如果需要路由跳转请看另外一篇