记录工作中开发遇到的问题（持续更新）

最新推荐文章于 2022-06-26 10:49:36 发布

weixin_30549175

最新推荐文章于 2022-06-26 10:49:36 发布

阅读量299

点赞数

文章标签：移动开发前端 json ViewUI

原文链接：http://www.cnblogs.com/hsprout/p/10405384.html

版权

1. IOS App进入后台之后，超过了后台运行时间(默认5S,可进行后台申请有3分钟)，便进入了挂起状态，无法执行代码，但是内存并没有清除。

做定时器任务时，如果进程被切到后台后，秒数还继续读取，要用 new Date().getTime()

const tick = () => {　　
    timer = setTimeout(() => {
      if (second > 0) {
        let newSecond: number = totalTime - parseInt((new Date().getTime() - startTime) / 1000);
        newSecond = newSecond > 0 ? newSecond : 0;
        setSecond(newSecond);
      } else if (current < list.length - 1) {
        startTime = new Date().getTime();
        setCurrent(current + 1);
        setAnswerNum(answerNum + 1);
        localStorage.answerNum = answerNum+1;
        setSecond(totalTime);
        setSelectAnswer('');
      } else {
        handleEnd();
      }
    }, 1000);
  };

2.防止用户快速点击，调用多次接口

（1）用户点击一次后，置灰，等返回数据后可再次点击或倒数5S后可再次点击

（2）用户2s内多次点击，都只调用一次接口

export function throttle(callback, time = 2000) {
  const startTime = new Date();
  if (startTime - endTime > time || !endTime) {
    callback();
    endTime = startTime;
  }
}

3.前端canvas转base64图片问题。

（1）dom-to-img 在ios中没办法转为png/ipeg,只能转为svg。

（2）html2canvas 可能会转换不完整

4. IOS时间戳转换问题. 要把 - 转换成 / new Date('2018/4/26 9:24');

5. ios上只有用户交互触发的focus事件才会起效，而延时回调的focus是不会触发的。

例如：（1）调用setTimeout开始一个新的调用堆栈，IOS的安全机制开始阻止你触发input元素的focus事件.

（2）focus()放在callback异步回调函数里

6. z-index只有在设置了position属性之后才有效。

z-index有一个从父原则。当两个position:fixed;的div嵌套，内层div的z-index会失效。

7.身份证号正则：

const identityNo = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;

8. 微信小程序将rpx转为px

px与rpx之间转换的公式：px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

9. 用css实现信封下面的条纹

10.taro 根据编译环境来按需打包

let html2canvas;
if (process.env.TARO_ENV === 'h5') {
  html2canvas = require('html2canvas');
}

11. 目前微信小程序不支持下载文件到手机本地，只可以下载到微信临时路径然后打开预览

https://developers.weixin.qq.com/community/develop/doc/000ae6e1f1cd381b9bf6c86a558400?_at=1559535442703

12. 对象数组按照字母顺序排序

const arr = [{
   "A":"选项A",
},{
   "B":"选项B",
},{
    "C":"选项C",
},{
    "D":"选项D",
}];

arr.sort( (a,b) => Object.keys(a)[0].localeCompare(Object.keys(b)[0]) )

13.关于支付：

1.支付宝

（1）支付宝PC端扫码支付，接口会返回一段html片段，一个form表单的提交，直接跳转到支付宝支付即可

（2）支付宝移动端h5支付，接口会返回一段html片段，一个form表单的提交，直接跳转到支付宝支付即可

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=utf-8&method=alipay.trade.wap.pay&sign=aCegTNCKXD25l80POEK1w9kxAftnnM2iQkxsBBexwzO9LGQYTSGYrPdxflGTmrJMS%2Bf%2FVhFF3qr9YrXdFLsBECd1xHE5OkmD1BQCzZu7Y%2B42Nfw0N%2BNF9zTQMM3uYWCXshzwezEkTjDvRQYG%2FrKwR%2BPVWCtX5yvAk55nheoDmhLkEtVf%2Big0VckdSWk2iwa0%2B9p%2BjllDiCRnnzJlH7cPaI6v%2FCZ40M%2BcVjUhnh7ijCKrFUCnrvzXTHrq6lMyUB6ObwIpHDEQ2TwZ%2F92uc5tYEErMoQDhQKfaaFKDBEHSfZU25oNbKByyb21k2qBChIFcy9Rmp1nVQmGjBrZdCqKjNA%3D%3D&return_url=http%3A%2F%2F192.168.86.40%3A10086%2Fpages%2Forder%2Fdetail%3ForderCode%3D201906171054333533&notify_url=http%3A%2F%2Fhsz-test.lai-ai.com%2Fapi%2Fnotify%2FzfbPayNotify&version=1.0&app_id=2019061265523269&sign_type=RSA2&timestamp=2019-06-17+18%3A03%3A07&alipay_sdk=alipay-sdk-java-3.7.26.ALL&format=json">
<input type="hidden" name="biz_content" value="{"out_trade_no":"RL3717180307C3D6","total_amount":0.01,"subject":"支付","product_code":"FAST_INSTANT_TRADE_PAY","body":"支付"}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

2 微信支付

（1）微信PC端扫码支付，接口会返回一个二维码链接 code_url,用qrcode这个库将链接转为二维码图片在前端显示；

（2）微信移动端H5支付：

（3）微信内h5支付（JSAPI支付，公众号支付）

　　有两种方式：

　　A. 不用引入sdk包，直接调用 WeixinJSBridge.invoke()方法 WeixinJSBridge内置对象在其他浏览器中无效。（微信支付官方文档）

　　B. 需要引入sdk包，配置 wx.config(), 然后再调用为微信支付wx.chooseWXPay()(微信公众号官方文档)

　　　注意：（i）后端返回的字段 signType （签名方式）与调用sdk的方法返回的 signnature 有所不同;

　　　　　（ii）支付的时候需要传openId，所以手机号登录也需要获取微信openId保存使用

14: taro组件 onInput返回 [object promise]

// 原因是由 async 导致,删除 async就可以了
onChange = async(e) {
   this.setState({
     val: r.target.value,
   })  
}  

// 分析： 因为 async返回的是一个promise对象
// 看taro的Input组件的源码知道 onInput 方法返回的是 onInput(e), 将函数返回，所以会把promise对象返回

15. no-form 自定义校验

treeStrBack: [
      {
        validator: (_, value: string) => {
          return String(value).split('-').length === 4;
        },
        message: '请选择全部后台分层',
      },
    ],

转载于:https://www.cnblogs.com/hsprout/p/10405384.html