小程序中的button按钮
一.button的外观属性
1.size属性:设置button的大小,可选值有"default"(默认)、"mini"(小尺寸)
<button size="default">默认按钮</button>
<!-- 当button不设置size属性时取默认大小 --><button size="mini">小尺寸按钮</button>
2.type属性:设置button的颜色,可选值有"default"(默认)、"primary"(绿色)、"warn"(红色)
<button type="default">默认按钮</button>
<!-- 当不设置type属性时取默认颜色 --><button type="primary">绿色按钮</button>
3.plain属性:设置button是否镂空
<button plain>镂空按钮</button>
<!-- 也可以写成plain="{{true}}" -->
<!-- 写成plain="{{false}}"则效果不生效 -->
4.loading属性:设置button是否处于加载状态
<button loading>加载按钮</button>
<!-- 也可以写成loading="{{true}}" 同上 -->
无论是button的大小还是颜色,通过设置属性值来改变其外观是十分受限的,因此不必拘泥或受限于小程序button内置的属性,可以通过添加样式的方法来改变button的外观。
二.button的开发能力(open-type属性)
1.contact值:点击按钮打开客服对话(需要真机调试)
具体步骤:
1)将测试号改为自己的appid,若一开始就使用appid开发则忽略此步骤
2)打开小程序官网添加客服微信
<button open-type="contact">点击按钮打开客服对话</button>
<!-- share、launchApp、openSetting、feedback值写法一致 不再一一列举代码块 -->
2.share值:分享当前的小程序给微信好友,但不能分享到朋友圈
3.launchApp值:在小程序中直接打开APP,但需要先在该APP内打开该小程序
4.openSetting值:打开小程序内置的授权页面,但只会出现用户曾经点击授权过的权限
5.feedback值:打开小程序内置的意见反馈页面,需要真机调试(将测试号改为appid)
6.getPhoneNumber值:获取当前用户的手机号码信息,但只能获取加密后的信息,不是企业的小程序账号没有权限获取用户的手机号码(想要查看解密的号码,需要自己搭建小程序的后台服务器,在后台服务器中解析,然后再返回到小程序中)
当设置open-type的值为getPhoneNumber时,应相对应的设置bindgetphonenumber用来绑定事件,该事件是一个被定义在js文件中的函数,当用户点击按钮时该函数被执行,并且返回用户的手机号信息
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
<!-- getPhoneNumber是函数名 该函数在该页面下的js文件中被定义 并且在点击按钮的时候被执行 -->
//参数e是一个对象,用于接收点击按钮后返回的信息
getPhoneNumber(e){console.log(e)//在控制台中输出返回的信息//用户的手机号信息包含在e对象中
}
7.getUserInfo值:获取当前用户的个人信息(头像、用户名、年龄、籍贯等),同getPhoneNumber,当设置open-type的值为getUserInfo时,应相对应的设置bindgetuserinfo用来绑定事件,该事件是一个被定义在js文件中的函数,当用户点击按钮时该函数被执行,并且返回用户的个人信息
<button open-type="getUserInfo" bindgetuserinfo="getUser">点击按钮获取用户个人信息</button>
getUser(e){console.log(e)//在控制台输出用户的个人信息(包含在e对象中)
}
小程序中的button按钮相关推荐
- 微信小程序如何通过button按钮实现分享(转发)功能
微信小程序如何通过button按钮实现分享(转发)功能 导读:微信小程序通过button按钮实现分享(转发)功能 有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答.... 微信小程 ...
- 如何去除微信小程序里面的button按钮边框
1.今天在做小程序项目的是后遇到了一个问题,就是我使用了button按钮,但是它会显示边框,我怎么都去不掉,不知道这个样式问题大家遇到过没有. 2.后来通过查阅资料找到了两种解决方法 2.1 一种:因 ...
- 微信小程序中更改button的样式
Button按钮 <button class='getCodeView firstListLineStyle'disabled='{{disabled}}' </button> Bu ...
- 微信小程序中好看的按钮样式(渐变色)、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
好看1: .wxss /* 从上往下渐变 */ .bt_1{margin-top: 40rpx;background: linear-gradient(#ccfbff, #ef96c5); } 好看2 ...
- 微信小程序点击button按钮后重置输入框等表单内容
效果如图 wxml如下图 在js文件中设置 /*** 重置条件*/resetSalaryBtnClick: function (e) {this.setData({minben: "&quo ...
- 【图片按钮】在微信小程序中实现图片按钮
目录 一.示例代码 二.核心点 一.示例代码 今天正好遇到这个问题,顺便就分享一下. 一开始是示例代码,不重要,可以跳过直接看后面. 第一段代码是前端代码 <!--index.wxml--> ...
- 微信小程序中多个button/view组件中进行切换时改变样式
在小程序项目中遇到一个问题:数据分成四五个小组,然后要进行小组切换,切换的同时把button的样式也要改变,以前Dom操作的时候特别简单, 现在在小程序中竟不知从何下手,后面参照了这边博文:http: ...
- 微信开发修改button里的字体大小_在微信小程序中如何修改文字大小
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下 本文 ...
- php取消滑动条,小程序中button以及滚动条默认样式如何清除(代码)
本篇文章给大家带来的内容是关于小程序中button以及滚动条默认样式如何清除(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如下图所示的效果,用四个button实现: 在 ...
最新文章
- JGG | 肠道细菌加重小分子量卡拉胶诱发的直肠炎症
- (003) java后台开发之设置Eclipse代码提示和快捷键
- bootstrap17-响应式表格布局
- Android开发之显示截图动画效果直到消失
- hdu 5094 Maze
- python中调用万年历_python 打印万年历
- 树莓派3B+ (PPOE+hostapd)变身无线路由器
- SSM框架之Spring MVC(一)
- winform根据字符串生成HTML静态页
- QAliber - 介绍一款开源的GUI自动化测试工具
- Javaweb 网上订餐系统
- java图片旋转90度_Java实现图片内容无损任意角度旋转
- Linux搭建SVN服务器
- 通过IP地址获取对方MAC地址的命令
- 服务器ip被封一般是什么情况?
- vue处理PDF文档流数据并实现PDF的预览以及打印功能以及处理PDF打印乱码问题
- centos7+ 安装RabbitMQ
- 张志华-统计机器学习
- 贴片电容介质X5R与X7R之间的区别
- VMware虚拟机系统没有声音?
热门文章
- romantic math
- 【Inno Setup】 仿QQ浏览器源码
- oracle 修改序列 next number,oracle序列详解
- CAD标注设置精度的方法
- 关于Java向上取整和向下取整(天花板函数)的说明
- 聊聊几乎已成为现代事实标准的“box-sizing: border-box”
- 我用css3为好友胡歌的宝宝做了一个动画照片墙
- 计算机开机慢怎么办,我的电脑开机很慢,一直优化也没多大改变,该怎么办?...
- Android仿企业微信/钉钉通信录水印背景
- android activity 重复onCreate问题