uniapp开发中基于vue的混入(mixin) 实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】_uniapp 微信小程序分享

一、在开发微信小程序的时候，发现【发送给朋友】、【分享到朋友圈】、【复制链接】功能，灰色不可用。

很常见的功能，但是这几个功能，并不是你项目建起来了就有的。

1.【发送给朋友】使用 onShareAppMessage 这个方法

如果你的小程序，发现他的【转发给朋友】的按钮时灰色的，不能点击，那么说明这个小程序没有写这部分的代码。

2.【分享到朋友圈】使用 onShareTimeline 方法

onShareAppMessage和onShareTimeline方法有一个坑，就是每个页面都得单独写一份。

3.【复制链接】注意这个功能不需要开发者手动写方法，如果【转发给朋友】这个功能灰色不可用，【复制链接】也会不可用。总之想要复制链接，就先开通【转发给朋友】吧。

开发过小程序的朋友们应该都遇到这样的情况，可能很多个页面有相同的函数，例如onShareAppMessage，有什么最佳实践吗，应该如何处理呢？

二、uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】

主要使用 Vue.js 的 全局混入

1.创建一个全局分享的js文件。示例文件路径为：./utils/share.js ，在该文件中定义全局分享的内容：

export default {
	data() {
		return {}
	},
	//1.发送给朋友
	onShareAppMessage() {},
	//2.分享到朋友圈
	onShareTimeline() {},
}
1
2
3
4
5
6
7
8
9

2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入：

// 导入并挂载全局的分享方法
import share from './utils/share.js'
Vue.mixin(share)
1
2
3

3.如果在特定页面需要自定义分享内容，也仍旧可以使用页面的 onShareAppMessage() 和 onShareTimeline() 方法自定义分享的内容，全局的分享会被页面定义的分享内容覆盖。

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

三、效果展示

这样，【发送给朋友】、【分享到朋友圈】、【复制链接】这3个功能就可以正常使用了。

四、Vue中的mixin

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来。

1、局部混入

组件页面

<template>
  <div>
    {{ a }}
  </div>
</template>

<script>
export default {
  mixins: [
    {
      data() {
        return {
          a: 1
        }
      },
      created() {      
  		console.log("全局混入")    
 	  }
    },
  ],
  data() {
    return {
      a: 2,
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2、全局混入

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

main.js

import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.mixin({
  data() {
    return {
      a: 1
    };
  },
  created() {      
  	console.log("全局混入")    
  }
});
new Vue({
  render: (h) => h(App)
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项

但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子。