uniapp 微信小程序分享、分享朋友圈功能

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

页内自定义分享按钮
当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。
如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。

官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

方式1:小程序右上角原生菜单自带的分享按钮

uniapp分享到朋友圈,小程序,uniapp
方式2:在页面中放置的分享按钮
uniapp分享到朋友圈,小程序,uniapp
实现如下:
创建一个share.js文件

export default {
	data() {
		return {

		}
	},
	onLoad: function() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	},
	onShareAppMessage(res) {
		let that = this;
		let imageUrl = that.shareUrl || '';
		if (res.from === 'button') {
		//这块需要传参,不然链接地址进去获取不到数据
			let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
			return {
				title: '商品分享~',
				path: path,
				imageUrl: imageUrl
			};
		}
		if (res.from === 'menu') {
			return {
				title: '商通线上商城',
				path: '/pages/tabBarPro/index/index',
				imageUrl: imageUrl
			};
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '商通线上商城',
			path: '/pages/index/index',
			imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
		};
	},
	methods: {

	}
}

在main.js中引入
uniapp分享到朋友圈,小程序,uniapp
页面内直接这样写就好啦

	<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 
				<u-icon name="zhuanfa"></u-icon>分享
				<button>

效果如下:
uniapp分享到朋友圈,小程序,uniapp
注意:
注意:分享朋友圈和微信好友函数和 onLoad 等生命周期函数同级
uniapp分享到朋友圈,小程序,uniapp文章来源地址https://www.toymoban.com/news/detail-595815.html

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

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

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

相关文章

  • 微信小程序onShareTimeLine分享朋友圈功能

    微信为了更好的用户体验在2.11.3版本当中新出了一个onShareTimeLine方法跟onShareAppMessage类似的方法用于分享朋友圈,在onShareTimeLine当中的参数有title、query、imageUrl三个参数,其中title是标题,query是路径可携带参数,imageUrl是自定义的图片比例为1:1,只支持png和jpg格式的图片,默

    2024年02月16日
    浏览(46)
  • 微信小程序开启分享给好友及分享朋友圈功能

    创建一个空白模板的微信小程序,发布成功后才发现不能分享给好友 及朋友圈 查了下才知道,要有分享功能需要开启。 在小程序首页的里添加以下两个函数  分享好友 和朋友圈里设置要显示 的标题的图片底图。  return {       title:\\\'分享时标题\\\',       query:{        

    2024年02月12日
    浏览(66)
  • uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】

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

    2024年02月12日
    浏览(56)
  • 微信小程序实现分享到朋友圈的功能

    分享朋友圈官方API:分享到朋友圈 1、分享到朋友圈接口设置事项  2、onShareTimeline()注意事项   3、分享朋友圈后,测试发现,没有数据请求。 用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,“单页模式”有以下特点

    2023年04月15日
    浏览(53)
  • uniapp 微信小程序 动态生成海报分享朋友圈,需先保存图片

    直接拷贝代码,不使用插件,自己纯代码实现。 从相册 或拍照 选择一个图片做海报背景。 大吉大利 今晚吃鸡。

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

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

    2024年01月17日
    浏览(67)
  • uniapp(HBuilder X)实现微信小程序转发好友和分享朋友圈(携带多个参数)

    1.转发好友 2.分享朋友圈 需要注意的一些地方: 分享和转发内部不得有嵌套方法返回,也就是不可异步,否则在执行的时候,只会执行当前页面,自定义标题等都不会生效 转发代码块的存放级别与生命周期同级,分享代码块需要放进方法中(methods),不然不会生效 分享的参数携

    2024年02月16日
    浏览(72)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后,点击右上角三个点显示: 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件,如果需要单个页面可以转发,可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(75)
  • 在uniapp中实现微信分享功能(分享给好友+朋友圈+收藏)

    我们现在微信开发者工具中启动项目,我们点击三个点点就是进行调取下方分享界面,在开始的时候显示如下:是没有权限去分享的

    2024年02月16日
    浏览(67)
  • UNIAPP 微信小程序实现分享功能

    默认情况下点击微信小程序调试器无法实现分享功能,如下图  此时需要设置如下操作,个人默认习惯是在 utils文件下 创建 share.js 文件 并写入代码 内容如下 然后打开main.js 修改如下 设置完成后再点击右上角的分享就打开了 回到组件内 如果需要通过按钮实现分享功能  参考

    2024年02月04日
    浏览(72)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包