使用uni-app在实际项目中开发微信小程序，经常会遇到给项目添加分享给微信好友、朋友圈...功能，一般来说要将某个页面分享出去，就要在当前页面添加：
<template> <view></view> </template> <script> export default { data() { return {} }, onLoad() {}, methods: {}, // 分享给好友 onShareAppMessage(res) { console.log(res); if (res.from === 'button') { // 来自页面内分享按钮 console.log(res.target) } return { title: 'title', //自定义分享标题 path: 'path', // '/pages/...'分享页面路径（打开分享时进入页），以/开头 imageUrl: '', //可设置默认分享图，不设置默认截取头部5:4 } }, // 分享朋友圈 onShareTimeline(res) { console.log(res); return { //同上 } } } </script> <style></style>
且onShareAppMessage()与onShareTimeline() 与methods同级！！！
官方网址：uniapp.dcloud.io/api/plugins…
这样做虽然实现了分享功能，但是要在每一个页面都添加以上代码，重复代码不说，还特别容易搞混，一不小心就漏掉参数忘记修改。
全局分享实现
为了减少代码量与重复性，可设置全局分享代码：
在当前项目下创建utils文件夹, 在utils 文件夹中新建share.js文件：
share.js代码：
export default { data() { return { //设置默认的分享参数 //如果页面不设置share，就触发这个默认的分享 share: { title: '',//自定义标题 path: `/pages/index/index`, //默认跳转首页 imageUrl: '', //可设置默认分享图，不设置默认截取头部5:4 } } }, onShareAppMessage(res) { //发送给朋友 let that = this // 动态获取当前页面栈 let pages = getCurrentPages(); //获取所有页面栈实例列表 let nowPage = pages[pages.length - 1]; //当前页页面实例 // let prevPage = pages[pages.length - 2]; //上一页页面实例 that.share.path = `/${nowPage.route}` return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失败', icon: 'none' }) } } }, onShareTimeline(res) { //分享到朋友圈 let that = this // 动态获取当前页面栈 let pages = getCurrentPages(); //获取所有页面栈实例列表 let nowPage = pages[pages.length - 1]; //当前页页面实例 // let prevPage = pages[pages.length - 2]; //上一页页面实例 that.share.path = `/${nowPage.route}` return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失败', icon: 'none' }) } } }, }
然后在入口文件main.js引入
// 全局分享 // 小程序分享的封装 import share from "./utils/share.js" Vue.mixin(share)
然后就可以了！！！文章来源：https://www.toymoban.com/news/detail-509589.html
Vue.mixin()使用方法：混入 — Vue.js文章来源地址https://www.toymoban.com/news/detail-509589.html
到了这里，关于uni-app 微信小程序全局配置分享好友、朋友圈...的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
