微信小程序/uniapp分享功能-代码封装与使用（分享好友或朋友圈-两种方式）

 官方地址：分享 | uni-app官网

一、分享朋友圈-详见uni-app官方文档

 

注意：更多注意事项见uni-app文档

 结果展示：

二、分享好友或者朋友圈-详见微信开放文档

先展示：

 实现分享好友

 实现分享朋友圈

 

注意：这两个方法和页面生命周期onLoad（）同一级

 详见代码：

onLoad(option) {
    this.setPaintOrgIdData(option);
    this.getProductData(option);
  },
  // 微信小程序右上角分享
  onShareAppMessage() {
    return this.getShareData();
  },
  // 转发至朋友圈
  onShareTimeline() {
    return this.getShareData("timeline");
  },

methods：{

        getShareData(type) {
              let title = "分享标题";
              // 判断本地是否存在ID---------（这个不重要，目的是为了获取 path）
              let paintOrgId = uni.getStorageSync("paintOrgId");
              let path = `/pages/index/index`;
              if (paintOrgId) {
                        path = `${path}?id=${paintOrgId}`;
              }
              let imageUrl = "../../static/images/public/ic_unified_share.png";
              if (type == "timeline") {
                        return {
                                  title,
                                  imageUrl,
                                  query: path,
                        };
              }
              return {
                        title,
                        imageUrl,
                        path,
              };
    },

}

模仿上面的代码就能实现

代码封装与使用：

 首先在mixins文件夹下面新建share.js；

export default {
	data() {
		return {
			// 默认的全局分享内容
			share: {
				title: '标题',
				path: '/pages/login/login',    // 全局分享的路径
				imageUrl: 'https://1305646404.cos.ap-nanjing.myqcloud.com/activity/red_package.jpeg',    // 全局分享的图片
				desc: '分享的描述'
			}
		}
	},
	// 定义全局分享
	// 1.发送给朋友
    onShareAppMessage(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			desc: this.share.desc,
			imageUrl: this.share.imageUrl,
		}
    },
	//2.分享到朋友圈
    onShareTimeline(res) {
        return {
			title: this.share.title,
			path: this.share.path,
			desc: this.share.desc,
			imageUrl: this.share.imageUrl,
		}
    },
}

在我们需要的使用的页面import进来进行混合；

import share from '@/mixins/share.js'

 如果自己不想用默认的配置，先修改下信息，可以直接通过this来调用进行修改；