美文网首页前端
小程序分享设置

小程序分享设置

作者: RadishHuang | 来源:发表于2020-12-30 18:02 被阅读0次

    小程序的分享相对于微信H5的分享就很简单了。只要在pageonShareAppMessage方法里面把需要分享的配置返回出下面的数据结构。

    {
                        
        title: '',  // 默认分享,6字 后面变成省略号
        imageUrl: '',   // 分享封面。必须是URL地址。URL地址记得是否添加了安全域名
        path: '/pages/landing/index',      // 分享的后,其他用户点击进来的路径
        query: {  // 分享传递的参数
            type: 'share',
        }
    }
    

    如果是在原生小程序开发下,只要在页面里面加入如下方法

    Page({
        data: {
            
        },
        onShareAppMessage(options) {
            if (options && options.from == 'button') {
                // 来自页面内的转发按钮
                // 页面内的触发分享需要在 wxml文件里面加入 <button open-type="share"></button>
            } else {
                // 点击微信右上角的分享按钮
            }
            
            return {        
                     title: '',  // 默认分享,6字 后面变成省略号
                     imageUrl: '',   // 分享封面。必须是URL地址。URL地址记得是否添加了安全域名
                     path: '/pages/landing/index',      // 分享的后,其他用户点击进来的路径
                     query: {  // 分享传递的参数
                      type: 'share',
                    }
               }
        },
        // onShareTimeline() {
        //  // 分享到朋友圈
        //  return {
        //      title: ''", // 默认分享
        //      query: {},  // 分享传递的参数
        //      imageUrl: "",  // 分享封面。
        //  }
        // },
    })
    
    
    

    小程序在很早以前,就把分享后的complete回调方法给抹掉。然而很多项目中,我们都需要小程序的分享完成回调方法。(其实不是分享完成回调,是否真正分享完成我们是监听不到,只能判断用户是否分享成功或者是点击了分享的关闭按钮)好在小程序分分享是唤起一个新的页面,则页面会走onHideonShow的方法。按照分享的流程是这样走的。

    • 用户点击按钮的分享或者是右上角的分享
    • 小程序调用改页面的onShareAppMessage获取到分享的配置。
    • 小程序唤起分享的页面。这时候走页面的onHide方法。
    • 用户分享成功或者取消分享。这时候走页面的onShow

    依据这个流程,我们可以写一个伪分享complete方法。

    
    let isShareComplete = false;
    Page({
        onShow() {
            if (isShareComplete) {
                isShareComplete = false;
                this.isShareComplete();
            }
        },
        shareComplete() {
            console.log('分享完成');
        },
        onShareAppMessage() {
            isShareComplete = true;
            return {
                title: "分享标题",
                imageUrl: "分享图片",
                path: '/pages/landing/index', 
                query: {
                    type: 'share',
                }
            }
        }
    })
    
    

    如果是用uniapp或者是mpvue的话,可以用mixin方法,将分享的方法封装一起,项目中其实很多页面都是需要做分享。具体页面在重写或者修改onShareAppMessage的返回值。

    相关文章

      网友评论

        本文标题:小程序分享设置

        本文链接:https://www.haomeiwen.com/subject/esnhoktx.html