浅谈成都小程序开发使用button按钮分享

来源:成都网站建设 栏目:网站建设 时间:2022-01-19 浏览量:222
文字大小


关于小程序的分享按钮


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


用户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;
}

        以上就是成都小程序开发小编和大家分享的使用button按钮分享!如果您有其他网站建设、小程序开发、app开发问题可以随时和我们联系,联系电话:18180487356。

Recommendation

推荐文章

浅谈成都网站建设公司搭建网站的费用情况是怎么样呢?

公司网站建设具体怎么做才能有实际网络营销效果

关于公司网站建设新网站如何有效推广获取流量

祝贺我司第二次签约迈普通信信息化平台设计

咨询热线:15008253244
微信客服咨询

嘿!有什么能帮助您的吗?