uniapp 微信小程序中实现“发送给朋友”和“分享到朋友圈”

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

  1. 先新建一个js文件,内容如下:
//全局点亮所有页面的 '分享给朋友' 和 '分享到朋友圈'
export default {
	data() {
		return {
			//设置默认的分享参数
			share: {
				//转发标题
				title: '',
				//转发路径
				path: '',
				//自定义图片路径
				imageUrl: '',
				//自定义页面路径中携带的参数
				query: ''
			}
		}
	},
	//分享给朋友
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			query: this.share.query,
			imageUrl: this.share.imageUrl,
			success(res) {
				console.log(res)
			},
			fail(res) {
				console.log(res)
			}
		}
	}
}

  1. 在main.js中引入
import MyShare from '@/common/myShare.js'//此处为上面的js文件
Vue.mixin(MyShare)
  1. 完成上面两步后,每个页面都会有分享按钮了,在页面的 data 里面可以单独设置参数了
export default {
data(){
        return { //设置默认的分享参数
            share:{
                title:'自定义标题',
                path:'转发路径',
                imageUrl:'自定义图片路径'
            }
        }
    }
}

  1. 效果图如下
    uniapp分享图片到微信,uni-app,微信小程序,javascript

文章来源地址https://www.toymoban.com/news/detail-838185.html

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

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

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

相关文章

  • 微信小程序 - - - - - 转发分享(发送给好友、分享到朋友圈)

    监听用户点击右上角菜单的「转发」按钮时触发的事件 设置转发的参数 官方文档:onShareAppMessage ****.js 分享到朋友圈 不支持自定义页面路径!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 监听用户点击右上角菜单的「转发」按钮时触发的事件 设置转发

    2024年02月09日
    浏览(69)
  • uniapp 微信小程序分享、分享朋友圈功能

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

    2024年02月16日
    浏览(54)
  • 【uniapp】微信小程序分享到聊天,朋友圈

    ​​​​​manifest.json的app模块配置开启Share微信分享,填入appId。  2.示例  3.界面分享按钮:button open-type=\\\"share\\\"分享/button

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

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

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

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

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

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

    2024年02月16日
    浏览(65)
  • uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

    最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。 uniapp中使用画布,实现图片的编辑-批量批改图片 1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图

    2024年04月14日
    浏览(57)
  • 微信小程序(uniapp)-实现分享图片给微信好友

    官方地址: 微信开放文档 | wx.showShareImageMenu(Object object) 示例代码:

    2024年02月11日
    浏览(74)
  • uniapp 微信小程序 绘制海报,长按图片分享,保存海报

    uView UI 2.0 dcloud 插件市场地址

    2024年02月12日
    浏览(62)
  • 微信小程序分享、转发朋友、分享朋友圈使用整理

    一、微信小程序分享监听 Page.onShareAppMesssage() onShareAppMessage(Object object) 监听用户点击页面内转发按钮(button 组件  open-type=\\\"share\\\" )或右上角菜单“转发”按钮的行为,并自定义转发内容。 注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮 参数 Object obj

    2024年02月04日
    浏览(64)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包