【小程序，h5页面】 踩坑之路

1.【小程序】IOS端在showLoading和hideLoading之后showToast会不显示

解决办法：在获取数据之后，设置定时器显示showToast

eg: setTimeout(function(){
      wx.showToast({
	    title: res.data.message,
	    icon: 'none'
      });
    },100)

2. 【小程序】1rpx border 在IOS端显示不全问题

解决办法：试过将 width 设置为 min-width，解决了一部分
后来发现将border: 1rpx 改成 border: 1px 就好了，在iPhone X上没有问题

3. 【H5页面】img标签 在IOS端不显示图片

解决办法：将改用div标签，图片设置被背景图显示：background-image: url("");

4. 【H5页面】定位，拒绝授权后获取定位授权弹框不再显示

一开始也很头疼，不知道是哪里的问题，为什么拒绝授权之后就不再出现呢，苹果这么傲娇的吗…

之后看到 这个博客 终于知道了原因和解决办法，但是真的好鸡肋啊，因为定位拒绝都被缓存手机授权隐私里面，就像第一次进入APP向你申请的权限，又或者网页的广告连接被拉进黑名单里，就再也不弹出来了。
解决办法：

手机设置：
（设置）Settings -> （通用）Genera -> （重置） Reset-> （重置定位于隐私）Reset Location & Privacy.
（设置）Settings ->( 隐私）Privacy 开启 Location Services.

5.【小程序】 横向滚动，隐藏滚动条

• 横向滚动要对scroll-view 设置宽度，添加 white-space: nowrap; 对滚动区域内容进行不换行处理。

 .scroll_H{
  	white-space: nowrap;
}
.scroll-item_H{
 	width:335rpx;
 	height:420rpx;
 	background:rgba(255,255,255,1);
 	box-shadow:0px 4rpx 15rpx 0px rgba(153,153,153,0.24);
 	border-radius:6rpx;
 	display: inline-block;
}

• 隐藏滚动条，在最外层套一个view。原理就是内部元素高度大于外部元素的高度，然后外部通过 overflow-y: hidden 将滚动条直接隐藏

 .scroll-view{
	 height: 400rpx;
	 overflow-y: hidden
 }

6.【小程序】 修改按钮默认样式

• 宽度要加上 !important
  高度要设置min-height, 并加上 !important

或者

• 将app.json 里基础组件样式"style": "v2",删除

7.【小程序】用数字控制循环次数

就像在vue里面，可以直接v-for="5"，就能循环5次，那样小程序上是这样的：
在页面对应的js文件，data里添加参数：starNum: 5,
而页面上这样写：wx:for="{ {starNum-0}}"

	 xxx... 

8.【小程序】修改checkbox样式

之前遇到一个需求，很普遍的需求，提交订单的时候会有个协议，默认不勾选，需要用户自己勾选。

想过radio组件，因为样式很接近，都是圆圆的，改个颜色就好。但是问题是，用户可以取消选择。

这样就有点麻烦了，而这个交互就是checkbox可以做到，但是它原生样式勾选框是方型的。

之后上网看到这一篇文章，解决了这个样式问题。

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 44rpx;
   height: 44rpx;
}
/* 选中后的 背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: #108EE9;
}

9.【小程序】swiper组件一直只要滑动就会触发事件

在swiper组件 bindchange 绑定的事件中，添加判断

 if (e.detail.source === 'touch') {
       xxx...
 }

10.【小程序】用户信息 样式

建议不要用 去获取

最好是用户授权获取的 userInfo，再用普通组件去显示

因为试过 组件显示的头像姓名性别，布局上在模拟器没问题，真机就会有问题

11.【小程序】textarea穿透弹框

出现很奇怪的现象，textarea会穿透自定义的弹框组件，如何设置双方的层级都不能解决。之后是看到网上这一篇文章后才解决的。

思路就是，当弹框显示的时候，将textarea隐藏起来，但是通过蒙版还是能看到底部的内容，所以就要用text组件将文本内容同样显示出来。

textarea组件会穿透页面底部的按钮，不过应该是因为底部按钮是绝对定位，使用了 position: fixed；所以我调了层级z-index就不再能穿透

12. 【小程序】人民币符号（￥）显示不一致的问题，使用半角的“¥”

问题是这样的：

安卓真机上，“￥”字符有的手机会显示一横，有的显示两横。就觉得很奇怪，为什么会这样，直到看到这篇文章才知道原来是因为用的是全角的“￥”，会受系统影响，而半角“¥”基本不受影响。

不过我发现搜狗输入法和QQ输入法输入不了半角的“¥”，即使已经选择半角输入。

尽量使用半角“¥”，用鼠标去选中，会发现全角比半角“¥”宽。

这个是半角的（¥）
这个是全角的（￥）

持续更新，有更好的解决方法希望能留下你的足迹，谢谢