组件属性来自他人：这个比较好
https://www.cnblogs.com/yang-shuai/p/6899430.html
官方：东西比较少，基本的属性没有。
https://developers.weixin.qq.com/miniprogram/dev/component/label.html
下面这个组件都有 属性全面介绍
https://www.w3cschool.cn/weixinapp/3glu1q92.html
但是没有例子，我来写一下
一。button
几个button组件样式：
//www.greatytc.com/p/93d7104be420
1.1去除系统边框
在你button的wxss里加一段代码就行了
.submitBtn::after{
border: none;
}
屏幕快照 2019-06-20 下午12.42.00.png
<button class='submitBtn' bindtap="submitBtnClick">提交</button>
.submitBtn{
position: absolute;
margin-top: 50px;
left: 26px;
right: 26px;
font-size: 16px;
color: green;
background: yellow;
border-radius: 5px;
border:5px solid red;
}
.submitBtn::after{
border: none;
}
2。button背景图片：
wxss这个只支持网络获取的
background-image: url(https://xxx/xxx.pmg);
- 本地图片是不支持在css中被引用资源的
- 会降低页面的渲染速度，内联样式
- 一个可以转换成base64的条件：如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。
from:https://www.cnblogs.com/coco1s/p/4375774.html
4.小程序运行报错：“Failed to load local image resource xxx.png the server responded with?
<image class='btnImg' src="../../imgs/mapTag.png"></image>
路径不对，改为src="/imgs/mapTag.png"
效果：
屏幕快照 2019-06-20 下午4.24.43.png
<image class='btnImg' src="/imgs/myWalletImg.png"></image>
<button class='submitBtn' bindtap="submitBtnClick">提交
</button>
.submitBtn{
position: absolute;
margin-top: 50px;
left: 6%;
right:6%;
height: 50px;
color: green;//字体颜色
border-radius: 5px; //圆角
border:5px solid red;//边框宽度与颜色
font-size: 16px;//字体大小
background-color: rgba(255,255,255,0);//透明背景
}
.submitBtn::after{
border: none;//去除系统边框
}
.btnImg{
position: absolute;
margin-top: 50px;
height: 50px;
width: 88%;
}
只要imag放在button前面，大小位置一样，button背景透明即可，background-color: rgba(255,255,255,0);。
button 的文字居中
display: flex;
align-items: center;
justify-content: center;
二。image
微信小程序image图片的填充方式
https://www.w3cschool.cn/weixinapp/weixinapp-image.html
三 text
//www.greatytc.com/p/ae1a207a63d6
屏幕快照 2019-06-21 上午11.08.31.png
//shuxing
屏幕快照 2019-06-21 上午11.08.42.png
四input
属性：
https://www.w3cschool.cn/weixinapp/3glu1q92.html
实例：
IMG_0444.PNG
<!--输入框-->
<input
class='names'
placeholder-class="phcolor"
placeholder='老虎转账leme'
maxlength="11"
type = "idcard" //键盘类型 删掉
value="扭一下" //值
style="width:111px;height:81px"
bindinput="bindKeyInput" //改变
bindblur='bindblurEvent'
></input>
/*输入框*/
.names{
position: absolute;
left: 28px;
height: 18px;
width: 200px;
top: 30px;
color: black;
background-color: red;
}
.phcolor{
color: rgb(141, 107, 134);
}
-------------------------------------------
data: {
inputValue: ''
},
bindKeyInput: function (e) {
console.log('输入内容触发input事件5', e.detail)
this.setData({
inputValue: e.detail.value
})
},
bindblurEvent: function (e) {
console.log("失去焦点时", e.detail)
},
//button点击事件
submitBtnClick:function(){
console.log('xxx',this.data.inputValue);
},
屏幕快照 2019-06-24 上午11.36.26.png
