本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
准备工作
提前需要准备好react脚手架开发环境，由于react已经不支持在页面内部通过jsx.transform来转义，我们就自己大了个简易的开发环境
创建一个文件夹，命名为react-canlendar
cd ./react-canlendar
运行
npm init
一路enter我们得到一个package.json的文件
安装几个我们需要的脚手架依赖包
npm install awesome-typescript-loader typescript webpack webpack-cli -D
安装几个我们需要的类库
npm install @types/react react react-dom --save
基础类库安装完毕，开始构建webpack配置
新建一个目录config，config下面新增一个文件，名字叫做webpack.js
var path = require('path')
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/index.tsx')
},
output: {
filename: '[name].js'
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{test: /\.tsx?$/, use: ['awesome-typescript-loader']}
]
}
}还需要创建一个index.html文件，这是我们的入口文件
Document
以上环境只是一个极简单的环境，真实环境要比这个复杂的多。
好了，言归正传，我们还是聚焦到日历组件的开发中来吧
创建一个src文件夹，内部创建一个index.tsx文件。
这个入口文件很简单就是一个挂载
import * as React from 'react' import * as ReactDOM from 'react-dom' ReactDOM.render((test
), document.getElementById('root'))
ok，打开页面可以看到页面正常显示了test字样。
我们需要创建Calendar组件了。
创建一个components文件夹，内部创建一个Calendar.tsx文件。
import * as React from 'react'
export default class Calendar extends React.Component {
render() {
return (
日历
)
}
}在index.tsx中把Calendar.tsx引入，并使用起来。于是index.tsx变成这个样子。
import * as React from 'react' import * as ReactDOM from 'react-dom' import Calendar from './components/Calendar' ReactDOM.render((), document.getElementById('root'))
可以看到页面显示了日历字样。
要显示日历，首先需要显示日历这个大框以及内部的一个个小框。实现这种布局最简单的布局就是table了
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
所以我们首先创建的是这种日历table小框框，以及表头的星期排列。
import * as React from 'react'
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]
export default class Calendar extends React.Component {
render() {
return (
| {week} | }) }
| {index} | }) }
可以看到我们使用了一个星期数组作为表头，我们按照惯例是从周日开始的。你也可以从其他星期开始，不过会对下面的日期显示有影响，因为每个月的第一天是周几决定第一天显示在第几个格子里。
那为什么行数要6行呢？因为我们是按照最大行数来确定表格的行数的，如果一个月有31天，而这个月的第一天刚好是周六。就肯定会显示6行了。
为了显示好看，我直接写好了样式放置在index.html中了，这个不重要，不讲解。
Document
下面就要开始显示日期了，首先要把当前月份的日期显示出来，我们先在组件的state中定义当前组件的状态
state = {
month: 0,
year: 0,
currentDate: new Date()
}我们定义一个方法获取当前年月，为什么不需要获取日，因为日历都是按月显示的。获取日现在看来对我们没有意义，于是新增一个方法，设置当前组件的年月
setCurrentYearMonth(date) {
var month = Calendar.getMonth(date)
var year = Calendar.getFullYear(date)
this.setState({
month,
year
})
}
static getMonth(date: Date): number{
return date.getMonth()
}
static getFullYear(date: Date): number{
return date.getFullYear()
}创建两个静态方法获取年月，为什么是静态方法，因为与组件的实例无关，最好放到静态方法上去。
要想绘制一个月还需要知道一个月的天数吧，才好绘制吧
所以我们创建一个数组来表示月份的天数
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 暂定2月份28天吧
组件上创建一个函数，根据月份获取天数，也是静态的
static getCurrentMonthDays(month: number): number {
return MONTH_DAYS[month]
}下面还有一个重要的事情，就是获取当前月份第一天是周几，这样子就可以决定把第一天绘制在哪里了。首先要根据年月的第一天获得date，根据这个date获取周几。
static getDateByYearMonth(year: number, month: number, day: number=1): Date {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}这里获得每个月的第一天是周几了。
static getWeeksByFirstDay(year: number, month: number): number {
var date = Calendar.getDateByYearMonth(year, month)
return date.getDay()
}好了，开始在框子插入日期数字了。因为每个日期都是不一样的，这个二维数组可以先计算好，或者通过函数直接插入到jsx中间。
static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
var number = line * 7 + weekIndex - weekDay + 1
if ( number <= 0 || number > monthDays ) {
return
}
return number
}看一下这个函数需要几个参数哈，第一个行数，第二个列数（周几），本月第一天是周几，本月天数。line * 7 + weekIndex表示当前格子本来是几，减去本月第一天星期数字。为什么+1，因为索引是从0开始的，而天数则是从1开始。那么本月最大天数的则过滤掉，返回一个空span，只是为了撑开td。其他则直接返回数字。
import * as React from 'react'
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
export default class Calendar extends React.Component {
state = {
month: 0,
year: 0,
currentDate: new Date()
}
componentWillMount() {
this.setCurrentYearMonth(this.state.currentDate)
}
setCurrentYearMonth(date) {
var month = Calendar.getMonth(date)
var year = Calendar.getFullYear(date)
this.setState({
month,
year
})
}
static getMonth(date: Date): number{
return date.getMonth()
}
static getFullYear(date: Date): number{
return date.getFullYear()
}
static getCurrentMonthDays(month: number): number {
return MONTH_DAYS[month]
}
static getWeeksByFirstDay(year: number, month: number): number {
var date = Calendar.getDateByYearMonth(year, month)
return date.getDay()
}
static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
var number = line * 7 + weekIndex - weekDay + 1
if ( number <= 0 || number > monthDays ) {
return
}
return number
}
static formatNumber(num: number): string {
var _num = num + 1
return _num < 10 ? `0${_num}` : `${_num}`
}
static getDateByYearMonth(year: number, month: number, day: number=1): Date {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}
checkToday(line: number, weekIndex: number, weekDay: number, monthDays: number): Boolean {
var { year, month } = this.state
var day = Calendar.getDayText(line, weekIndex, weekDay, monthDays)
var date = new Date()
var todayYear = date.getFullYear()
var todayMonth = date.getMonth()
var todayDay = date.getDate()
return year === todayYear && month === todayMonth && day === todayDay
}
monthChange(monthChanged: number) {
var { month, year } = this.state
var monthAfter = month + monthChanged
var date = Calendar.getDateByYearMonth(year, monthAfter)
this.setCurrentYearMonth(date)
}
render() {
var { year, month } = this.state
console.log(this.state)
var monthDays = Calendar.getCurrentMonthDays(month)
var weekDay = Calendar.getWeeksByFirstDay(year, month)
return (
{this.state.month}
| {week} | }) }
| {Calendar.getDayText(key, index, weekDay, monthDays)} | }) }
可以看到最终的代码多了一些东西，因为我加了月份的切换。
还记的上文我们把二月份天数写死的18天嘛？要不你们自己改改，判断一下闰年。
相关推荐：
