1. 程式人生 > >開發微信公眾號小技巧(全域性分享及單頁分享)

開發微信公眾號小技巧(全域性分享及單頁分享)

全域性分享

全域性分享: 在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了 分享的就是自己設定的了