圖片轉換。鏈接轉換
圖片
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);
},
做的時候會遇到很多坑。遇到的地方,看下微信官方文檔報錯解決的辦法,這個是自己做的時候,單頁面運用可以,如果需要路由跳轉請看另外一篇