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

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

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

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: '分享標題',
    path: '/pages/index/index'
  }
}

onShareTimeline() { // 分享到朋友圈
  return {
    title: '分享標題',
    path: '/pages/index/index'
  }
}

全局引入

新建mixin .js編寫分享邏輯。獲取當前路由時，微信支付寶有兼容性問題，需要進行適配

export const mixin = {
  data () {
    return {
      share: {
        // 轉(zhuǎn)發(fā)的標題
        title: '我是默認標題',
        // 轉(zhuǎn)發(fā)的路徑，默認是當前頁面，必須是以‘/'開頭的完整路徑，/pages/index/index
        path: '',
        //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，
        //支持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
	}
    //轉(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ù)用功能；一個混入的對象可以包含組件任意選項，當組件使用混入對象時，所有混入對象的選項都將被“混合“近該組件本身的選項

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混入對象的同名對象進行覆蓋

// 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é)果')
		}
	}
}

混入方式

局部混入：在需要的組件中單獨引入，只能在當前引用了的組件中使用

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)文章

最新評論