在uniapp中实现微信分享功能(分享给好友+朋友圈+收藏)

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

前言:

我们现在微信开发者工具中启动项目,我们点击三个点点就是进行调取下方分享界面,在开始的时候显示如下:是没有权限去分享的文章来源地址https://www.toymoban.com/news/detail-588723.html

uniapp分享到微信朋友圈,小程序,uni-app,微信小程序,Powered by 金山文档

方法:

一、在common下新建share.js公共的js文件,方便可以在全局页面中都可以进行使用分享功能

uniapp分享到微信朋友圈,小程序,uni-app,微信小程序,Powered by 金山文档

二、在share.js文件中添加内容

export default{
    // 监听用户点击右上角菜单的「转发」按钮时触发的事件
    onShareAppMessage() {
        // 设置转发的参数
        return {
            title: "标题",
            // path: '',
            imageUrl: "",
            success: function(res) {
                console.log(res, '发生过是');
                if (res.errMsg == 'shareAppMessage:ok') {
                    console.log("成功", res)
                }
            },
            fail: function(res) {
    
                console.log("失败", res)
    
            }
        }
    },
    // 分享到朋友圈
     onShareTimeline:function(res){
        return {
          title: '分享给朋友的标题',
          imageUrl:'/images/logo.png',
          query:''      
        }
      },
      // 收藏
      onAddToFavorites:function(res) {
        return {
          title: '微信收藏上的标题',
          imageUrl:'/images/logo.png',
          query: '',
        }
      }
}

三、在main.js下进行引入及配置

import share from "@/common/share.js"
Vue.mixin(share)
const app = new Vue({
    ...App,
    store,
    share
})

四、效果如图所示:

uniapp分享到微信朋友圈,小程序,uni-app,微信小程序,Powered by 金山文档

五、在真机调试下就可以进行分享了

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

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

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

相关文章

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

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

    2024年02月16日
    浏览(65)
  • uniapp 微信小程序中实现“发送给朋友”和“分享到朋友圈”

    先新建一个js文件,内容如下: 在main.js中引入 完成上面两步后,每个页面都会有分享按钮了,在页面的 data 里面可以单独设置参数了 效果图如下

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

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

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

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

    2024年02月16日
    浏览(54)
  • 微信小程序 - - - - - 转发分享(发送给好友、分享到朋友圈)

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

    2024年02月09日
    浏览(69)
  • uniapp微信小程序全局实现发送给朋友、分享到朋友圈功能(不需要每个页面都配置)

    使用uniapp开发小程序的过程中需要实现: 点击右上角,展开,发送给朋友、分享到朋友圈功能 我们先看没有配置时微信的分享和转发按钮的状态: 配置完成后分享和转发按钮的状态: 接下来分享全局实现的步骤(不需要在每个页面单独配置): 在utils文件夹下新建share.js文

    2024年04月14日
    浏览(68)
  • 微信小程序嵌套的H5使用小程序分享(分享微信好友或朋友圈)

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

    2024年02月13日
    浏览(63)
  • uni-app中实现微信小程序/公众号订阅消息推送功能

    👨🏻‍💻 热爱摄影的程序员 👨🏻‍🎨 喜欢编码的设计师 🧕🏻 擅长设计的剪辑师 🧑🏻‍🏫 一位高冷无情的编码爱好者 大家好,我是全栈 IT 工程师摘星人 欢迎分享 / 收藏 / 赞 / 在看! 开发业务时时常遇到需要向用户发送一些通知,如欠费通知、会员到期通知等等。

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

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

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

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

    2024年02月11日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包