記錄工做中開發遇到的問題（持續更新）

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支付：

　 實際操做中。redirect_url並無回調成功。因此支付成功後在支付頁面彈起一個確認框，由用戶本身去確認是否支付結束

（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: '請選擇所有後臺分層',
      },
    ],

16.關於setTimeOut

修改如下 print 函數，使之輸出 0 到 99，或者 99 到 0
要求：

一、只能修改 setTimeout 到 Math.floor(Math.random() * 1000 的代碼

二、不能修改 Math.floor(Math.random() * 1000

三、不能使用全局變量

function print(n){
  setTimeout(() => {
    console.log(n);
  }, Math.floor(Math.random() * 1000));
}
for(var i = 0; i < 100; i++){
  print(i);
}　　

 分析：首先n仍是 0-99，只是由於延時輸出，且delay是隨機數,因此輸出順序打亂

（1）直接用code語句，至關於同步函數，會當即執行
function print(n){
  setTimeout(console.log(n), Math.floor(Math.random() * 1000));
}
for(var i = 0; i < 100; i++) {
  print(i);
}

（2）利用setTimeOut能夠傳入多個參數
function print(n){
  setTimeout(() => {
    console.log(n);
  },1， Math.floor(Math.random() * 1000));
}
for(var i = 0; i < 100; i++){
  print(i);
}

（3）修改this指向
function print(n){
  setTimeout((() => {
    console.log(n)
  }).call(n,[]), Math.floor(Math.random() * 1000));
}
for(var i = 0; i < 100; i++){
  print(i);
}

17. flux,redux,vuex,redux-saga 總結對比；

	flux(View  Action  Dispatcher  Store)	redux(view store action reducer)
數據觸發流程	view或者測試用例等地方觸發action,dispatcher會接收到全部的action,而後轉發到全部的store,store的改變只能經過action	view觸發action，而後 Store 自動調用 Reducer，而且傳入兩個參數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。State 一旦有變化，Store 就會調用監聽函數，獲得當前狀態，從新渲染view
特色	一個應用能夠擁有多個 Store，多個Store之間可能有依賴關係；Store 封裝了數據還有處理數據的邏輯。	只有一個store
	單向數據流	單向數據流
	能夠多個數據源	單一數據源
	對應的store修改對應的view	每一個reducer都由跟reducer統一管理

redux:

1. redux只有一個store，整個應用的數據都在store裏，store的state不能直接修改，每次只能返回一個新的state;

import { createStore } from 'redux';
const store = createStore(reducer);

2. Action 必需要有type屬性，表明action名稱,是個純對象

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

3. redux用reducer純函數（相同的輸入都會致使相同的輸出，不會依賴外部環境變量） 來處理state的計算過程

createStore接受reducer做爲參數 生成新的store,之後每當store.dispatch發送過來一個新的 Action，就會自動調用 Reducer，獲得新的 State。

createStore內部 主要是 subscribe, listeners, getState

多個 Reducer 能夠經過 combineReducers 方法合成一個根 Reducer，這個根 Reducer 負責維護整個 State。

　　

中間件

Redux 引入了中間件 Middleware 的概念來處理在action異步操做後自動執行reducer（異步的操做發送action的時候，store.dispatch）

簡單來講，就是對 store.dispatch方法進行一些改造

Redux 提供了一個 applyMiddleware 方法來應用中間件： 把全部的中間件組成一個數組，依次執行

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

18. 在微信小程序中 跳轉外部連接時 須要另外開啓一個頁面，用webview包起來 

19. 微信小程序，(taro) 回到頂部 有專門的方法

wx.pageScrollTo(Object object)

20. 小程序裏  props.children 是打印不出來的  因此 注意不能講 props.children 做爲判斷條件　　

　　

 21.  

　　注意： 在微信 7.0.5如下的版本，getMenuButtonBoundingClientRect 這個方法 獲取的值都爲0；

22.  onShareAppMessage 這個方法只能在Page頁面使用，在自定義組件內不可。

解決： 對於自定義組件中須要傳參的場景，能夠經過 

<Button type="share" data-{自定義變量名}={傳的參數}></Button>

//在page頁面
this.onShareAppMessage = (res) => {
  const {} = res.target.dataset.自定義變量名;
}

 23. 微信小程序受權登陸流程圖   （文章）

（1）wx.login()這個API的做用就是爲當前用戶生成一個臨時的登陸憑證，這個臨時登陸憑證的有效期只有五分鐘。咱們拿到這個登陸憑證後就能夠進行下一步操做：獲取openid和session_key

（2）session_key就保證了當前用戶進行會話操做的有效性，這個session_key是微信服務端給咱們派發的。能夠用這個標識來間接地維護咱們小程序用戶的登陸態

session_key須要在本身的服務端請求微信提供的第三方接口https://api.weixin.qq.com/sns/jscode2session

 1》 session_key和微信派發的code是一一對應的，同一code只能換取一次session_key。

 2》session_key是有時效性的，即使是不調用wx.login，session_key也會過時，過時時間跟用戶使用小程序的頻率成正相關，但具體的時間長短開發者和用戶都是獲取不到的

 

24. 前端點擊下載圖片（不一樣域名，先配置跨域）

 1 const onDownload = (attUrl, attName) => {
 2     fetch(attUrl)
 3       .then(res => res.blob())
 4       .then(blob => {
 5         const a = document.createElement('a');
 6         const url = window.URL.createObjectURL(blob);
 7         const filename = attName;
 8         a.href = url;
 9         a.download = filename;
10         a.click();
11         window.URL.revokeObjectURL(url);
12       });
13   };