uniapp实现微信小程序全局可分享功能

这篇具有很好参考价值的文章主要介绍了uniapp实现微信小程序全局可分享功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】
主要使用 Vue.js 的 全局混入

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

export default {
	data() {
		return {}
	},
	//分享小程序
	onShareAppMessage(e) {
		if (e.from === 'button') {
			console.log('来自页面内转发按钮');
		} else if (e.from === 'menu') {
			console.log('右上角菜单转发按钮');
		}
		return {
			// 自定义分享内容
			title: 'xxxx',
			desc: 'xxxxxx',
			path: '/pages/index/index', // 路径,可传递参数到指定页面
			imageUrl: 'https://xxxxxx.com.cn'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: 'xxxxx',
			path: '/pages/index/index',
			imageUrl: 'https://xxxxxx.com.cn'
		};
	},
}

2.在项目的 main.js 文件中引入该 shareWx.js 文件, 并使用 Vue.mixin() 方法将之全局混入:
// 导入并挂载全局的分享方法
uniapp实现微信小程序全局可分享功能,Uniapp,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-696424.html

到了这里,关于uniapp实现微信小程序全局可分享功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp实现微信小程序自带的分享功能

    定义 share.js 文件 在 main.js 中引入挂载

    2024年02月16日
    浏览(56)
  • uniapp微信小程序全局分享和自定义页面分享

    uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。 1.在项目根目录创建mixins文件夹,然后创建全局分享的 js 文件。mixins/share.js  2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入: 3.自定义页

    2024年02月13日
    浏览(62)
  • uniapp开发中基于vue的混入(mixin) 实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】

    一、在开发微信小程序的时候,发现【发送给朋友】、【分享到朋友圈】、【复制链接】功能,灰色不可用。 很常见的功能,但是这几个功能,并不是你项目建起来了就有的。 1.【发送给朋友】使用 onShareAppMessage 这个方法 如果你的小程序,发现他的【转发给朋友】的按钮时

    2024年01月17日
    浏览(67)
  • uniapp 微信小程序分享、分享朋友圈功能

    页内自定义分享按钮 当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。 如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。 官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 方式1:小程序右上角原生菜

    2024年02月16日
    浏览(64)
  • uniapp微信小程序使用分享功能

    实现效果为如下所示的小程序分享功能: 本项目是一个使用uniapp搭建的微信小程序,上线后点击右上角的…,发现其中的发送给朋友和分享到朋友圈是如下图所示的灰色不能点击: 那么,如何设置微信小程序的分享功能呢? 第一步:在onLoad方法中写wx.showShareMenu方法,设置

    2024年02月11日
    浏览(51)
  • uniapp 微信小程序 实现 将base64图片保存相册和转发分享微信好友功能记录 直接cv就能用!!!!

    一、base64图片保存相册功能 提示api:that.$refs.uToast.show用的是uview2.0的toast,可以根据具体引入的ui库去更换; 二、转发分享base64图片给微信好友功能  该功能在微信开发者工具中调试的时候会一直报错,真机是没问题的,可能是编译器的bug。 其实整个wx.showShareImageMenu会拉起保

    2024年02月11日
    浏览(74)
  • uniapp-微信小程序分享给好友和朋友圈功能

    只需要在要分享的页面中设置 onShareAppMessage 即可 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮 监听用户点击页面内转发按钮(button 组件  open-type=\\\"share\\\" ) 或者右上角菜单“转发”按钮的行为,并自定义转发内容 具体代码如下  onShareAppMessage如果带了参

    2024年02月03日
    浏览(68)
  • uniapp&&微信小程序点击右上角菜单分享功能权限配置

    个人项目地址: SubTopH前端开发个人站   (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home 点击右上角...配置发送给朋友和分享到朋

    2024年02月09日
    浏览(61)
  • uniapp 微信小程序配置全局主题色、实现动态修改主题色

            本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色;第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片

    2024年02月01日
    浏览(47)
  • uniapp 微信小程序实现小程序分享好友

    我们可以使用 onShareAppMessage 的方法对 button 按钮进行触发 HTML代码

    2024年02月02日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包