12月终于对这一年的本身有了个交待,把之前RN的知识、react的积累应用到了项目上;最大的感触是:想学会一个新技术,那么尝试用它作个项目吧!javascript
公司须要作一个知识付费的app且分为三端,因为app那边任务繁重,就把一部分比较繁琐的表单页面交给前端网站来作(MD网页在后端眼里永远就这么简单、low吗?);技术选型是由我拿的主意,没有采用后端定的VUE,由于本身之前作过RN,因此react上手到应用会熟悉不少,并且真如我所料,感受项目从头至尾很顺滑,基本没有遇到什么大的阻挠,非要说有卡壳的地方,那就是webview与原生交互那里,android调用component暴露的方法老是失效,但ios是能够的;最后证实是android本身订阅方法的时机没有把握好。css
断定是否有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
复制代码
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()
}
}
复制代码
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
}
复制代码
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()]
}
复制代码
const today = new Date()
const tomorrow = today.setDate(today.getDate() + 1)
new Date(tomorrow)
复制代码
const GetUrlParam = (url_string,param) =>{
let url = new URL(url_string)
return url.searchParams.get(param)
}
复制代码
import checkbox_null from '../img/checkbox_null.png'
<img src={checkbox_null} alt=''/>
复制代码
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);}
复制代码
Toast.success(``,2,null,false) // 参数4 false不显示mask
Toast.fail(``,2,null,false)
Toast.offline(``,2,null,false)
复制代码
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)
}
复制代码
yarn add md5
yarn add query-string
yarn add classnames
yarn add react-mobile-datepicker
yarn add axios