一、在开发微信小程序的时候,发现【发送给朋友】、【分享到朋友圈】、【复制链接】功能,灰色不可用。
很常见的功能,但是这几个功能,并不是你项目建起来了就有的。
1.【发送给朋友】使用 onShareAppMessage 这个方法
如果你的小程序,发现他的【转发给朋友】的按钮时灰色的,不能点击,那么说明这个小程序没有写这部分的代码。
2.【分享到朋友圈】使用 onShareTimeline 方法
onShareAppMessage和onShareTimeline方法有一个坑,就是每个页面都得单独写一份。
3.【复制链接】注意这个功能不需要开发者手动写方法,如果【转发给朋友】这个功能灰色不可用,【复制链接】也会不可用。总之想要复制链接,就先开通【转发给朋友】吧。
开发过小程序的朋友们应该都遇到这样的情况,可能很多个页面有相同的函数,例如onShareAppMessage,有什么最佳实践吗,应该如何处理呢?
二、uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】
主要使用 Vue.js 的 全局混入
1.创建一个全局分享的js文件。示例文件路径为:./utils/share.js ,在该文件中定义全局分享的内容:
export default { data() { return {} }, //1.发送给朋友 onShareAppMessage() {}, //2.分享到朋友圈 onShareTimeline() {}, }
2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入:
// 导入并挂载全局的分享方法 import share from './utils/share.js' Vue.mixin(share)
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>
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");
当组件存在与mixin对象相同的选项的时候,进行递归合并的时候组件的选项会覆盖mixin的选项
但是如果相同选项为生命周期钩子的时候,会合并成一个数组,先执行mixin的钩子,再执行组件的钩子。