登陆

章鱼彩票下载-小程序实战踩坑之B2B商城项目总结

admin 2019-12-14 304人围观 ,发现0个评论

坑一:付出完结页面,点击“完结” 按钮会触发回来的页面的onShow()生命周期 (秘坑)

如下图,原以为是微信的页面,不会影响到小程序,实践情况下是会触发回来的页面的onShow()的。


触发bug事务场景详细描绘:

由于事务需求,我会鄙人订单页面触发 onShow(章鱼彩票下载-小程序实战踩坑之B2B商城项目总结),在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);
w胞组词x.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页面,运用onUlo章鱼彩票下载-小程序实战踩坑之B2B商城项目总结ad() 周期 进行 clearTimeInterval。

坑三:swiper的swiper-item改变,导致显现反常

swiper 要依据区域挑选不同的内容(swiper-item)播映动画,当切换 区域的时分,我的 swiper-item 个数也在改变, 可是原 swiper 的 cur章鱼彩票下载-小程序实战踩坑之B2B商城项目总结rent 仍是之前的,比方切换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 指定的间隔的最小值作为光标与键盘的间隔





坑十:textarea层级穿透(独家秘坑)

小程序的textarea 里 placeholder提示不知道为什么,存在一个十分高的层级,平常布局放着还好,要是和一个自己写的弹出层展现,就会发现 textarea的层级比你自己写的弹出层层级还要高,导致结构穿透,紊乱。不论你自己界说的弹出层层级有多高,textarea仍然会把它穿透!


处理办法:障眼法,在textarea同级在写一个view 仿textarea的款式,当你的弹出层 弹出的时分,把这个实在的 textarea先hidden起来,(留意不要用 wx:if由于display:none会把之前输入的补白内容音讯又清没了)。然后把那个高仿的textarea显现出来。当弹出层消失的时分,就把高仿的textarea躲藏,实在的textarea显现出来。

  •   近端开板次新股,完毕被以作手新一为主的游资大佬顶板行情后,周四呈现初次开板换手,

  • 章鱼彩票下载-主力龙虎榜:资金追捧开板次新 游资大佬团体潜水

    2020-01-23
    请关注微信公众号
    微信二维码
    不容错过
    Powered By Z-BlogPHP