uniapp微信小程序全局实现发送给朋友、分享到朋友圈功能(不需要每个页面都配置)

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

使用uniapp开发小程序的过程中需要实现: 点击右上角,展开,发送给朋友、分享到朋友圈功能

我们先看没有配置时微信的分享和转发按钮的状态:

uniapp 分享到朋友圈,uni-app,微信小程序,小程序

配置完成后分享和转发按钮的状态:

uniapp 分享到朋友圈,uni-app,微信小程序,小程序

接下来分享全局实现的步骤(不需要在每个页面单独配置):

  • 在utils文件夹下新建share.js文件(没有utils文件节夹选其它文件夹也可以),在share.js中写入以下代码
export default {
	data() {
		return {}
	},
	//1.配置发送给朋友
	onShareAppMessage() {
    return {
      title: '分享时的标题,一般是小程序名',                //分享的标题
      path: 'pages/index',      //点击分享链接之后进入的页面路径
      imageUrl: '/static/index.png' //分享发送的链接图片地址
    };
  },
	//2.配置分享到朋友圈
	onShareTimeline(){
    return{
      title: '分享时的标题,一般是小程序名',                //分享的标题
      query: 'pages/index',     //点击分享链接之后进入的页面路径
      imageUrl: '/static/index.png' //分享发送的链接图片地址
    }
  },
}
  • 接下来在main.js文件中将share方法使用mixin全局混入,这样就不用每个页面都配置也可以实现所有页面点击都可以分享的效果了
import share from './utils/share.js'  //注意路径是上一步新建文件的路径
Vue.mixin(share)

完成上述后重启在微信开发者工具中预览效果:

uniapp 分享到朋友圈,uni-app,微信小程序,小程序 uniapp 分享到朋友圈,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-851242.html

到了这里,关于uniapp微信小程序全局实现发送给朋友、分享到朋友圈功能(不需要每个页面都配置)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp(HBuilder X)实现微信小程序转发好友和分享朋友圈(携带多个参数)

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

    2024年02月16日
    浏览(72)
  • uniapp实现微信小程序全局可分享功能

    uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】 主要使用 Vue.js 的 全局混入 1.创建一个全局分享的js文件。示例文件路径为:./utils/shareWx.js ,在该文件中定义全局分享的内容: 2.在项目的 main.js 文件中引入该 shareWx.js 文件, 并使用 Vue.mixin() 方法将

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

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

    2024年02月16日
    浏览(62)
  • uni-app 微信小程序全局配置分享好友、朋友圈...

    使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友、朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加:  且onShareAppMessage()与onShareTimeline() 与methods同级!!! 官方网址:uniapp.dcloud.io/api/plugins… 这样做虽然实现了分享功能,

    2024年02月11日
    浏览(77)
  • uniapp-vue3微信小程序实现全局分享

    onShareAppMessage(Object object) 监听用户点击页面内转发按钮(button 组件 open-type=\\\"share\\\" )或右上角菜单“转发”按钮的行为,并自定义转发内容。 注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮 参数 Object object : 参数 类型 说明 最低版本 from String 转发事件来

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

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

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

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

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

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

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

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

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

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

    2023年04月15日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包