问题: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, 显示金钱的不要用中文,它会与实际的间距多出几像素,所以用英文
¥
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 })
}