使用uni-app在實(shí)際項(xiàng)目中開(kāi)發(fā)微信小程序，經(jīng)常會(huì)遇到給項(xiàng)目添加分享給微信好友、朋友圈...功能，一般來(lái)說(shuō)要將某個(gè)頁(yè)面分享出去，就要在當(dāng)前頁(yè)面添加：
<template> <view></view> </template> <script> export default { data() { return {} }, onLoad() {}, methods: {}, // 分享給好友 onShareAppMessage(res) { console.log(res); if (res.from === 'button') { // 來(lái)自頁(yè)面內(nèi)分享按鈕 console.log(res.target) } return { title: 'title', //自定義分享標(biāo)題 path: 'path', // '/pages/...'分享頁(yè)面路徑（打開(kāi)分享時(shí)進(jìn)入頁(yè)），以/開(kāi)頭 imageUrl: '', //可設(shè)置默認(rèn)分享圖，不設(shè)置默認(rèn)截取頭部5:4 } }, // 分享朋友圈 onShareTimeline(res) { console.log(res); return { //同上 } } } </script> <style></style>
?且onShareAppMessage()與onShareTimeline() 與methods同級(jí)！?。?/strong>
官方網(wǎng)址：uniapp.dcloud.io/api/plugins…
這樣做雖然實(shí)現(xiàn)了分享功能，但是要在每一個(gè)頁(yè)面都添加以上代碼，重復(fù)代碼不說(shuō)，還特別容易搞混，一不小心就漏掉參數(shù)忘記修改。
全局分享實(shí)現(xiàn)
為了減少代碼量與重復(fù)性，可設(shè)置全局分享代碼：
在當(dāng)前項(xiàng)目下創(chuàng)建utils文件夾, 在utils 文件夾中新建share.js文件：
share.js代碼：
export default { data() { return { //設(shè)置默認(rèn)的分享參數(shù) //如果頁(yè)面不設(shè)置share，就觸發(fā)這個(gè)默認(rèn)的分享 share: { title: '',//自定義標(biāo)題 path: `/pages/index/index`, //默認(rèn)跳轉(zhuǎn)首頁(yè) imageUrl: '', //可設(shè)置默認(rèn)分享圖，不設(shè)置默認(rèn)截取頭部5:4 } } }, onShareAppMessage(res) { //發(fā)送給朋友 let that = this // 動(dòng)態(tài)獲取當(dāng)前頁(yè)面棧 let pages = getCurrentPages(); //獲取所有頁(yè)面棧實(shí)例列表 let nowPage = pages[pages.length - 1]; //當(dāng)前頁(yè)頁(yè)面實(shí)例 // let prevPage = pages[pages.length - 2]; //上一頁(yè)頁(yè)面實(shí)例 that.share.path = `/${nowPage.route}` return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失敗', icon: 'none' }) } } }, onShareTimeline(res) { //分享到朋友圈 let that = this // 動(dòng)態(tài)獲取當(dāng)前頁(yè)面棧 let pages = getCurrentPages(); //獲取所有頁(yè)面棧實(shí)例列表 let nowPage = pages[pages.length - 1]; //當(dāng)前頁(yè)頁(yè)面實(shí)例 // let prevPage = pages[pages.length - 2]; //上一頁(yè)頁(yè)面實(shí)例 that.share.path = `/${nowPage.route}` return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失敗', icon: 'none' }) } } }, }
?然后在入口文件main.js引入
// 全局分享 // 小程序分享的封裝 import share from "./utils/share.js" Vue.mixin(share)
?然后就可以了?。?！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-509589.html
Vue.mixin()使用方法：混入 — Vue.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-509589.html
到了這里，關(guān)于uni-app 微信小程序全局配置分享好友、朋友圈...的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
