欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uni-app小程序分享功能實(shí)現(xiàn)方法舉例

 更新時(shí)間：2023年07月20日 12:10:54   作者：天邊月_  
這篇文章主要給大家介紹了關(guān)于uni-app小程序分享功能實(shí)現(xiàn)方法的相關(guān)資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開(kāi)發(fā)者平臺(tái)上注冊(cè)賬號(hào),驗(yàn)證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下

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編寫(xiě)分享邏輯。獲取當(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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論