WePy小程序问题汇总

框架：Wepy小程序框架 + Vant移动端组件库

---

问题1：

• 项目测试中发现若干页面样式在一些华为手机上出现了适配问题，页面底部内容被虚拟键盘遮挡，无法显示完全。

产生原因：

• 因为虚拟键盘位于界面的可视区域，并且占据了页面下方一定的高度。

解决方法：

1. app.wpy 页面获取设备品牌，设置为全局变量。获取系统信息API参考链接

   // 获取手机系统信息
   wx.getSystemInfo({ 
       success(res) {
           const brand = res.brand;
           if (brand.search('HUAWEI') !== -1 || brand.search('HONOR') !== -1) {
               that.globalData.isHuaWei = true;
               that.$apply();
           }
       }
   })

2. 在需要兼容的页面，获取全局变量，区分手机型号进行样式重置。（增高页面下边距padding,生成垂直滚动条）

   onLoad () {
       this.isHuaWei = this.$parent.globalData.isHuaWei;
   }

---

问题2：

• 在使用三目运算符时eslint检查报错：Unnecessary use of boolean literals in conditional expression.eslint(no-unneeded-ternary)

解决办法：

// 错误方式：
this.isAddedValueTax = result.invoiceType === 'Common'? false : true; 
// 正确方式：
this.isAddedValueTax = result.invoiceType !== 'Common';

---

问题3：

• 当用户多次快速点击发送验证码按钮，触发接口频率太高，接口报错

解决办法：

前端为发送验证码按钮，做倒计时限制。

<view class="code">
    <input type="number" placeholder="请输入验证码" data-type="code" bindinput="bindInput" />
    <text class="send-code" wx:if="{{codeShow}}" @tap="sendCode">获取验证码</text>
    <text class="send-code" wx:if="{{!codeShow}}">{{count}}s</text>
</view>

data = {
    codeShow: true, // 是否显示发送验证码
    timer: null,
    count: '',
};

// 发送验证码倒计时限制
sendCode() {
    if (this.codeShow) { // 初次点击先发送验证码，再触动更新btn名称，启动倒计时
        this.sendPhoneCode();
        this.codeShow = false;
    }
    if (!this.codeShow && !this.timer) {
        this.count = 60;
        this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
                this.count--;
                this.$apply();
            } else {
                this.codeShow = true;
                clearInterval(this.timer);
                this.timer = null;
                this.$apply();
            }
        }, 1000)
    }
},