小程序模板下载与定制平台
客服QQ客服QQ 客服微信客服微信 公众号公众号

微信小程序使用button实现分享的开发教程

在做项目的过程中,有这么一需求,  用户A可以将当前的商品分享给别的用户B,  用户B点击查看时,可以直接定位到当前的商品。  

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

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

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

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

<buttoncatchtap="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;  

}  

TAG标签:小程序button分享

上一个:微信小程序传递参数的三种方法 看完发现这么简单
下一个:微信小程序实现点击拍照长按录像的开发教程

小程序模板

免责声明:本站资源均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。

咨询客服

QQ:1847629575

全年 09:00-23:00

(其他时间请留言)

在线客服

Copyright©2021 www.why114.com 瓦窑模板 版权所有 鲁ICP备20017802号

展开