小程序分享给好友以及分享到朋友圈

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

前言:小程序分享给好友或者朋友圈仅需我们使用微信自带的API,分享到朋友圈的前提是需要我们允许分享给好友,其次才可以分享到朋友圈,功能简单话不多说直接上官方API链接和代码。

 一、分享给好友

wx.onShareAppMessage(function callback) | 微信开放文档 (qq.com)

小程序分享给好友以及分享到朋友圈

我们直接使用官方API:onShareAppMessage

onShareAppMessage: function(res) {
      if (res.from === 'button') {
        // 来自页面内转发按钮
                console.log(res);
      }
      return {
        title: '现在注册还送全场8折优惠劵,无消费门槛',
        imageUrl: 'https://guacheng.fanwan.net.cn/applet/tools/newSharePic.png',
        path: '/pages/startPage/startIndex?userInviteCode=' + this.userQRcode,
      }
    },

其中的参数需要我们使用return,title是分享给好友的标题,imageUrl是我们分享内容图片的链接,path是我们的分享点入的页面路径,其中path是可以带参数的。

这时我们分享给好友功能已经完成,如果需要通过页面的button按钮来进行分享给好友需求,则直接使用特定的button如下open-type="share"即可,样式可以自行覆盖编写:

<button type="default" open-type="share">分享给好友</button>

小程序分享给好友以及分享到朋友圈

面对面扫码功能也不难,后台生成带参数的二维码后,我们可以使用微信开发者工具通过二维码编译,(我们需要注意的是扫码二维码的时候是直接进入我们线上发布的正式服的,所以就无法进行测试,因此我们可以在生成二维码的时候通过开发工具的二维码编译,就可以根据我们开发的代码进行编译了)

小程序分享给好友以及分享到朋友圈

然后正常的在onload()生命周期中获取参数,小程序应用级别的生命周期的onLaunch()中也可以获取到

小程序分享给好友以及分享到朋友圈小程序分享给好友以及分享到朋友圈

二、分享到朋友圈

Page(Object object) | 微信开放文档 (qq.com)

小程序分享给好友以及分享到朋友圈

​
  onShareTimeline: function(res){
    return {
      title: '现在注册还送全场8折优惠劵,无消费门槛', //字符串  自定义标题
      query: 'id=1',  //页面携带参数
      imageUrl:'https://guacheng.fanwan.net.cn/applet/tools/newSharePic.png'   //图片地址
    }

​

这里我们也是用官方API:onShareTimeline,但是需要注意分享到朋友圈需要我们先允许分享给好友,并且值得注意的是分享到朋友圈是不能自定义路径的,并且限制较多,不建议将交互复杂的界面进行分享,官方文档的说明亦是如此。

小程序分享给好友以及分享到朋友圈

同时分享到朋友圈的功能不支持我们使用自定义按钮,只能通过点击小程序右上方的胶囊位(个人反正是没有找到能够直接分享到朋友圈的按钮实现方式) ,至于分享的界面也和小程序内部有所不同,详情见下图(找了一个拼多多的案例),点击右下角的前往小程序则会前往当前浏览的小程序界面,(例如浏览的商品详情页则直接跳转到详情页,对应的参数是支持我们带参的)

小程序分享给好友以及分享到朋友圈

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

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

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

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

相关文章

  • 微信小程序嵌套的H5使用小程序分享(分享微信好友或朋友圈)

    嵌套在微信小程序中的H5想要使用小程序自带分享功能,分享H5的页面给微信好友或朋友圈 H5中可使用wx.miniProgram.postMessage向小程序的webview发送消息,会触发组件的message事件,在小程序webview页面onShareAppMessage,onShareTimeline中进行使用。

    2024年02月13日
    浏览(70)
  • 微信小程序实现转发给好友以及朋友圈

    小趴菜上线!!!,想来想去还是记录一下这里吧,刚开始也是一脸懵。 这里的分享(转发)有两种途径: 1、通过button去触发:        i: 通过给button 设置 open-type=\\\"share\\\"属性,可以在点击按钮后触发onShareAppMessage事件        ii:只能发送给好友,不能转发朋友圈 2、通过

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

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

    2024年02月11日
    浏览(77)
  • 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日
    浏览(76)
  • 在uniapp中实现微信分享功能(分享给好友+朋友圈+收藏)

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

    2024年02月16日
    浏览(67)
  • uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)

    大家好!匆匆忙忙又到了周三,今天是 2023年9月13日|农历七月二十九 ,今天这篇文章主要是微信小程序实现分享当前页面到朋友圈或微信好友,下面来看下具体实现方式吧! 带参数和无参数是根据自己的业务需求,如果需要再onLoad函数里面赋值一些属性值的时候可以在 pat

    2024年02月09日
    浏览(51)
  • 不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

    人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!   事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功

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

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

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

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

    2024年02月02日
    浏览(79)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包