开发微信公众号小技巧(全局分享及单页分享)

全局分享

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

嗖嗖嗖~  对应文章