公司准备APP和小程序并行开发，所以需要开始着手小程序的编写，由于之前只是写过小程序demo，系统开发还是第一次，此篇文章记录小程序中遇到的各种坑。
1、小程序button按钮自带边框效果，而且直接设置border无法去掉，需要设置：after的样式
.login-user-code button {
border: 1rpx solid #ffd530;
}
.login-user-code button::after {
border: 1rpx solid #ffd530;
}
2、登录后跳转到首页时，如果首页在tabBar中设置了路径，就不能用wx.navigateTo跳转，需要用wx.switchTab跳转才能成功；
3、给view设置背景图片的时候，不能用本地图片，会导致无法加载。
background: url('../image/bisai-diwen.png' ) no-repeat center;
image.png
使用网络图片后正常
background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;
4、这个不算小程序的坑，之前H5没写过，刚知道，设置背景图片透明，但是文字不透明；
需要用两个view来实现，父容器设置背景图片，子容器通过rgba设置透明度，就可以实现图片透明，子容器中的文字不透明；
代码：
<view class='study-body'>
<view class='study-body-bg'>
测试测试测试测试测试测试
<view class='study-body-list'></view>
</view>
</view>
css代码：
父容器
.study-body {
width: 100%;
/* height: 800rpx; */
background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;
background-size: cover;
padding-bottom: 50rpx;
}
子容器
.study-body-bg {
background:rgba(255, 255, 255, 0.7);
}
效果对比：
image.png
image.png
5、小程序中view实现内容超出后不换行，显示为左右滑动，而且隐藏滚动条；
省市级三级联动中，小程序内置了组件，直接用picker组件，设置
mode="region"即可，但是内哦让区域无法用input显示，只能用view，所以会出现省市县名称过长时超出view宽度；wxml样式
<view class="picker"> {{region[0]}}/{{region[1]}}/{{region[2]}} </view>
wxss样式为
.picker{
line-height: 60rpx;
overflow-x: auto;
white-space: nowrap;
}
.picker::-webkit-scrollbar {
display: none
}
最终显示效果为：
image.png
6、小程序中video标签无法设置定位；
在小程序中播放视频的时候，我们是希望视频播放器固定于页面顶部，下面的视频列表是可以滑动的，但是设置video的fixed定位的时候发现，在开发工具中是正常的，但是在手机端会导致屏幕无法定位。
解决方案：将其他需要滑动的内容全部放在scroll-view标签中，并且设置scroll-view的高度不能超过屏幕高度，即667px;
image.png
7、video层级过高问题;
video的层级太高，就会导致video视频画面无法再添加我们想添加的东西。设置z-index也无效，比如你想在视频页面添加vip按钮，提示用户该视频需要vip权限，这个情况，微信提供了cover-view标签，将内容放到cover-view标签中，在设置定位样式即可；
微信小程序官方说明截图：
image.png
8、小程序中更改radio的大小；
使用radio组件的时候，发现选择的图标无法更改大小，设置width和height后不生效，查看后发现设置transform:scale(0.7)可以；
<label><radio color='#EB0000' style='transform:scale(0.7)' value="{{item.id}}" /></label>
效果如下：
image.png
原大小：
image.png
9、小程序如何阻止事件冒泡
正常事件绑定使用的是bindtap，但是该方法无法阻止事件冒泡，这样就会触发父元素绑定的事件，小程序提供另一种方法来解决该问题，使用catchtap事件替换bindtap即可；
待更新。。。。
