一、在開發(fā)微信小程序的時(shí)候，發(fā)現(xiàn)【發(fā)送給朋友】、【分享到朋友圈】、【復(fù)制鏈接】功能，灰色不可用。
很常見的功能，但是這幾個(gè)功能，并不是你項(xiàng)目建起來了就有的。
1.【發(fā)送給朋友】使用 onShareAppMessage 這個(gè)方法
如果你的小程序，發(fā)現(xiàn)他的【轉(zhuǎn)發(fā)給朋友】的按鈕時(shí)灰色的，不能點(diǎn)擊，那么說明這個(gè)小程序沒有寫這部分的代碼。
2.【分享到朋友圈】使用 onShareTimeline 方法
onShareAppMessage和onShareTimeline方法有一個(gè)坑，就是每個(gè)頁面都得單獨(dú)寫一份。
3.【復(fù)制鏈接】注意這個(gè)功能不需要開發(fā)者手動(dòng)寫方法，如果【轉(zhuǎn)發(fā)給朋友】這個(gè)功能灰色不可用，【復(fù)制鏈接】也會(huì)不可用?？傊胍獜?fù)制鏈接，就先開通【轉(zhuǎn)發(fā)給朋友】吧。
開發(fā)過小程序的朋友們應(yīng)該都遇到這樣的情況，可能很多個(gè)頁面有相同的函數(shù)，例如onShareAppMessage，有什么最佳實(shí)踐嗎，應(yīng)該如何處理呢？
二、uniapp實(shí)現(xiàn)微信小程序全局【發(fā)送給朋友】、【分享到朋友圈】、【復(fù)制鏈接】
主要使用 Vue.js 的 全局混入
1.創(chuàng)建一個(gè)全局分享的js文件。示例文件路徑為：./utils/share.js ，在該文件中定義全局分享的內(nèi)容：
export default {
data() {
return {}
},
//1.發(fā)送給朋友
onShareAppMessage() {},
//2.分享到朋友圈
onShareTimeline() {},
}
2.在項(xiàng)目的 main.js 文件中引入該 share.js 文件并使用 Vue.mixin() 方法將之全局混入：
// 導(dǎo)入并掛載全局的分享方法
import share from './utils/share.js'
Vue.mixin(share)
3.如果在特定頁面需要自定義分享內(nèi)容，也仍舊可以使用頁面的 onShareAppMessage() 和 onShareTimeline() 方法自定義分享的內(nèi)容，全局的分享會(huì)被頁面定義的分享內(nèi)容覆蓋。
注：onShareAppMessage() 和 onShareTimeline() 方法是和 onLoad , methods 等方法同級(jí)的。
三、效果展示
這樣，【發(fā)送給朋友】、【分享到朋友圈】、【復(fù)制鏈接】這3個(gè)功能就可以正常使用了。
四、Vue中的mixin
mixin（混入），提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。
本質(zhì)其實(shí)就是一個(gè)js對(duì)象，它可以包含我們組件中任意功能選項(xiàng)，如data、components、methods、created、computed等等
我們只要將共用的功能以對(duì)象的方式傳入 mixins選項(xiàng)中，當(dāng)組件使用 mixins對(duì)象時(shí)所有mixins對(duì)象的選項(xiàng)都將被混入該組件本身的選項(xiàng)中來。
1、局部混入
組件頁面
<template>
<div>
{{ a }}
</div>
</template>
<script>
export default {
mixins: [
{
data() {
return {
a: 1
}
},
created() {
console.log("全局混入")
}
},
],
data() {
return {
a: 2,
};
},
};
</script>
2、全局混入
使用全局混入需要特別注意，因?yàn)樗鼤?huì)影響到每一個(gè)組件實(shí)例（包括第三方組件）
main.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.mixin({
data() {
return {
a: 1
};
},
created() {
console.log("全局混入")
}
});
new Vue({
render: (h) => h(App)
}).$mount("#app");
當(dāng)組件存在與mixin對(duì)象相同的選項(xiàng)的時(shí)候，進(jìn)行遞歸合并的時(shí)候組件的選項(xiàng)會(huì)覆蓋mixin的選項(xiàng)文章來源：http://www.zghlxwxcb.cn/news/detail-798363.html
但是如果相同選項(xiàng)為生命周期鉤子的時(shí)候，會(huì)合并成一個(gè)數(shù)組，先執(zhí)行mixin的鉤子，再執(zhí)行組件的鉤子。文章來源地址http://www.zghlxwxcb.cn/news/detail-798363.html
到了這里，關(guān)于uniapp開發(fā)中基于vue的混入(mixin) 實(shí)現(xiàn)微信小程序全局【發(fā)送給朋友】、【分享到朋友圈】、【復(fù)制鏈接】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
