js项目实践小知识点总结

前言

12月终于对这一年的自己有了个交待，把以前RN的知识、react的积累应用到了项目上；最大的感触是：想学会一个新技术，那么尝试用它做个项目吧！

公司需要做一个知识付费的app且分为三端，由于app那边任务繁重，就把一部分比较繁琐的表单页面交给前端网站来做（MD网页在后端眼里永远就这么简单、low吗？）；技术选型是由我拿的主意，没有采用后端定的VUE，因为自己以前做过RN，所以react上手到应用会熟悉很多，而且真如我所料，感觉项目从头到尾很顺滑，基本没有遇到什么大的阻挠，非要说有卡壳的地方，那就是webview与原生交互那里，android调用component暴露的方法总是失效，但ios是可以的；最后证明是android自己订阅方法的时机没有把握好。

技术背景

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)
      }

npm库

md5 yarn add md5
query-string yarn add query-string
classnames yarn add classnames
Ant Design Mobile of React
react-mobile-datepicker yarn add react-mobile-datepicker
axios yarn add axios