微信小程序-自定义button、checkbox组件

问题描述

微信小程序开发过程中，经常会存在需要自定义一些组件的情况，接下来我们介绍这次开发小程序我遇到的自定义button和checkbox。

自定义button

除了简单的用view或者其他标签模拟，加上背景图片完全放飞自由，还有特定需要button按钮，比如需要用微信自带的分享转发功能，有几点需要关注：

<button class='btn btn-default' hover-class="none" open-type='share'>分享看群关系</button>

1.设置open-type='share'
2.重置样式 button{ background-color: transparent;}
3.书写按钮自定义样式

.btn-default{
    width: 170px;
    height: 49px;
    background-image: url(http://140.206.163.105/test/zsgws/btn-share1.png);      
    background-size: 170px 49px;
    -webkit-background-size: 170px 49px;
}

4.去除边框 button::after{ border: none;}
这里写图片描述
可以看到按钮四边有一条不是很明显的边框，可以通过上面样式处理掉。
5.去除点击态，hover-class="none" ，点击的时候会有点击态，一般是白色背景

自定义checkbox

checkbox组件默认比较大，在我的这种场景下需要重置它，当然也可以自己去模拟。
这里写图片描述

1.样式重置，也就是小程序渲染出来HTML页面checkbox是这个类名.wx-checkbox-input样式优先级还得达到11才能重置。

//复选框，可以更换图标样式
checkbox .wx-checkbox-input{
    width: 18px;
    height: 16px;
    border: 0;
    background: none;
}
//对勾的样式，可以更换图标样式
checkbox .wx-checkbox-input:before{
      display: none;
}

2.这里我的没有修改图标样式，而是对目前的元素进行了缩小来满足需求

checkbox{
    transform: scale(0.5) translateY(-3px);
    transform-origin: center right;
}

总结

其实要是能看到小程序在web上的代码就能针对性的自定义样式修改了，目前先介绍这两个组件，其他组件有遇到再补充上来。有哪位同学知道怎么看小程序的实现源码吗？