uniapp 實現微信小程序全局分享的示例代碼
uniapp 實現微信小程序的全局轉發給好友/分享到朋友圈的功能。主要使用 Vue.js 的 全局混入 概念。
下面直接上 實現步驟和代碼:
創建全局分享內容文件
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: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, } }, //2.分享到朋友圈 onShareTimeline(res) { return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, } }, }
引入並全局註冊該文件
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: '頁面分享的標題', path: '/pages/my/my', imageUrl: '../../static/imgs/mylogo.png' } },
註:onShareAppMessage() 和 onShareTimeline() 方法是和 onLoad , methods 等方法同級的。
到此這篇關於uniapp 實現微信小程序全局分享的示例代碼的文章就介紹到這瞭,更多相關uniapp 小程序全局分享內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- uniapp開發小程序的開發規范總結
- 微信小程序轉換uniapp的遷移步驟以及遇到的問題總結
- uniapp Android解決 APP菜單、按鈕權限控制方法
- uniapp H5 https跨域請求實現
- uniapp中微信小程序與H5相互跳轉以及傳參詳解(webview)