通过onShareAppMessage(OBJECT) 将小程序到分享微信聊天,onShareTimeline()将小程序分享到朋友圈。
api中的参数配置参考文档:https://uniapp.dcloud.net.cn/api/plugins/share.html
分为全局引入、单页面引两种方式
全局引入只需要在小程序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.jsimport {mixin} from './utils/mixin.js'Vue.mixin(mixin)
概念
提高vue组件的可复用功能;一个混入的对象可以包含组件任意选项,当组件使用混入对象时,所有混入对象的选项都将被“混合“近该组件本身的选项
mixin中的数据是不共享的,每个组件中的mixin实例都是独立的
混入规则
钩子函数
同名的生命周期函数会合并为一个数组,都将被调用,混入对象的生命周期函数会在组件自身的同名钩子函数之前调用
// mixin.jsexport const mixin = {created() { console.log("先执行")}}// index.vueimport { mixin } from '@/mixin.js'export default {mixins: [mixin], created() { console.log("后执行") }}
数据对象合并(data)
混入对象值为对象的同名对象会被替换,优先执行组件内的同名对象;也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖
// mixin.jsexport const mixin = { data() { return { msg: '会被覆盖' } }}// index.vueimport { mixin } from '@/mixin.js'export default {mixins: [mixin], data() { return { msg: '最终结果' } }}
普通方法合并
methods,components 和 directives 会被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对
// mixin.jsexport const mixin = { methods: {fun1() { console.log('可以在index.vue中通过 this.fun1()调用')},fun2() {console.log('会被index.vue中的fun2覆盖')}}}// index.vueimport { mixin } from '@/mixin.js'export default {mixins: [mixin], methods: {fun2() {console.log('fun2最终结果')}}}
混入方式
局部混入:在需要的组件中单独引入,只能在当前引用了的组件中使用
import { mixin } from '@/mixin.js'export default {mixins: [mixin]}
全局混入:在main.js中引入,可以在组件中直接使用
import {mixin} from '@/mixin.js'Vue.mixin(mixin)
来源地址:https://blog.csdn.net/weixin_45559449/article/details/129315352