uniapp小程序开发,配置开启小程序右上角三点的分享功能

直接全局配置一个分享的功能,要不然需要一个一个页面去单独配置就太麻烦了!!!

1.新建一个share.js文件,并配置代码,调用onShareMessage()和onShareTimeline()两个函数。

其中:

title:分享时显示的标题

path/query:分享链接后所进入的页面是哪个?配置路径(不要带后缀.vue/.nvue)

imageUrl:分享时显示的图片

javascript 复制代码
export default {
  data() {
    return {};
  },
  //1.配置发送给朋友
  onShareAppMessage() {
    return {
      title: "百村**,*****",
      path: "pages/login/index", //分享链接之后进入的页面路径
      imageUrl: "/static/images/logoPage.png", //分享发送的链接图片地址
    };
  },
  //2.配置分享到朋友圈
  onShareTimeline() {
    return {
      title: "百村**,*****",
      query: "pages/login/index", //分享链接之后进入的页面路径
      imageUrl: "/static/images/logoPage.png", //分享发送的链接图片地址
    };
  },
};

2.在main.js中使用mixin混入。

javascript 复制代码
import share from "./api/share.js";
Vue.mixin(share);
相关推荐
GISer_Jing9 小时前
2025年FE_Jinger的年度总结、经验分享与展望
前端·经验分享·面试·前端框架·aigc
.try-9 小时前
css直线中间小三角
前端·css·html
Dreamcatcher_AC9 小时前
Node.js留言板开发全流程解析
前端·javascript·mysql·node.js·express
鹏程十八少9 小时前
Android 一套代码适配车机/手机横竖屏?看我如何用搞定小米、比亚迪、蔚来、理想、多品牌架构设计
android·前端·面试
qq_12498707539 小时前
基于微信小程序的奶茶店点餐平台的设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·毕设·计算机毕业设计
持续升级打怪中9 小时前
从前端到大模型:我的AI转型之路与实战思考
前端·人工智能
LYFlied9 小时前
【性能优化】图片渲染性能优化全流程方案详解
前端·性能优化
『六哥』9 小时前
零基础搭建完成完整的前后端分离项目的准备工作
前端·后端·项目开发
沛沛老爹9 小时前
Web开发者实战AI Agent:基于Dify实现OpenAI Deep Research智能体
前端·人工智能·gpt·agent·rag·web转型
冬奇Lab9 小时前
【Cursor进阶实战·01】Figma设计稿一键还原:Cursor + MCP让前端开发提速10倍
android·前端·后端·个人开发·figma