uni-app小程序分享功能實現(xiàn)方法舉例
1. 分享功能實現(xiàn)
通過onShareAppMessage(OBJECT) 將小程序到分享微信聊天,onShareTimeline()將小程序分享到朋友圈。
api中的參數(shù)配置參考文檔:https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage
分為全局引入、單頁面引兩種方式
全局引入只需要在小程序main.js中引入一次,可以復(fù)用,便于維護;
單頁面引入需要在每一個支持分享的頁面都單獨引入,重復(fù)代碼多,維護不方便。
單頁面逐個引入
onShareAppMessage: function() { // 分享到微信
// 更多參數(shù)配置,參考文檔
return {
title: '分享標(biāo)題',
path: '/pages/index/index'
}
}
onShareTimeline() { // 分享到朋友圈
return {
title: '分享標(biāo)題',
path: '/pages/index/index'
}
}
全局引入
新建mixin .js編寫分享邏輯。獲取當(dāng)前路由時,微信支付寶有兼容性問題,需要進(jìn)行適配
export const mixin = {
data () {
return {
share: {
// 轉(zhuǎn)發(fā)的標(biāo)題
title: '我是默認(rèn)標(biāo)題',
// 轉(zhuǎn)發(fā)的路徑,默認(rèn)是當(dāng)前頁面,必須是以‘/'開頭的完整路徑,/pages/index/index
path: '',
//自定義圖片路徑,可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑,
//支持PNG及JPG,不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長寬比是 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
}
//轉(zhuǎn)發(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
}
//轉(zhuǎn)發(fā)參數(shù)
return this.share
},
}全局引入
// main.js
import {mixin} from './utils/mixin.js'
Vue.mixin(mixin)2. Vue中的Mixin知識了解
概念
提高vue組件的可復(fù)用功能;一個混入的對象可以包含組件任意選項,當(dāng)組件使用混入對象時,所有混入對象的選項都將被“混合“近該組件本身的選項
mixin中的數(shù)據(jù)是不共享的,每個組件中的mixin實例都是獨立的
混入規(guī)則
鉤子函數(shù)
同名的生命周期函數(shù)會合并為一個數(shù)組,都將被調(diào)用,混入對象的生命周期函數(shù)會在組件自身的同名鉤子函數(shù)之前調(diào)用
// 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í)行組件內(nèi)的同名對象;也就是組件內(nèi)的同名對象將mixin混入對象的同名對象進(jìn)行覆蓋
// mixin.js
export const mixin = {
data() {
return {
msg: '會被覆蓋'
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
data() {
return {
msg: '最終結(jié)果'
}
}
}
普通方法合并
methods,components 和 directives 會被混合為同一個對象,兩個對象鍵名沖突時,取組件對象的鍵值對
// mixin.js
export const mixin = {
methods: {
fun1() {
console.log('可以在index.vue中通過 this.fun1()調(diào)用')
},
fun2() {
console.log('會被index.vue中的fun2覆蓋')
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
methods: {
fun2() {
console.log('fun2最終結(jié)果')
}
}
}
混入方式
局部混入:在需要的組件中單獨引入,只能在當(dāng)前引用了的組件中使用
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin]
}全局混入:在main.js中引入,可以在組件中直接使用
import {mixin} from '@/mixin.js'
Vue.mixin(mixin)總結(jié)
到此這篇關(guān)于uni-app小程序分享功能實現(xiàn)方法的文章就介紹到這了,更多相關(guān)uni-app小程序分享內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layer.open彈層查看縮略圖的原圖,自適應(yīng)大小的實例
今天小編就為大家分享一篇layer.open彈層查看縮略圖的原圖,自適應(yīng)大小的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js 獲取當(dāng)前web應(yīng)用的上下文路徑實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取當(dāng)前web應(yīng)用的上下文路徑實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析,本文總結(jié)的淺顯易懂,非常好的一篇技術(shù)文章,需要的朋友可以參考下2015-03-03
JavaScript之filter_動力節(jié)點Java學(xué)院整理
filter也是一個常用的操作,它用于把Array的某些元素過濾掉,然后返回剩下的元素。下面通過實例代碼給大家簡答介紹下javascript中的filter,需要的的朋友參考下吧2017-06-06
簡易版本JSON.stringify的實現(xiàn)及其六大特性詳解
最近做項目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10
TypeScript與JavaScript項目里引入MD5校驗和
這篇文章主要介紹了TypeScript與JavaScript項目里引入MD5校驗和,MD5校驗和可以用于驗證網(wǎng)絡(luò)文件傳輸?shù)耐暾砸约胺乐刮募蝗舜鄹?。下文我們就一起來學(xué)習(xí)TypeScript與JavaScript項目里引入MD5校驗和_MD5校驗,需要的朋友可以參考一下2022-02-02

