一、index.html中引入微信官方分享js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
二、在src下的assets/js文件夾下新建wx.jsapi.js文件，把分享做成公用方法
使用axios來(lái)發(fā)送請(qǐng)求，參照 //www.survivalescaperooms.com/article/141008.htm 配置vue-cli項(xiàng)目的axios
代碼：
import axios from 'axios'export default { wxShowMenu : function() { axios.post('http://test.youxue.pxjy.com/wxtest').then(function(res){ var getMsg = res.data.data; wx.config({ debug: false, //生產(chǎn)環(huán)境需要關(guān)閉debug模式 appId: getMsg.appId, //appId通過(guò)微信服務(wù)號(hào)后臺(tái)查看 timestamp: getMsg.timestamp, //生成簽名的時(shí)間戳 nonceStr: getMsg.noncestr, //生成簽名的隨機(jī)字符串 signature: getMsg.signature, //簽名 jsApiList: [ //需要調(diào)用的JS接口列表 'onMenuShareTimeline', //分享給好友 'onMenuShareAppMessage', //分享到朋友圈 'showMenuItems', 'hideMenuItems' ] }); wx.ready(function() { wx.checkJsApi({ jsApiList: ["showMenuItems"], success: function(res) { wx.showMenuItems({ menuList: [ 'menuItem:share:appMessage', //發(fā)送給朋友 'menuItem:share:timeline' //分享到朋友圈 ] }); } }); //分享到朋友圈 wx.onMenuShareTimeline({ title: "分享描述", // 分享標(biāo)題 desc: "分享描述", //分享描述 link: getMsg.shareLink,// 分享鏈接 imgUrl: getMsg.imgUrl // 分享圖標(biāo) }); //分享給朋友 wx.onMenuShareAppMessage({ title: "分享描述", // 分享標(biāo)題 desc: "分享描述", // 分享描述 link: getMsg.shareLink, // 分享鏈接 imgUrl: getMsg.imgUrl // 分享圖標(biāo) }); }); }) }}其中分享鏈接和圖片地址要用絕對(duì)地址，圖片用方形，大小至少200*200px以上
6月份新版微信客戶(hù)端發(fā)布后，用戶(hù)從微信內(nèi)的網(wǎng)頁(yè)分享消息給微信好友，以及分享到朋友圈，開(kāi)發(fā)者將無(wú)法獲知用戶(hù)是否分享完成。所以不再寫(xiě)成功和失敗的回調(diào)方法。查看具體公告
三、main.js中引入并掛在vue的原型上
代碼：
import WXConfig from './assets/js/wx.jsapi' // 微信分享Vue.prototype.WXConfig = WXConfig;
四、使用
代碼：
this.WXConfig.wxShowMenu();
總結(jié)
以上所述是小編給大家介紹的vue-cli構(gòu)建項(xiàng)目下使用微信分享功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
