小程序全局分享(uniapp)

匍匐前进的小白

于 2021-07-06 14:46:35 发布

阅读量258

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_57605398/article/details/118519476

版权

本文档介绍了如何在uni-app中实现全局分享功能。首先创建share.js文件，定义默认的分享参数，然后在main.js中引入并使用Vue.mixin()进行全局注册。在页面中，可以通过设置share属性来覆盖默认分享内容，如果不设置则使用默认值。分享功能包括分享到朋友和分享到朋友圈，成功或失败后会有相应的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.所谓的全局肯定是在main.js中引入你封装好的方法啦

1.1新建js文件share.js,内容如下

export default {
  data() {
    return {
      // 设置默认的分享参数
      // 如果页面不设置share，就触发这个默认的分享
      share: {
        title: 'XXXX',
        path: '/pages/home/index',
      },
    };
  },
  onShareAppMessage(res) {
    var that = this;
    return {
      title: that.share.title,
      path: that.share.path,
      success(res) {
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  onShareTimeline(res) { // 分享到朋友圈
    var that = this;
    return {
      title: that.share.title,
      path: that.share.path,
    };
  },
};

1.2在main.js中引入

import share from '@/utils/share';
Vue.mixin(share);

1.3在页面中使用（注：如果页面不设置share，就触发默认的分享）

export default {
  name: 'PromoteApply',
  data() {
    return {
      // 分享
      share: {
        title: '推广',  //分享的页面标题
        path: '/pages/promote/index',  //页面路径
      },
    
    };
  },
}