開發微信公眾號小技巧(全域性分享及單頁分享)
阿新 • • 發佈:2018-12-21
全域性分享
全域性分享: 在wx.ready中寫進分享,就不用一個頁面一個頁面寫了, 但是分享的各個引數都是固定的。
// config過程就不說了百度一大堆,就拿朋友圈舉例了,分享給朋友一樣 ...wx.config // 分享到朋友圈 wx.onMenuShareTimeline({ title: rbConst.rbTitle, // 分享標題 link: rbConst.rbWebUrl, // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: rbConst.rbLogoImg, // 分享圖示 success: () => { // 使用者確認分享後執行的回撥函式 }, cancel: () => { // 使用者取消分享後執行的回撥函式 } })
單頁分享
場景:
優惠券頁面 分享出去為優惠券頁面
當用戶點選優惠券頁面 再去分享會被全域性分享覆蓋
其實這個分享的問題是在於你頁面的分享先載入了, 俗稱(非同步)
偶爾wxjsdk中的分享執行在你的created之後
所以造成覆蓋了分享
PlanA
全域性分享就不要了, 給每個頁面都寫上分享
優點: 能解決上述覆蓋問題
缺點: 程式碼重複性較高(一些比較隱性的頁面分享的都是首頁)
PlanB
監聽wxjsdk的載入,在已經載入好時,呼叫單頁面的分享方法
優點: 不需要每個頁面呼叫分享
缺點: ~完美
開玩笑的, 也需要搭配vuex實現
// vuex安裝啥的就不管了, 在你wx.ready的頁面中寫在wx.ready裡
import store from '../store'
wx.ready(() => {
// 分享到朋友圈
wx.onMenuShareTimeline({
...
})
store.commit('setShareLockInner', true)
})
vuex 賦值就不說了一抓一大把
在你需要單獨呼叫分享的頁面中
/* 由於是推送頁面,在本頁面直接載入jssdk,可能會將原本的分享覆蓋其他頁的分享 */ import { mapActions, mapState } from 'vuex' import { wxShare } from 'tools/wxShare' export default { watch: { shareLock (val, oldVal) { // 監控分享控制鎖的狀態 if (val) { this.toShare() } } } methods: { toShare () { // 分享到朋友圈,朋友 wx.onMenuShareTimeline({ ... }) } }, created () { if (this.shareLock) this.toShare() } computed: { ...mapState({ shareLock: ({share}) => share.shareLock }) } }
這樣就ok了 分享的就是自己設定的了