uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接

简介: uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
一、在开发微信小程序的时候,发现【发送给朋友】、【分享到朋友圈】、【复制链接】功能,灰色不可用。

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

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的钩子,再执行组件的钩子。

目录
相关文章
|
10天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
10天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
11天前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
6天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
10天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
208 7
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
274 1
|
14天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
35 9
|
18天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
105 1