uni.app 使用 mixins 技术统一注入小程序页面分享到好友,分享朋友圈功能

uni.app 使用 mixins 技术统一注入小程序页面分享到好友,分享朋友圈功能

• [1. 在utils文件夹下创建share.js](#1. 在utils文件夹下创建share.js)
• [2. 为所有页面挂载](#2. 为所有页面挂载)
• 3.单独页面使用

1. 在utils文件夹下创建share.js

export default{
    data(){
        return {
		   // 默认全局分享内容
            mixinsShare:{
                title:'首页',  //分享标题
                path:'/pages/index/index', // 分享路径
                imageUrl:'',    //分享图片
                desc:'',  //描述
                content:''  //内容
            }
        }
    },

	//分享好友
    onShareAppMessage(res) {
		//不传路径 则默认获取当前路径及附带参数
		if(!this.mixinsShare.path){
			this.mixinsShare.path=getCurrentPages()[0].$page.fullPath
		}
        return {
            title:this.mixinsShare.title,
            path:this.mixinsShare.path,
            imageUrl:this.mixinsShare.imageUrl,
            desc:this.mixinsShare.desc,
            content:this.mixinsShare.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    },
	// 分享朋友圈
	onShareTimeline(res) {
		//不传路径 则默认获取当前路径及附带参数
		if(!this.mixinsShare.path){
			this.mixinsShare.path=getCurrentPages()[0].$page.fullPath
		}
	    return {
	        title:this.mixinsShare.title,
	        path:this.mixinsShare.path,
	        imageUrl:this.mixinsShare.imageUrl,
	        desc:this.mixinsShare.desc,
	        content:this.mixinsShare.content,
	        success(res){
	            uni.showToast({
	                title:'分享成功'
	            })
	        },
	        fail(res){
	            uni.showToast({
	                title:'分享失败',
	                icon:'none'
	            })
	        }
	    }
	}
}

2. 为所有页面挂载

• main.js中引入

import share from "./utils/share.js"//全局分享小程序
Vue.mixin(share)

3.单独页面使用

//引入
import share from "@/utils/share.js"//全局分享小程序
export default {
		mixins:[share],
		data() {
			return {
			    //这里是分享跳转的连接(会替换share.js中的mixinsShare
				mixinsShare: {
					title: '首页',
					path: 'pages/index/index',
					desc: '描述',
					content: '内容',
					imageUrl:'',    //分享图片
				},
			}
		}
	}