zoukankan      html  css  js  c++  java
  • 收银台采坑总结

    问题:iphone的手机safari的兼容的情况

    1,最近遇到一个safary兼容的收银台白屏的问题,通过在手机的safary配置(打开检查web配置),与电脑safary进行一个匹配,发现不能识别localstaryge,最后发现safary设置了无痕浏览,解除safary无痕浏览,并且加入错误的异常提示

    try {
    var localStorage = window.localStorage
    var sessionStorage = window.sessionStorage
    } catch (e) {
    alert('请关闭隐身模式,不能阻止cookie哦~')
    }

     2,在58同城环境下,部分低版本的浏览器下,存在倒计时退出重新进的时候,倒计时停止不动,做的是本地存储当前的倒计时的时间,和重新获得页面的数据做一个比较,如果当前倒计时的时间小于存储的时间,那么重新存储赋值

    function diffCountTime () {
    const CashierPageData = window.PAY_DATA || {}
    if (CashierPageData.countDown) {
    let leftTime = CashierPageData.countDown.leftTime
    let now = new Date()
    let endTime = new Date()
    endTime = endTime.getTime() + leftTime * 1000
    let leftMilliseconds = endTime - now.getTime()
    let orderId = CashierPageData.payParam.orderId
    let timeInfo = sstorage.get('countDown', true)
    if (timeInfo && timeInfo[orderId]) {
    let sEndTime = timeInfo[orderId]
    if (sEndTime) {
    sEndTime = new Date(sEndTime).getTime()
    if (sEndTime < endTime) {
    endTime = sEndTime
    leftMilliseconds = endTime - now.getTime()
    CashierPageData.countDown.leftTime = Math.ceil(
    leftMilliseconds / 1000
    )
    }
    }
    }
    let _timeInfo = Object.assign({}, timeInfo, CashierPageData.countDown)
    _timeInfo[orderId] = endTime
    sstorage.set('countDown', _timeInfo)
    }
    }

    3,showdialog对于收银台只会展示一次,倒计时到期的时候会弹出,第二返回的时候会弹出,支付异常重新加载的时候会弹出,所以放在全局里构建

    4,在安卓机上,58同城、58到家app,低版本的机型,触发返回bar的时候,那个卡,卡到怀疑人生,处理方案,取消掉自带慢的问题

    // js_back_result==true时候,去掉默认的返回的样式
    if (isAndroid()) {
    window.daojia.js_back_result(true)
    }

    5, 对于浏览器啊,小于12号的字体,他不会显示出来,看着浑身难受,差了些方案设置

    1,transform: scale(0.5);//并不是真的小于12像素,只是在原来的基础上进行缩小了

    2,html{-webkit-text-size-adjust:none;//旧版本的webkit内核的浏览器是支持,新版的webkit内核的浏览器已经不再支持这个属性}

    6, 显示金钱的不要用中文,它会与实际的间距多出几像素,所以用英文

    &yen;

    7,在这个项目里使用了骨架加载,开始单独做了一个页面,效果没有用上,很是遗憾,结果测试的过程中说支付成功页面为何一闪而过有个效果,他们不是很满意交互,提了bug,我想了下,这个bug提的好,我的骨架加载方案终于用上了,要干就干大票,那就写个组件,后期还是可以单独拿出来提供项目组使用,做成node的架包,节省人力,不多说,上代码

     base---circle---squre

    layout---row--column 

    index--

    <div class="vue-skeleton-loading">
    <div class="skeleton-bac-animation"></div>
    <slot></slot>
    </div>

    8,该项目做了防重复提交的操作vue,立即执行去支付

    /**
    * 防止重复点击
    */
    defendRepeat: rtDebounce(function () {
    this.goPay()
    }, 200),

     9,更多的坑微信支付掉不起,更多的原因就是业务线传的appsourece的问题,要么会提示appid异常,我们当前的域名要让微信授权,需要找漂亮的小姐姐帮忙授权

     10,支付所需要的参数说明

    let params = {
    orderType: this.billInfo.orderType, // 1-预付单,2后附单
    billLastUpdateTime: this.billInfo.billLastUpdateTime, // 账单最后更新的时间,防止后附单-修改价格
    payDetailJson: JSON.stringify(
    [{
    payAmount: this.billInfo.needPayPrice, // 支付金额-必传
    payChannel: this.payChannel // 支付渠道-必传
    }]
    ),
    paySource: this.paySource, // 渠道
    totalTime: this.countDown && this.countDown.totalTime ? this.countDown.totalTime : 0 // 总共的时间
    }
    // payParam 参数
    if (this.payParam) {
    this.params = Object.assign(params, this.payParam)
    }

    if (this.payParam.businessId === 104 || this.payParam.businessId === 8000) {
    // 月嫂创建支付tradeId
    this.params = Object.assign(params, { tradeId: this.billInfo.tradeId })
    }
    // 当前的是微信环境进行参数拼接
    if (getIsWxClient()) {
    this.params = Object.assign(params, { openId: this.openId })
    }
  • 相关阅读:
    手把手教 从0开始搭建vue 脚手架项目
    利用vue.config.js 配置前端模拟接口技巧
    elementUI 穿梭框应用
    process.env.VUE_APP_BASE_API
    springcloud-Eureka组件
    mysql-常用组件之触发器
    mysql-常用组件之定时器
    springboot-整合多数据源配置
    【搞定面试官】- Synchronized如何实现同步?锁优化?(1)
    【搞定面试官】try中有return,finally还会执行吗?
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/10156720.html
Copyright © 2011-2022 走看看