小程序中的各种坑

公司准备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设置透明度，就可以实现图片透明，子容器中的文字不透明；
代码：

 
    
        测试测试测试测试测试测试
    
    
  

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样式

 {{region[0]}}/{{region[1]}}/{{region[2]}} 

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)可以；

效果如下：

image.png

原大小：

image.png

9、小程序如何阻止事件冒泡
正常事件绑定使用的是bindtap，但是该方法无法阻止事件冒泡，这样就会触发父元素绑定的事件，小程序提供另一种方法来解决该问题，使用catchtap事件替换bindtap即可；

待更新。。。。