小程序实战踩坑之B2B商城项目总结

坑一：支付完成页面，点击“完成” 按钮会触发返回的页面的onShow()生命周期 (秘坑)

以下图，原觉得是微信的页面，不会影响到小程序，实际状况下是会触发返回的页面的onShow()的。

触发bug业务场景详细描述：

由于业务须要，我会在下订单页面触发 onShow()，在onShow里面会有调取查询购物车的商品数据，若是商品数据不存在，就会跳转到首页。当用户支付完成后，返回下订单页面，触发onShow生命周期，致使调取查询购物车api，由于已经建立订单去支付了，因此购车车的商品数据就在后台不存在了，因此在 跳过去支付成功页面的那一刻，页面闪了下，异步api在执行，又马上跳回页面首页。

解决方法：

self.cancelOnShow = true;
                self.$apply();
                wx.requestPayment({
                    'timeStamp': d.timeStamp,
                    'nonceStr': d.nonceStr,
                    'package': d.package,
                    'signType': d.signType,
                    'paySign': d.paySign,
                    'success': function(res) {
                        console.log(res, '微信支付成功返回');
                        wx.setStorageSync("isSucPay", true);
                        wx.setStorageSync("orderCode", orderCode);
                        wx.navigateTo({
                            url: './paymentnote',
                            complete:function(){
                                self.cancelOnShow = false;
                            }
                        })
                    },
                    'fail': function(res) {
                        console.log(res, '微信支付失败返回');
                        wx.setStorageSync("isSucPay", false);
                        wx.setStorageSync("repayParams",{amount:balance,invoiceid:orderCode});
                        wx.navigateTo({
                            url: './paymentnote',
                            complete:function(){
                                self.cancelOnShow = false;
                            }
                        })
                    }
                });
复制代码

onsShow(){
    if(!this.cancelOnShow)
    {
        //业务代码******
    }
}
复制代码

主要是在调取支付前，经过设置 cancelOnShow 为true，而后在跳转 支付成功（失败）页面的complete回调函数，将设置cancelOnShow为false，不影响其余下次支付。有人问，将self.cancelOnShow = false;放在wx.requestPayment的 success 回调函数，在wx.navigateTo跳转以前，是否可行？我自身测试过，是不行的，缘由自身体会去。 其次，在onShow生命周期函数，要根据cancelOnShow来判断执行业务代码。

坑二：多个倒计时重碟问题

问题描述： 在一个页面若是用倒计时，若是切换到其余页面返回，会看到多个倒计时在错误重碟显示。

解决代码以下：

/**
     * 清除interval
    * @param that
    */
   clearTimeInterval: function (that) {
      var interval = that.data.interval;
      clearInterval(interval)
    },
   
   /**
     * 生命周期函数--监听页面卸载
     * 退出本页面时中止计时器
    */
   onUnload:function () {
        var that = this;
        that.clearTimeInterval(that)
   },
 
   /**
     * 生命周期函数--监听页面隐藏
     * 在后台运行时中止计时器
    */
   onHide:function () {
        var that = this;
        that.clearTimeInterval(that)
   }
复制代码

在tab页面，运用 onHide 周期 进行 clearTimeInterval , 在 非tab页面，运用onUload() 周期 进行 clearTimeInterval。

坑三：swiper的swiper-item变更，致使显示异常

swiper 要根据地区选择不一样的内容（swiper-item）播放动画，当切换 地区的时候，个人 swiper-item 个数也在变化， 可是原 swiper 的 current 仍是以前的，好比切换2张变1张数据的时候，就会 致使swiper 不显示。

解决方法和代码：

坑四：微信二次受权没法再次获取受权问题

获取我的地址受权，点击取消，再去获取，无反应，这个不算bug，可是能够总结下，这块是属于 微信二次受权问题，百度也能够找到相关，代码以下：

经过 wx.openSetting 打开受权过的 权利，再次打开，在回调中，在执行你想要的业务逻辑便可。

坑五：倒计时显示卡顿

倒计时在触摸状态拖住不放的状况下，会发现有倒计时中止了，也就是所谓的卡顿，放开，或者随便动下页面又正常（并且时间恢复得特别快），暂时未找到解决方案，有知悉的同窗麻烦告知。

下面是我组队员志新同窗总结的一些UI展现的坑位：

坑六：button标签需清除默认的样式

小程序button标签默认的样式不符合咱们的设计稿，会出现一些比较丑的border，background等。

去除button border线条

button::after {

  border: 0;

}
复制代码

去除button背景色

button{
background:none !important;
}
复制代码

坑七：行高不够被截头

小程序的标签貌似没有写 默认行高是多少。不过根据截图文本能够发现文本的蓝色底色范围框会比文本内容高一些。

若是担忧这些蓝色的范围影响了一些设计稿的边距 ，想要收一收它的占位间隙，那么能够将视图内的文本行高设置为 1.1~1.3之间。为何我不推荐直接设置为行高 1 呢？ 由于行高为1的话，在部分安卓机器上面有坑，会出现文字 头部 一些 笔画被 截取没了，出现貌似被砍头的效果!

view，text{
    line-height:（1.1 或者 1.3 ）  能够适当的收一收它默认行高的一些间隙；
}
复制代码

被截头就以下面的图片：

坑八：微信小程序经过background-image设置背景：只支持线上图片和base64图片，不支持本地图片

坑九：小程序input须要调整聚焦的时候输入框和键盘的距离，增长体验感！

cursor-spacingNumber 指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值做为光标与键盘的距离

<input type="text"  cursor-spacing="70" placeholder="请输入具体的营业地址">
复制代码

坑十：textarea层级穿透（独家秘坑）

小程序的textarea 里 placeholder提示不知道为何，存在一个很是高的层级，平时布局放着还好，要是和一个本身写的弹出层展现，就会发现 textarea的层级比你本身写的弹出层层级还要高，致使结构穿透，紊乱。无论你本身定义的弹出层层级有多高，textarea依然会把它穿透！

解决办法：障眼法，在textarea同级在写一个view 仿textarea的样式，当你的弹出层 弹出的时候，把这个真实的 textarea先hidden起来，（注意不要用 wx：if由于display：none会把以前输入的备注内容消息又清没了）。而后把那个高仿的textarea显示出来。当弹出层消失的时候，就把高仿的textarea隐藏，真实的textarea显示出来。