1. 分享功能实现
通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天，onShareTimeline()将小程序分享到朋友圈。
api中的参数配置参考文档：https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage
分为全局引入、单页面引两种方式
全局引入只需要在小程序main.js中引入一次，可以复用，便于维护；
单页面引入需要在每一个支持分享的页面都单独引入，重复代码多，维护不方便。
单页面逐个引入
onShareAppMessage: function() { // 分享到微信
// 更多参数配置，参考文档
return {
title: '分享标题',
path: '/pages/index/index'
}
}
onShareTimeline() { // 分享到朋友圈
return {
title: '分享标题',
path: '/pages/index/index'
}
}
全局引入
新建mixin .js编写分享逻辑。获取当前路由时，微信支付宝有兼容性问题，需要进行适配
export const mixin = {
data () {
return {
share: {
// 转发的标题
title: '我是默认标题',
// 转发的路径，默认是当前页面，必须是以‘/’开头的完整路径，/pages/index/index
path: '',
//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
imageUrl: ''
}
}
},
// 分享到微信
onShareAppMessage: function () {
// 获取加载的页面
let pages = getCurrentPages(), view = pages[pages.length - 1]
//分享的页面路径
if(!this.share.path) {
// #ifdef MP-WEIXIN
this.share.path = `/${view.route}`
//#endif
//#ifdef MP-ALIPAY
this.share.path = view.$page.fullPath
//#endif
}
//转发参数
return this.share
},
// 分享到朋友圈
onShareTimeline () {
// 获取加载的页面
let pages = getCurrentPages(), view = pages[pages.length - 1]
//分享的页面路径
if(!this.share.path) {
// #ifdef MP-WEIXIN
this.share.path = `/${view.route}`
//#endif
//#ifdef MP-ALIPAY
this.share.path = view.$page.fullPath
//#endif
}
//转发参数
return this.share
},
}
全局引入
// main.js
import {mixin} from './utils/mixin.js'
Vue.mixin(mixin)
2. Vue中的Mixin知识了解
概念
提高vue组件的可复用功能；一个混入的对象可以包含组件任意选项，当组件使用混入对象时，所有混入对象的选项都将被“混合“近该组件本身的选项
mixin中的数据是不共享的，每个组件中的mixin实例都是独立的
混入规则
钩子函数
同名的生命周期函数会合并为一个数组，都将被调用，混入对象的生命周期函数会在组件自身的同名钩子函数之前调用
// mixin.js
export const mixin = {
created() {
console.log("先执行")
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
created() {
console.log("后执行")
}
}
数据对象合并（data）
混入对象值为对象的同名对象会被替换，优先执行组件内的同名对象；也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖
// mixin.js
export const mixin = {
data() {
return {
msg: '会被覆盖'
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
data() {
return {
msg: '最终结果'
}
}
}
普通方法合并
methods，components 和 directives 会被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对
// mixin.js
export const mixin = {
methods: {
fun1() {
console.log('可以在index.vue中通过 this.fun1()调用')
},
fun2() {
console.log('会被index.vue中的fun2覆盖')
}
}
}
// index.vue
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin],
methods: {
fun2() {
console.log('fun2最终结果')
}
}
}
混入方式
局部混入：在需要的组件中单独引入，只能在当前引用了的组件中使用文章来源：https://www.toymoban.com/news/detail-453592.html
import { mixin } from '@/mixin.js'
export default {
mixins: [mixin]
}
全局混入：在main.js中引入，可以在组件中直接使用文章来源地址https://www.toymoban.com/news/detail-453592.html
import {mixin} from '@/mixin.js'
Vue.mixin(mixin)
到了这里，关于uni-app小程序分享功能实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
