【封装分享】uniapp&vue开发，封装分享.js（可分享至好友或者朋友圈）

小半 • 2023年2月10日上午9:45 • 前端开发 • 阅读 183

使用场景：
1、小程序每个页面都可以分享
2、允许某个页面自定义分享参数

实现步骤：

1.封装 share.js

源码：

export default{
    data(){
        return {
		   // 默认的全局分享内容
            share:{
                title:'山东金诺',
                path:'/pages/index/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(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'
	            })
	        }
	    }
	}
}

2.在Vue main.js文件中全局引入share.js文件

源码：

import share from './static/api/share.js';
Vue.mixin(share)

到这里为止，项目中每个页面都可以进行分享操作了，效果如下：

——————————————————分割线——————————————————

Tips1：如果某个页面想自定义分享的内容（如path、图片、分享描述等），可以在某个页面中，定义以下数据：

源码：

data(){
	return {
		share:{
			title:'自定义标题',
			path:'自定义路径',
			imageUrl:'自定义图片',
			desc:'自定义描述',
			content:'自定义内容'
		}
	}
}

Tips2：如果不想全局页面分享，只单独几个页面可分享，可以在每个页面添加以下代码:

注：onShareAppMessage() 和 onShareTimeline() 方法是和 onLoad、 methods 等方法同级。

 // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
	    return {
	      title: '页面分享的标题',
	      path: '/pages/my/my',
		  imageUrl: '/static/img/banner.png'
	    }
	  },
	  // 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '页面分享的标题',
			path: '/pages/my/my',
			imageUrl: '/static/img/banner.png'
		}
	},