微信小程序使用button按钮分享


帮企商城 2021-09-13 15:28:11

图怪兽_27e743ebe46c8effae6442bf24b9e439_14723.jpg

关于小程序的分享按钮

在做项目的过程中,有这么一需求,

用户A可以将当前的商品分享给别的用户B,

用户B点击查看时,可以直接定位到当前的商品。

经过一番学习,找到了 button 控件中的  open-type='share' 

<button open-type='share'>分享</button>

小程序文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

步骤一、

先在界面上,放置 button 按钮,并绑定函数 "shareView" (建议用 catchtap 绑定 ,不用 bindtap 防止点击冒泡)
 

<button catchtap="shareView" open-type='share'>分享</button>
步骤二、

定义点击之后的函数操作(函数名:shareView)

shareView:function(e)
{ 
    return { 
        title: 'xx小程序',//分享内容(为空则为当前页面文本)
        path: 'pages/index/index?id=123&age=18',//分享地址 路径,传递参数到指定页面。(为空则为当前页面路径)
        imageUrl: '../../imgs/xx.png',//分享的封面图(为空则为当前页面)

    success: function (res) {
      console.log("转发成功:" + JSON.stringify(res));
    },
    fail: function (res) {
      console.log("转发失败:" + JSON.stringify(res));
    }
    } 
}

步骤三、

一般自定义按钮和button组件的样式会有冲突, 下面代码就是更改button组件的样式的:

button::after {
  border: none;
}

button {
  background-color: #fff;
}


相关阅读:

春哥团队获得1000万元投资将用于开发各种商业源码系统

春哥技术团队在京发布春哥数字人系统CGDigitalPersonSystem

春哥团队8周年:帮助更多的人实现在家创业赚钱

帮企商城国庆狂欢盛宴 放“价”到底!

脱单盲盒项目,日入过万不是梦!2021年最大风口项目!

如何给我们春哥团队付款?

微信小程序日常开发中常遇到的错误代码

小程序前端直传阿里云oss

微信小程序之image组件

解决微信小程序switchTab不能带参方法