微信小程序分享功能

article/2025/9/21 23:36:55

由于小程序的分享(微信、头条平台),需要监听页面的onShareAppMessage生命周期,小程序需要在页面声明了此生命周期,点击右上角的"胶囊"才会有分享功能,

而一般情况下,我们希望每个页面都可以分享,那就需要每个页面都写一遍这个生命周期,是很繁琐的。

基于以上,开源字节基于uview通过mixin的形式,给每一个页面注入了onShareAppMessage生命周期,让您简单引入,无需任何后续操作,即可让每一个页面都有分享功能(仅针对小程序)。

基本使用

需要注意的是,小程序(uni)没有提供类似"getNavigationBarTitle"这样的接口,所以我们无法获取当前页面导航栏的标题,换言之,我们想要每个页面个性化的分享标题,需要手动设置,否则默认为小程序的名称

首先在main.js中引入对应的文件

let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

通过this.$u.mpShare定义分享信息

// 分享自定义标题与图片
let shareTitle = ''
if(room.type == '整租'){shareTitle = this.village.name + " " + this.room.houseNum + this.room.houseHall + this.room.toiletNum + " " + this.room.decoration+ " ¥" + this.room.price+"/月"
}else{shareTitle = this.village.name + " " + room.roomType + " " + this.room.decoration+  " ¥" + this.room.price+"/月"
}
this.$u.mpShare = {title:  shareTitle, // 默认为小程序名称,可自定义// 支持PNG及JPG,默认为当前页面的截图imageUrl: this.room.faceUrl, 
}

开源字节追求用更简单的逻辑,更少的代码实现更复杂的功能。以上代码在开源字节的租房小程序中都已开源上线,可前往仓库获取源码

如若转载,请注明出处:开源字节   https://sourcebyte.cn/article/210.html

 


http://chatgpt.dhexx.cn/article/bIWVuHWy.shtml

相关文章

微信小程序之分享功能

微信小程序之分享功能 小程序风口正盛,将小程序作为获客的来源之一实在合适不过,想要让小程序的获客产生裂变,那么从将小程序的数据发送出去势在必行,本文提供以下几种方案作为数据出口,达到老拉新/口碑传播的效果。 …

微信小程序的转发分享功能

文章目录 button组件的open-type"share"app.jsonpages/about/about.wxmlpages/about/about.wxsspages/about/about.js 页面右上角的转发按钮app.jsonpages/about/about.wxmlpages/about/about.wxsspages/about/about.jspages/home/home.wxmlpages/home/home.wxsspage…

vscode中文高亮

测试代码: #include <常用> 如(i)断; 如(j)下;空 主(){ }在vscode目录下resources\app\extensions\cpp\syntaxes中c.tmLanguage.json试改改. "match": "\\b(break|case|continue|default|do|else|for|goto|if|_Pragma|return|switch|while|断|下)\\b&quo…

vscode中文标点符号自动转英文标点符号

vscode中文标点符号自动转英文标点符号

vscode中文乱码解决方法总结

第一种方法&#xff1a;直接点下面的 找到GB18030(其实GB都可以&#xff0c;我也不懂&#xff0c;一个一个试吧) 运行就可以了 第二种方法&#xff1a;点击设置&#xff0c; 在上面搜索 编码 &#xff0c;点击utf8 下拉找到GB 第三种方法&#xff1a; 这种方法我也不会&#xf…

VSCode正则搜索中文字符

(".*[\u4E00-\u9FA5])|([\u4E00-\u9FA5].*") 右侧开启正则匹配&#xff0c;即可搜出全部中文字符

vscode 中文插件失效

一、Crtl Shift P&#xff0c;打开命令面板&#xff0c;输入configure display language&#xff0c;点击图中框起来的那一项&#xff1a; 二、 选择 zh-cn&#xff1a; 等待vscode自动重启。 大功告成&#xff01;

MAC 用配置设置解决vscode中文乱码问题

MAC 用配置设置解决vscode中文乱码问题 中文乱码出现的原因 因为中文主要有两套编码&#xff0c;一套是GBK&#xff0c;一套是UTF-8&#xff0c;代码编辑器一般默认用UTF-8&#xff0c;而在输出的终端中默认是GBK&#xff0c;所以在UTF-8下的中文输出到GBK的终端自然会乱码。…

