微信小程序组件属性

组件属性来自他人：这个比较好
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组件样式：
https://www.jianshu.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);

1. 本地图片是不支持在css中被引用资源的
2. 会降低页面的渲染速度，内联样式
3. 一个可以转换成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

https://www.jianshu.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