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

点击下方标题可快速定位

1.【小程序】IOS端在showLoading和hideLoading之后showToast会不显示
2. 【小程序】1rpx border 在IOS端显示不全问题
3. 【H5页面】img标签在IOS端不显示图片
4. 【H5页面】定位，拒绝授权后获取定位授权弹框不再显示
5.【小程序】横向滚动，隐藏滚动条
6.【小程序】修改按钮默认样式
7.【小程序】用数字控制循环次数
8.【小程序】修改checkbox样式
9.【小程序】swiper组件一直只要滑动就会触发事件
10.【小程序】用户信息 `` 样式
11.【小程序】textarea穿透弹框
12. 【小程序】人民币符号（￥）显示不一致的问题，使用半角的“¥”

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-view class="scroll_H" scroll-x="true" style="width: 100%"><view class="scroll-item_H"></view><view class="scroll-item_H"></view><view class="scroll-item_H"></view></scroll-view>

 .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 将滚动条直接隐藏

<view class="scroll-view"><scroll-view class="scroll_H" scroll-x="true" style="width: 100%"><view class="scroll-item_H"></view><view class="scroll-item_H"></view><view class="scroll-item_H"></view></scroll-view></view>

 .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}}"

<block wx:for="{{starNum-0}}" wx:for-index="sindex" wx:key="sindex"><view> xxx... </view>
</block>

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.【小程序】用户信息 `<open-data>` 样式

建议不要用 <open-data type="userNickName"/> 去获取

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

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

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

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

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

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

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

问题是这样的：

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

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

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

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

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