精华内容
下载资源
问答
  • 2020-07-15 15:16:19

    微信官方文档

    分享所需要的条件

      小程序页面默认为不开启朋友圈分享 需要开发者进行手动设置 需满足以下条件 才能开启朋友圈分享

      1. 页面需设置允许“发送给朋友 官方文档 Page.onShareAppMessage 通常是在页面js文件中加入这段函数即可 也可以自定义转发内容 更多去官方文档查看

    onShareAppMessage: function() {} 
    

      2. 满足条件 1 后,页面需设置允许“分享到朋友圈”,同时可自定义标题、分享图等,自定义数据等。 官方文档 Page.onShareTimeline 接口文档

      - 我们需要在页面进来后去调用官方文档 wx.showShareMenu 这个接口 去设置需要转发的按钮

        wx.showShareMenu({
          withShareTicket: true,
          // shareAppMessage表示“发送给朋友”按钮,shareTimeline表示“分享到朋友圈”按钮 
          // 这里选择两个都开启
          menus: ['shareAppMessage', 'shareTimeline']
        })
    

    监听右上角菜单“分享到朋友圈”按钮的行为,并自定义发享内容。

      只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮自定义转发内容

      - 这里我们需要用到官方文档 wx.onShareTimeline 这个接口 去监听用户点击了分享到朋友圈按钮
      - 此函数需要返回一个Object,用于自定义分享内容

    	onShareTimeline: function () {
    		return {
                title: 自定义标题,默认值小程序名称
                imageUrl:自定义图片路径,支持本地文件或者网络图片,仅支持PNG及JPG, 默认使用小程序 Logo
                query:自定义页面路径中携带的参数  如 'a=' + a + '&b=' + b,默认值为当前页面路径携带的参数
    	    }
    	},
    

    注意事项

      - 当页面数据为onLoad里上一个页面传来的id再去接口请求时 如果没有其他的需要 一般不需要传query 因为query的默认值就是为当前页面路径携带的参数
      - 但如果你的数据为全局变量 或者 本地缓存时 那你请注意了

      onLoad: function(options) {
           var info = app.globalData.info
           var value = wx.getStorageSync('key')
      }
    

      - 这两个例子 都会导致分享页面出错 因为单页面模式不能访问这些数据 这时候需要通过 传query解决这个问题

        //用户点击右上角分享朋友圈 
      onShareTimeline: function () {
    		return {
                title: this.data.info.title,
                query: 'info=' +  JSON.stringify(this.data.info) + '&value=' + JSON.stringify(wx.getStorageSync('key')),
                imageUrl:this.data.info.image[0] 
    	    }
      },
      onLoad: function(options) {
           // 获取当前场景值 以适应单页面模式
           // 1154 为单页面模式的场景值
           var pathData = wx.getLaunchOptionsSync()
           if(pathData.scene==1154){
                var info = JSON.parse(options.info)
                var value = JSON.parse(options.value)
                app.globalData.info = JSON.parse(options.info)
           }else{
                var info = app.globalData.info
                var value = wx.getStorageSync('key')
           }
        }
    

    - 大佬勿喷

    - 如果觉得我写的还不错的话 可以分享 点赞

    更多相关内容
  • 截止我写这篇文章的时候,小程序应该是还没有能够直接分享朋友圈的api,转发给朋友和群是可以实现的,这篇文章主要是讲如何实现分享朋友圈,所以分享给朋友我下面还会再另外写一篇文章。 实现思路 那么既然小程序...
  • 主要为大家详细介绍了微信小程序实现分享朋友圈功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了微信小程序实现分享朋友圈的图片功能。分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅...
  • 本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕看不见的地方(定位left:1000px)...
  • 2、利用小程序生成海报保存图片到相册分享朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一、分析如何实现 相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成...
  • 首先说明一点,小程序内是不能直接分享朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持...
  • 2020年腾讯官网开放分享朋友圈功能,广大mpvue用户由于官网不更新,于是就自己更新了一下.mpvue小程序分享朋友圈功能.
  • 主要介绍了微信小程序 点击生成朋友圈分享图,本文给大家分享小编在实现此功能时遇到的各种坑,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • poster 是后端生成海报图片的一种简单方式,其适用于微信小程序海报分享,保存到相册后可以分享朋友圈
  • 实现微信小程序分享朋友圈及好友

    千次阅读 2021-11-11 22:49:53
    showShareMenu微信小程序API文档链接 注意事项 显示“分享朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享朋友圈”按钮 onLoad() { // "shareAppMessage"表示...

    显示分享按钮

    首先需要通过wx.showShareMenu实现在当前页面显示分享按钮。如不实现该代码,分享按钮为灰色不可用状态。showShareMenu微信小程序API文档链接

    注意事项
    显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

    onLoad() {
    	// "shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮
    	wx.showShareMenu({
    		menus: ['shareAppMessage', 'shareTimeline'],// 需要显示的转发按钮名称列表.合法值包含 "shareAppMessage"、"shareTimeline"
    		success(res) {
    			console.log(res);
    		},
    		fail(e) {
    			console.log(e);
    		}
    	});
    },
    

    实现好友分享

    添加Page.onShareAppMessage事件(与onLoad同级),来监听用户点击转发按钮(button 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。onShareAppMessage微信小程序API文档链接

    注意事项
    只有定义了onShareAppMessage事件处理函数,右上角菜单才会显示“转发”按钮

    onShareAppMessage() {
    	return {
    		title: '邀请您使用XXX小程序', // 分享出的卡片标题
    		path: 'pages/index/index', // 他人通过卡片进入小程序的路径,可以在后面拼接URL的形式带参数
    		imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片,默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。
    	};
    },
    

    分享按钮
    注意事项
    触发分享的容器需要经过button标签的包裹,并设置 open-type=“share”

    <button type="default" open-type="share" class="clear-style">分享</button>
    

    由于button带有自定义样式,往往与需要实现的样式有冲突,此时需要清理原有的样式

    .clear-style {
    	border: none;
    	border-radius: 0;
    	background-color: transparent !important;
    	padding: 0rpx !important;
    	margin: 0rpx !important;
    	text-align: left;
    	height: 140rpx;
    }
    .clear-style::after {
    	border: none;
    }
    

    实现朋友圈分享

    添加Page.onShareTimeline事件(与onLoad同级),来监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。onShareTimeline微信小程序API文档链接
    注意事项
    从基础库 2.11.3 开始Android平台支持朋友圈分享

    onShareTimeline() {
    	return {
    		title: '邀请您使用XXX小程序', // 分享出的卡片标题
    		path: 'pages/index/index', // 他人通过卡片进入小程序的路径,可以在后面拼接URL的形式带参数
    		imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片,默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。
    	};
    },
    
    展开全文
  • 分享朋友圈,点击进入页面图片等等资源不加载 解决方式 我之前把获取数据接口写在onShow()生命周期中,发现预览页面不会触发onShow,只会触发onLoad生命周期 将获取内容逻辑接口写在onLoad就可以触发获取数据了 ...

    问题描述

    分享到朋友圈,点击进入页面图片等等资源不加载
    在这里插入图片描述

    解决方式

    我之前把获取数据接口写在onShow()生命周期中,发现预览页面不会触发onShow,只会触发onLoad生命周期

    将获取内容逻辑接口写在onLoad就可以触发获取数据了

    在这里插入图片描述

    展开全文
  • 微信小程序分享朋友圈生成海报

    万次阅读 2019-10-22 15:05:26
    分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。(老规矩,我的博客复制粘贴就好使) 先看一下效果图: 一、先把代码写上去 index....

    微信小程序实现分享到朋友圈

    分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。(老规矩,我的博客复制粘贴就好使

    如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码, 你需要看我的另一篇博客:微信小程序生成带参数的二维码以及小程序码

    先看一下效果图:
    在这里插入图片描述

    一、先把代码写上去

    index.wxml代码:

    <view class="container">
      <image src="{{shareImage}}" class="share-image"></image>
      <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
      <button bind:tap="eventDraw">绘制</button>
      <button bind:tap="eventSave">保存到本地</button>
    </view>
    

    index.wxss代码:

    .share-image {
      width: 600rpx;
      height: 810rpx;
      margin: 0 75rpx;
      padding: 1px;
      margin-top: 40px;
    }
    button {
      margin-top: 100rpx;
    }
    

    index.js代码:

    Page({
        data: {
            painting: {},
            shareImage: '',
        },
        onLoad() {
            this.eventDraw()
        },
        eventDraw() {
            var that = this;
            wx.showLoading({
                title: '绘制分享图片中',
                mask: true
            })
            this.setData({
                painting: {
                    width: 375,
                    height: 568,
                    clear: true,
                    views: [
                      //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/weixin/item/bai.jpg',
                        width: 375,
                        height: 568
                      },
                      //边框,直接拿了一张图,当做边框
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/weixin/item/biankuang.png',
                        width: 375,
                        height: 568
                      },
                      //商品图
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/seafood/public/commercial/19/goodsimg/20191014/d4484c7f364078fffad452d2e158636b.jpg',
                        width: 328,
                        height: 328,
                        top:20,
                        left:22,
                      },
                      //商品名称
                      {
                        type: 'text',
                        content: '产品名称产品名称产品名称产品名称产品名称产品名称11111111111111111111111111111111111111111111',
                        fontSize: 20,
                        lineHeight: 21,
                        color: '#000000',
                        textAlign: 'left',
                        top: 360,
                        left: 36,
                        width: 290,
                        MaxLineNumber: 2,
                        breakWord: true,
                        bolder: true
                      },
                      //线条,同样也是用的图
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/weixin/item/xiantiao.png',
                        width: 325,
                        height: 5,
                        top: 443,
                        left:22
                      },
                      //商品价格
                      {
                          type: 'text',
                          content: '¥198.00',
                          fontSize: 20,
                          color: '#E62004',
                          textAlign: 'left',
                          top: 414,
                          left: 36,
                          bolder: true
                      },
                      //店铺名称
                      {
                        type: 'text',
                        content: '店铺名称店铺名称',
                        fontSize: 15,
                        lineHeight: 21,
                        color: '#7E7E8B',
                        textAlign: 'left',
                        top: 414,
                        left: 267,
                        width: 70,
                        MaxLineNumber: 1,
                        breakWord: true,
                      },
                      // 文字, 打不出这个文字带阴影的效果, 所以也用的图
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/weixin/item/wenzi.png',
                        width: 145,
                        height: 75,
                        top: 460,
                        left: 36,
                      },
                      //二维码
                      {
                        type: 'image',
                        url: 'https://tjhaizhixian.com/Public/Home/images/banner/min_code.jpg',
                        top: 455,
                        left: 260,
                        width: 85,
                        height: 85
                      },
                    ]
                }
            })
        },
        eventSave() {
            wx.saveImageToPhotosAlbum({
                filePath: this.data.shareImage,
                success(res) {
                    wx.showToast({
                        title: '保存图片成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        },
        eventGetImage(event) {
            console.log(event)
            wx.hideLoading()
            const {
                tempFilePath,
                errMsg
            } = event.detail
            if (errMsg === 'canvasdrawer:ok') {
                this.setData({
                    shareImage: tempFilePath
                })
            }
        }
    })
    

    index.json里面的代码:

    {
      "navigationBarTitleText": "生成海报",
      "usingComponents": {
        //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
        "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
      }
    }
    

    组件下载地址:

    链接:https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 
    提取码:8hrj 
    

    二、对象结构

    1.数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。
    2.当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称,还是比较好理解的。

    image(图片)

    属性含义默认值可选值
    url绘制的图片地址,可以是本地图片,如:/images/1.jpeg
    top左上角距离画板顶部的距离
    left左上角距离画板左侧的距离
    width要画多宽0
    height要画多高0

    text(文本)

    属性含义默认值可选值
    content绘制文本默认为空
    color颜色black
    fontSize字体大小16
    textAlign文字对齐方式leftcenter、left、right
    lineHeight行高,只有在多行文本中才有用20
    top文本左上角距离画板顶部的距离0
    left文本左上角距离画板左侧的距离0
    breakWord是否需要换行falsetrue、false
    MaxLineNumber最大行数,只有设置 breakWord: true ,当前属性才有效,超出行数内容的显示为…2
    width和 MaxLineNumber 属性配套使用,width 就是达到换行的宽度0
    bolder是否加粗falsetrue、false
    textDecoration显示中划线、下划线效果noneunderline(下划线)、line-through(中划线)

    rect (矩形,线条)

    属性含义默认值可选值
    background背景颜色black
    top左上角距离画板顶部的距离
    left左上角距离画板左侧的距离
    width要画多宽0
    height要画多高0
    展开全文
  • 微信小程序分享朋友圈遇到的巨坑

    千次阅读 2019-07-06 15:03:40
    console.log('朋友圈分享图生成成功:' + res.tempFilePath) wx.previewImage({ current: res.tempFilePath, // 当前显示图片的http链接 urls: [res.tempFilePath] // 需要预览的图片http链接列表 }) }, fail:...
  • 简单几步实现小程序分享朋友圈

    千次阅读 2020-08-02 09:41:23
    //用户点击右上角分享给好友,要先在设置menus的两个参数,才可以分享朋友圈 onShareAppMessage:function(){ wx.showShareMenu({ withShareTicket:true, menus:['shareAppMessage','shareTimeline'] }) }, //...
  • 微信小程序分享朋友圈限制多多

    千次阅读 2020-07-23 10:09:45
    千呼万唤shi出来,在我渐渐淡忘了微信小程序可以分享朋友圈后,它又终于可以...现在想要将小程序分享到朋友圈,需要设置允许“发送给朋友”,并且定义分享朋友函数Page.onShareAppMessage和分享朋友圈函数Page.onSha.
  • 无奈现在小程序没有开放分享到朋友圈的功能,只能通过canvas生成海报,保存到手机中分享朋友圈。 说说我遇到的两个坑吧。   这是最终实现的效果图。 1 通过drawImage画图片,如果是网络图片,需要先缓存到本地...
  • 下面我们来看下具体操作,如何实现小程序分享朋友圈的! 效果图 点击朋友圈的链接即可进入一个微信原生的H5页面去展示所分享的小程序页面 谨记 适用于纯内容页面展示,也就是单页面模式展示效果。复杂的交互和...
  • 1. 獲取微信小程序二維碼 接口b 需要 scene 我用測試工具 試了n百回 都是undefinded 想問一下 到底怎麼獲取 希望能給我流程 2. 獲取到二維碼後 顯示 亂碼 我該怎麼轉成 圖文 3. 我後續要用canvas繪圖 但是...
  • 在一个完整带用户交互的小程序项目开发中,总会遇到分享这个功能,转发给好友用通用的api方法,分享朋友圈总是有各种各样的招式,一般的交互方案是生成一个带二维码的图,二维码有时候也分带参数和默认的。...
  • 我们直接开门见山,用间接的方式来实现微信小程序分享朋友圈  这里先来罗列一下实现思路 通过微信api申请小程序二维码 获取小程序二维码接口文档 下载二维码到服务器并返回url 小程序接收url并从服务器下载图片 ...
  • 本文实例讲述了微信小程序实现的自定义分享功能。分享给大家供大家参考,具体如下: 大家都知道,小程序分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 ...
  • 本文实例讲述了php实现的微信分享朋友圈并记录分享次数功能。分享给大家供大家参考,具体如下: 1.引入JS文件 2.通过config接口注入权限验证配置 3.通过ready接口处理成功验证 4.通过error接口处理失败验证 JSDK档...
  • taro版本2.2.11有用,其他未测 网上找了好多资料总结一下实现步骤 //先升级taro版本 cnpm install -g @tarojs/cli@2.2.11 //然后更新依赖 taro update project 2.2.11 //然后根据开发文档 首先在... } //分享朋友圈
  • 1、页内自定义分享 2、页面右上角“…”分享行为 ...uniapp 自定义分享单页面朋友 <button class="fenxiang rounded" open-type="share">分享</button> export default { onShareAppMessage(res) {

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,163
精华内容 13,265
关键字:

小程序分享朋友圈

友情链接: threephasefault.rar