阅读 52

js项目实践小知识点总结

前言

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

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

技术背景

  1. react网站嵌入到app,webview调用
  2. 单页面component切换、新开webview传值
  3. 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库

  1. md5 yarn add md5
  2. query-string yarn add query-string
  3. classnames yarn add classnames
  4. Ant Design Mobile of React
  5. react-mobile-datepicker yarn add react-mobile-datepicker
  6. axios yarn add axios
关注下面的标签,发现更多相似文章
评论