WeChat Mini Program Custom Sharing Function Development Notes

1. To define the onShareAppMessage  method in the shared page , only when this event handler is defined, the upper right menu will display the "Forward" button

2. There are two ways to trigger onShareAppMessage, one is triggered by the button in the example below, and the other is forwarded by the menu in the upper right corner

3. onShareAppMessage is a synchronous method. If we want to customize complex forwarding logic, we need to implement it through its promise method. The usage method is as follows

4. If you use the promise method to define forwarding content, you also need to define other basic configuration items. If the parameter of promise exists, the result of its resolution shall prevail. If it does not resolve within three seconds, the sharing will use the default parameters

<button class="resetBtn mangeL-box" open-type="share" data-info='{
   
   {videoInfo}}'>
    <view class="icon-name">分享</view>
</button>

 

   onShareAppMessage({from,target}) {
        // 判断from类型来确定是按钮分享还是三个点分享
        if (from == 'button') {
            let video = target.dataset.info
            const promise = new Promise(resolve => {
                this.creatShare(video).then(res => {
                    resolve(res)
                })
            })
            
            return {
                title: '请欣赏我的课文朗读作品，点赞+评论。',
                path: `/pages/index/index`,
                imageUrl: xxx,
                promise
            }
        } else {
            return {
                title: '课文朗读，从未如此有趣。',
                path: `xxx`,
                imageUrl: 'http://xxx/v3/shareContent.png'
            }
        }
    }

  creatShare(video) {
        return new Promise((resolve, reject) => {
            // 我在这里是使用canvas绘图分享的，绘制代码已删除，主要是通过reslove（）抛出分享的配置项
            wx.canvasToTempFilePath({
                canvas: canvas,
                success(res) {
                    resolve({
                        title: '请欣赏我的课文朗读作品，点赞+评论。',
                        path: `/pages/index/index?readId=${video.userRead.id}`,
                        imageUrl: res.tempFilePath
                    })
                },
                fail(res) {
                    reject()
                }
            }, this)
        })
    },