js項目實踐小知識點總結

時間 2019-11-09

原文原文鏈接

前言

12月終於對這一年的本身有了個交待，把之前RN的知識、react的積累應用到了項目上；最大的感觸是：想學會一個新技術，那麼嘗試用它作個項目吧！javascript

公司須要作一個知識付費的app且分爲三端，因爲app那邊任務繁重，就把一部分比較繁瑣的表單頁面交給前端網站來作（MD網頁在後端眼裏永遠就這麼簡單、low嗎？）；技術選型是由我拿的主意，沒有采用後端定的VUE，由於本身之前作過RN，因此react上手到應用會熟悉不少，並且真如我所料，感受項目從頭至尾很順滑，基本沒有遇到什麼大的阻撓，非要說有卡殼的地方，那就是webview與原生交互那裏，android調用component暴露的方法老是失效，但ios是能夠的；最後證實是android本身訂閱方法的時機沒有把握好。css

技術背景

react網站嵌入到app，webview調用
單頁面component切換、新開webview傳值
api請求後和原生交互

js工具庫

獲取原生拼接的連接，作爲動態接口前綴 `斷定是否有port`

let hosts = window.location.host
    let protocol = window.location.protocol
    let port = window.location.port
    let real_host = ''
    if (port) real_host = protocol+'//'+hosts.substring(0,hosts.indexOf(':'))
    if (!port) real_host = protocol+'//'+hosts
複製代碼

判斷ios/android

const deviceName = () => {
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 //g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios終端
      let deviceName
      if (isAndroid) deviceName = 'android'
      if (isIOS)  deviceName = 'ios'
      return deviceName
    }
複製代碼

原生對接，返回上一頁封裝

const backToNative = () => {
      let device = deviceName()
      if (device==='ios'){
        window.webkit.messageHandlers.backByNative.postMessage('')
      }
      if (device==='android'){
        window.backByNative.backByNative()
      }
    }
複製代碼

GMT時間格式化

const GMTToStr = (time) =>{
      let date = new Date(time)
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month<10) month = `0${month}`
      if (day<10) day = `0${day}`
      let str=date.getFullYear() + '-' + month + '-' + day
        // date.getHours() + ':' +
        // date.getMinutes() + ':' +
        // date.getSeconds()
      return str
    }
複製代碼

GMT轉化week

const GMTToWeek = (time) =>{
      let date = new Date(time)
      let weekday=new Array(7)
      weekday[0]="星期日"
      weekday[1]="星期一"
      weekday[2]="星期二"
      weekday[3]="星期三"
      weekday[4]="星期四"
      weekday[5]="星期五"
      weekday[6]="星期六"
      return weekday[date.getDay()]
    }
複製代碼

GMT時間向後+1

const today = new Date()
    const tomorrow = today.setDate(today.getDate() + 1)
    new Date(tomorrow)
複製代碼

獲取url內參數

const GetUrlParam = (url_string,param) =>{
      let url = new URL(url_string)
      return url.searchParams.get(param)
    }
複製代碼

React相關

圖片引入

import checkbox_null from '../img/checkbox_null.png'
    <img src={checkbox_null} alt=''/>
複製代碼

navigationBar純函數

import NavigationBar from '../utils/NavigationBar' // 引入
    
    import React from 'react'                          // 標題欄頁
    import PropTypes from 'prop-types'
    import backTo from "../img/back.svg";
    
    const NavigationBar = ({title,backToSw}) => {
      return (
        <div className="nav_bar"> <div className="nav_top"> <div className="nav_le" onClick={()=>backToSw()}> <img src={backTo} alt="返回"/> </div> <div className="nav_mid"><span>{title}</span></div> <div className="nav_ri"></div> </div> <div className="nav_line_wrap"><div className="nav_lin"></div></div> </div> ) } NavigationBar.propTypes = { title: PropTypes.string.isRequired, backToSw: PropTypes.func.isRequired } export default NavigationBar 複製代碼

/*navigationBar*/
    .nav_bar{
        position: fixed;
        top: 0px;
        width: 100%;
        height: 44px;
        background-color: #fff;
        z-index: 10;
        display: flex;
        flex-direction: column;
    }
    .nav_top{
        display: flex;
        flex: 1;
        align-items: center;
    }
    .nav_le{width:34px;height:43px;display:flex;align-items:center;justify-content: center;}
    .nav_le img{width:20px;height:20px;}
    .nav_mid{flex:1;text-align:center;}
    .nav_mid span{
        color: #333333;
        font-size: 18px;
        font-weight: bold;
    }
    .nav_ri{width:34px;height:43px;}
    .nav_line_wrap{padding:0px 12px;}
    .nav_lin{width:100%;height:1px;background-color: rgba(0,0,0,0.1);}
複製代碼

ant-design-mobile Toast狀況

Toast.success(``,2,null,false) // 參數4 false不顯示mask
    Toast.fail(``,2,null,false)
    Toast.offline(``,2,null,false)
複製代碼

倒計時30分鐘

this.time = 1800 // 30分鐘
      this.state = {
        timeShow:'30min'
      }
      timer = () => {
        let _this = this
        _this.clock = setInterval(function(){
          _this.time = _this.time-1
          let minute = parseInt(_this.time/60);
          let second = parseInt(_this.time%60);
          let timeShow = '還剩 '+minute+'min '+second+'s'
          _this.setState({timeShow})
    
          // 禁止倒計時
          if (_this.time===0){
            clearInterval(_this.clock)
            _this.setState({timeShow:'30min'})
          }
        },1000)
      }
複製代碼