目錄

• 建立全域性分享內容檔案
• 引入並全域性註冊該檔案
• 自定義頁面分享內容

uniapp 實現微信小程式的全域性轉發給好友/分享到朋友圈的功能。主要使用 . 的 全域性混入 概念。

下面直接上 實現步驟和程式碼：http://www.cppcns.com

建立全域性分享內容檔案

1.建立一個全域性分享的 js 檔案。示例檔案路徑為：@/common/share.js ，在該檔案中定義全域性分享的內容：

export default {
	data() {
		return {
			// 預設的全域性分享內容
			share: {
				title: '全域性分享的標題',path: '/pages/home/home',// 全域性分享的路徑
				imageUrl: '../../static/imgs/fenxiang-img.png',// 全域性分享的圖片(可本地可網路)
			}
		}
	},// 定義全域性分享
	// 1.傳送給朋友
    onShareAppMessage(res) {
        return {
			title: http://www.cppcns.com
 
this.share.title,path: this.share.path,imageUrl: this.share.imageUrl,}
    },//2.分享到朋友圈
    onShareTimeline(res) {
        return {
			title: this.share.title,}

引入並全域性註冊該檔案

2.在專案的 main.js 檔案中引入該 share.js 檔案並使用Vue.mixin() 方法將之全域性混入：

// 匯入並掛載全域性的分享方法
import share from '@/common/share.js'
Vue.mixin(share)

下面來看一下全域性的分享效果：

自定義頁面分享內容

3.如果在特定頁面需要自定義分享內容，也仍舊可以使用頁面的onShareAppMessage() 和onShareTimeline() 方法自定義分享的內容，全域性的分享會被頁面定義的分享內容覆蓋。示例如下：

    onLoad() {},// 自定義此頁面的轉發給好友(已經有全域性的分享方法，此處會覆蓋全域性)
	onShareAppMessage(res) {
	    return {
	      title: '頁面分享的標題',path: '/pages/my/my',imageUrl: '../../static/imgs/mylogo.png'
	    }
	  },// 自定義頁面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '頁面分享的標題',imageUrl: '../../static/imgs/mylogo.png'
		}
	},

注：onShareAppMessage() 和onShareTimeline() 方法是和onLoad,methods 等方法同級的。

到此這篇關於uniapp 實現微信小程式全域性分享的示例程式碼的文章就介紹到這了,更多相關uniapp 小程式全域性分享內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！