uni-app小程序分享功能實現(xiàn)方法舉例
1. 分享功能實現(xiàn)
通過onShareAppMessage(OBJECT) 將小程序到分享微信聊天，onShareTimeline()將小程序分享到朋友圈。
api中的參數(shù)配置參考文檔：https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage
分為全局引入、單頁面引兩種方式
全局引入只需要在小程序main.js中引入一次，可以復用，便于維護；
單頁面引入需要在每一個支持分享的頁面都單獨引入，重復代碼多，維護不方便。
單頁面逐個引入
onShareAppMessage: function() { // 分享到微信
// 更多參數(shù)配置，參考文檔
return {
title: '分享標題',
path: '/pages/index/index'
}
}
onShareTimeline() { // 分享到朋友圈
return {
title: '分享標題',
path: '/pages/index/index'
}
}
全局引入
新建mixin .js編寫分享邏輯。獲取當前路由時，微信支付寶有兼容性問題，需要進行適配
export const mixin = {
data () {
return {
share: {
// 轉發(fā)的標題
title: '我是默認標題',
// 轉發(fā)的路徑，默認是當前頁面，必須是以‘/'開頭的完整路徑，/pages/index/index
path: '',
//自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡圖片路徑，
//支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4
imageUrl: ''
}
}
},
// 分享到微信
onShareAppMessage: function () {
// 獲取加載的頁面
let pages = getCurrentPages(), view = pages[pages.length - 1]
//分享的頁面路徑
if(!this.share.path) {
// #ifdef MP-WEIXIN
this.share.path = `/${view.route}`
//#endif
//#ifdef MP-ALIPAY
this.share.path = view.$page.fullPath
//#endif
}
//轉發(fā)參數(shù)
return this.share
},
// 分享到朋友圈
onShareTimeline () {
// 獲取加載的頁面
let pages = getCurrentPages(), view = pages[pages.length - 1]
//分享的頁面路徑
if(!this.share.path) {
// #ifdef MP-WEIXIN
this.share.path = `/${view.route}`
//#endif
//#ifdef MP-ALIPAY
this.share.path = view.$page.fullPath
//#endif
}
//轉發(fā)參數(shù)
return this.share
},
}全局引入
// main.js
import {mixin} from './utils/mixin.js'
Vue.mixin(mixin)2. Vue中的Mixin知識了解
概念
提高vue組件的可復用功能；一個混入的對象可以包含組件任意選項，當組件使用混入對象時，所有混入對象的選項都將被“混合“近該組件本身的選項
mixin中的數(shù)據(jù)是不共享的，每個組件中的mixin實例都是獨立的
混入規(guī)則
鉤子函數(shù)
同名的生命周期函數(shù)會合并為一個數(shù)組，都將被調用，混入對象的生命周期函數(shù)會在組件自身的同名鉤子函數(shù)之前調用
// mixin.js
export const mixin = {
created() {
console.log("先執(zhí)行")
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
created() {
console.log("后執(zhí)行")
}
}
數(shù)據(jù)對象合并（data）
混入對象值為對象的同名對象會被替換，優(yōu)先執(zhí)行組件內的同名對象；也就是組件內的同名對象將mixin混入對象的同名對象進行覆蓋
// mixin.js
export const mixin = {
data() {
return {
msg: '會被覆蓋'
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
data() {
return {
msg: '最終結果'
}
}
}
普通方法合并
methods，components 和 directives 會被混合為同一個對象，兩個對象鍵名沖突時，取組件對象的鍵值對
// mixin.js
export const mixin = {
methods: {
fun1() {
console.log('可以在index.vue中通過 this.fun1()調用')
},
fun2() {
console.log('會被index.vue中的fun2覆蓋')
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
methods: {
fun2() {
console.log('fun2最終結果')
}
}
}
混入方式
局部混入：在需要的組件中單獨引入，只能在當前引用了的組件中使用
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin]
}全局混入：在main.js中引入，可以在組件中直接使用
import {mixin} from '@/mixin.js'
Vue.mixin(mixin)總結
到此這篇關于uni-app小程序分享功能實現(xiàn)方法的文章就介紹到這了,更多相關uni-app小程序分享內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序利用button控制條件標簽的變量問題，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-03-03
這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了html的DOM中Event對象onblur事件用法,實例分析了onblur事件的使用范圍與對應的javascript使用技巧,需要的朋友可以參考下2015-01-01
很多人會把微信小程序的登錄和授權搞混淆,下面這篇文章主要給大家介紹了如何通過大白話理解微信小程序授權登錄的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
JavaScript常見錯誤：“無法讀取未定義的屬性”的原因及解決方案
本文將深入探討“無法讀取未定義的屬性”這一常見JavaScript錯誤,分析其成因,提供詳細的解決方案和最佳實踐,幫助開發(fā)者有效地預防和修復此類問題,感興趣的小伙伴跟著小編一起來看看吧2024-12-12
這篇文章主要介紹了原生JS實現(xiàn)音樂播放器的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
本文淺析一下為什么Map（和WeakMap）在處理大量DOM節(jié)點時特別有用，文中的代碼示例介紹的非常詳細，感興趣的小伙伴可以借鑒閱讀2023-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)笑臉評分功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JS實現(xiàn)table表格內針對某列內容進行即時搜索篩選功能
這篇文章主要介紹了JS實現(xiàn)table表格內針對某列內容進行即時搜索篩選功能,涉及javascript針對HTML元素的遍歷、屬性動態(tài)修改相關操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS實現(xiàn)的通用表單驗證插件,可針對常見的日期、密碼、姓名等進行驗證并給出提示信息,非常具有實用價值,需要的朋友可以參考下2015-08-08