uniapp 实现当前页面分享至微信好友或朋友圈功能

使用uniapp开发微信小程序时,小程序自带的转发给朋友和转发到朋友圈功能默认是灰色禁用的,点击会提示“此页面未配置分享功能”

解决方法为在每个page页面的script中(和生命周期函数同级)添加以下代码:

onShareAppMessage(){//点亮发送给朋友
    return {
      title: '自定义转发标题',//标题
      path: '/page/user?id=123'//路径
    }
},
onShareTimeline() {}//点亮分享朋友圈,暂只支持Android平台

若觉得每个页面单独添加比较麻烦,还有两个办法只需添加一次代码,首先是全局配置:
在app.js中加入以下代码:

!function(){
  var PageTmp = Page;

  Page =function (pageConfig) {

    // 设置全局默认分享
    pageConfig = Object.assign({
      onShareAppMessage:function () {
        return {
          title:'默认文案',
          path:'默认分享路径+id',
          imageUrl:'默认分享图片',
        };
      }
    },pageConfig);

    PageTmp(pageConfig);
  };
}();

或者也可以使用代码混入,可以把js当做组件在每个页面引用,也可以在main.js中全局混入:
新建share.js文件,内容如下:

export default {
    data() {
        return {
            //设置默认的分享参数
            share: {
                title: '辰雪博客',
                path: '/pages/index',
                imageUrl: '',
                desc: '一个不知道哪抄来的博客',
                content: ''
            }
        }
    },
    onShareAppMessage(res) {
        return {
            title: this.share.title,
            path: this.share.path,
            imageUrl: this.share.imageUrl,
            desc: this.share.desc,
            content: this.share.content,
            success(res) {
                uni.showToast({
                    title: '分享成功'
                })
            },
            fail(res) {
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                })
            }
        }
    },
    onShareTimeline() {},
}

1.单独混入:

import share from '@/libs/mixin/share.js'
  export default {
    name: 'TemplateTest',
    mixins: [share],
    data() {
      return {
      }
    }
  }

2.全局混入:
在main.js中引入:

import share from '@/libs/mixin/share.js'
Vue.mixin(share)

任意方式添加 onShareAppMessage 和 onShareTimeline方法后,微信小程序自带的分享功能就被点亮了。
如果还是不可以状态,请检查小程序是否已完成微信认证。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值