微信小程序组件属性微信小程序组件属性

组件属性来自他人：这个比较好
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

.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?

路径不对，改为src="https://www.it610.com/imgs/mapTag.png"
效果：

文章图片
屏幕快照 2019-06-20 下午4.24.43.png

.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); 。
二。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 【微信小程序组件属性】

/*输入框*/ .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); },