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