解决vscode中文注释乱码

有的文件&#xff0c;用Notepad打开很清楚能显示中文或其他中文内容&#xff0c;但是直接用vscode加载就乱码。 解决方案&#xff1a; 打开vscode&#xff0c;打开设置 之后点文件&#xff0c;勾选上Auto Guess Encoding。 最后&#xff0c;将原有乱码文件移出工作区&#x…

VScode注释中文时乱码怎么办?VScode中文注释乱码问题的解决方法

当我们在编写C语言代码的时候&#xff0c;会对代码进行中文的注释&#xff0c;但是使用VScode打开代码之后&#xff0c;部分的中文注释会出现乱码的情况&#xff0c;对此找到了几个解决中文注释乱码的方法&#xff0c;分享给大家&#xff0c;希望可以对大家的学习带来帮助。 不…

VScode设置中文显示

VScode一般默认英文显示&#xff0c;如果想要中文显示需要设置。 打开VScode按快捷键ctrlshiftp在搜索框搜索 然后会出现 选择中文重启就好了。 如果重启依旧是英文&#xff0c;就去应用商店看下安装过的插件&#xff0c;把中文插件在重新安装一下&#xff0c;然后重启即可。…

VScode中文注释乱码问题解决

VScode默认是用utf-8打开工程代码&#xff0c;C语言里的中文注释如果是Source insight之前gbk编码的注释可能会显示乱码&#xff0c;如何能让代码打开gbk编码的文件也不乱码&#xff0c;设置VScode如下&#xff1a; 方法一&#xff1a; 依次打开&#xff1a;文件–首选项–设置…

vscode中文注释斜体修改

第一次使用发现中文注释是斜体的并且看起来很难受 找了一遍也不会怎么弄&#xff0c;然后点点就成功了 我使用的是这个主题 点击设置按钮点击拓展设置 最后将红色圈起来的这个勾去掉&#xff0c;保存即可

VSCode中文设置异常

原文链接&#xff1a;https://blog.csdn.net/weixin_34898216/article/details/113548414 第一步 下载插件&#xff1a;Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code (现在直接下载安装已经起效) 在Chinese (Simplified) Language Pack for Visu…

安装Visual Studio Code,解决vscode中文乱码问题

记录个人安装过程&#xff0c;方便电脑搞废了自己重新安装&#xff1a; 1.下载Visual Studio Code编辑器&#xff0c;版本看自己&#xff1a;Visual Studio Code - Code Editing. Redefined 2.安装Visual Studio Code&#xff08;建议不要安装在系统盘&#xff0c;路径不要有…

vscode 设定中文字体

1. 打开设置 2. 设定中文字体

解决vscode中文乱码问题(不是改GBK,亲测有效)

解决vscode中文乱码问题&#xff08;不是改GBK&#xff0c;亲测有效&#xff09; 方式一&#xff1a;解决vscode中文乱码问题&#xff08;不是改GBK&#xff0c;亲测有效&#xff09;中文乱码出现的原因问题解决过程具体设置&#xff1a; 其他的可行方案总结 方式二&#xff1a…

VsCode中文输出为乱码的原因及解决方法

在vscode&#xff08;在cmd.exe也会&#xff09;中有时候编译输出含有中文的内容时&#xff0c;在输出界面显示的是乱码. 原因&#xff1a;我们需要传递给计算机的所有信息都会转换成0 1表示的二进制数字流&#xff0c;经过CPU处理后再输出给相应的程序&#xff0c;程序再把这…

vscode中文乱码问题及几种常见的解决方案

问题及原因 问题原因&#xff1a;代码文件的字符编码格式为UTF-8&#xff0c;但是terminal的字符编码格式为GBK。 解决思路&#xff1a;统一代码文件和terminal的字符编码格式。 解决办法 说明&#xff1a;以下的解决方案是针对上述原因“代码文件的字符编码格式为UTF-8&…

VScode 中文显示出现黄色方框的解决方法

VScode 中文显示出现黄色方框的解决方法 使用 VScode 打开源码时&#xff0c;发现注释中的汉字都被一个黄色的方框圈住了&#xff0c;这是因为使能了批注中字符的突出显示的功能&#xff0c;不喜欢这个黄色方框的小伙伴&#xff0c;可以参照下列步骤&#xff0c;禁用批注中字符…