uniapp微信小程序使用分享功能

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

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

onLoad(){
    wx.showShareMenu({
        withShareTicket:true,
        //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
        menus:["shareAppMessage","shareTimeline"]
    })
},

第二步:分别写发送给朋友和分享到朋友圈的方法,方法是与data,methods等同级,切记不要写到methods里边

onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
    }
    return {
        title: 'title', //分享的名称
        path: '/pages/hfdt/gztjh',
        mpId:'wx6bf107b87c455b99' //此处配置微信小程序的AppId
    }
},
//分享到朋友圈
onShareTimeline(res) {
    return {
        title: '胶南街道召开“红帆支部”观摩学习暨工作推进会',
        type: 0,
        summary: "",
    }
},

在需要分享的界面按照如上步骤操作即可,在模拟器中的效果为:
uniapp微信小程序使用分享功能
uniapp微信小程序使用分享功能文章来源地址https://www.toymoban.com/news/detail-515027.html

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

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

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

相关文章

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

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

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

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

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

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

    2024年02月03日
    浏览(43)
  • 使用taro+canvas实现微信小程序的图片分享功能

    二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。 使用场景及功能:微信小程序 生成海报图片 分享好友 下载图

    2024年02月05日
    浏览(49)
  • springboot使用 WxJava 实现 微信小程序(uniapp开发)的登陆功能

    前端使用uniapp来开发微信小程序 后端springboot中使用WxJava来做服务端( WxJava是微信服务端开发 的Java SDK ) 该图来源于微信小程序官方文档 根据uniapp的官网直接通过它提供的第三方 登陆api直接使用,代码如下 直接根据WxJava的官方demo (1) yml配置 (2)两个配置文件 (3)contro

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

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

    2024年02月09日
    浏览(38)
  • 【微信小程序支付功能】uniapp实现微信小程序支付功能

    场景 :要实现公司微信小程序的电商模块微信支付功能 一.实现步骤和思路 在登录状态,登录的时候获取到code,利用code获取到 openid: https://blog.csdn.net/weixin_45308405/article/details/128868377?spm=1001.2014.3001.5501 在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付

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

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

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

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

    2024年02月11日
    浏览(36)
  • 微信小程序点击icon实现分享功能

    1.小程序分享功能实现方式 小程序分享功能有两种方式,监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。 使用微信小程序的分享功能需要定义onShareAppMessage(Object object)函数,存在该函数分享功能才能被触发 官网

    2024年02月10日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包