kbone 基础—6Kbone + React 项目手工搭建流程_kbone 中 react-router-dom

},
plugins: [
new webpack.DefinePlugin({
‘process.env.isMiniprogram’: process.env.isMiniprogram, // 注入环境变量，用于业务代码判断
}),
new MiniCssExtractPlugin({
filename: ‘[name].wxss’,
}),
new MpPlugin(require(‘./miniprogram.config’))
],
}

#### 2.2 安装依赖


安装上述配置文件里的 loader 和 plugin 依赖：

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime css-loader file-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin mp-webpack-plugin --save-dev

#### 2.3 编写 webpack 插件配置


这里的 webpack 插件配置即 MpPlugin 的配置参数文件。在 build 文件夹下创建 miniprogram.config.js 文件，内容如下：

module.exports = {
// 页面 origin，默认是 https://miniprogram.default
origin: ‘https://test.miniprogram.com’,

// 入口页面路由
entry: ‘/view1’,

// 页面路由，用于页面间跳转。其值是一个以页面名称作为 key 的对象，每项的值是该页面可以响应的路由
router: {
index: [‘/view1’, ‘/view2’],
},

// 特殊路由跳转
redirect: {
notFound: ‘index’,
accessDenied: ‘index’,
},

// 构建输出配置
generate: {
// 构建完成后是否自动安装小程序依赖。‘npm’：使用 npm 自动安装依赖
autoBuildNpm: ‘npm’
},

// 小程序全局配置，参见 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
app: {
navigationBarTitleText: ‘miniprogram-project’,
},

// 所有页面的全局配置
global: {
rem: true, // 是否支持 rem
pageStyle: true, // 是否支持修改页面样式
},

// 项目配置，会被合并到 project.config.json 中
projectConfig: {
appid: ‘’,
projectname: ‘kbone-react-project’,
},

// 包配置，会被合并到 package.json 中
packageConfig: {
author: ‘wechat-miniprogram’,
}
}

#### 3、新增入口文件


**3.1 在项目根目录下创建** **`src`** **目录，在** **`src`** **目录下创建** **`main.mp.jsx`文件：**

import React from ‘react’
import {render, h} from ‘react-dom’
import App from ‘./App’

export default function createApp() {
const container = document.createElement(‘div’)
container.id = ‘app’
document.body.appendChild(container)

render(, container)
}

**3.2 安装 React React-dom**

npm install react react-dom

#### 4、构建项目文件


**4.1 创建App.jsx**


在 `src` 目录下创建 `App.jsx` 文件，实现了：


* 路由组件的展示和路由切换
* 表单组件展示：输入框、checkbox、radio、picker-view

import React, {useState} from ‘react’
import {render, h} from ‘react-dom’
import {BrowserRouter as Router, Switch, Route, Link} from ‘react-router-dom’;
import ‘./app.css’

import PickerView from ‘./PickerView.jsx’
import View1 from ‘./View1’
import View2 from ‘./View2’
import View3 from ‘./View3’

const App = (props, store) => {
return (

我是输入框：
<input
onClick={e => console.log(‘click’, e)}
onInput={e => console.log(‘input’, e)}
onFocus={e => console.log(‘focus’, e)}
onBlur={e => console.log(‘blur’, e)}
onChange={e => console.log(‘change’, e)}
/>

我是 checkbox：
<input
type=“checkbox”
onChange={e => console.log(‘change’, e)}
/>

我是 radio：
<input
type=“radio”
name=“radio”
value=“1”
onChange={e => console.log(‘change’, e)}
/>
<input
type=“radio”
name=“radio”
value=“2”
onChange={e => console.log(‘change’, e)}
/>

我是 picker-view：

react-router

• 
  
• view1
• 
  
• view2
• 
  
• view3
• 
  

)
}

export default App

**4.2 安装 react-router-dom 依赖包**

npm install react-router-dom

**4.3 创建 PickerView 组件**


在 `src` 下里创建 `PickerView.jsx` 组件：

import React from ‘react’

class PickerView extends React.Component {
constructor(props) {
super(props)
this.pickerView = React.createRef()
this.state = {
value: [0, 1],
}
this.onChange = evt => {
console.log(evt.detail.value)
this.setState({
value: evt.detail.value,
})
}
}

componentDidMount() {
this.pickerView.current.addEventListener(‘change’, this.onChange)
}

componentWillUnmount() {
this.pickerView.current.removeEventListener(‘change’, this.onChange)
}

render() {
return (
<wx-picker-view
ref={this.pickerView}
style={{width: ‘100%’, height: ‘300px’}}
value={this.state.value}
>

春

夏

秋

冬

2011

2012

2013

2014

2015

2016

2017

2018

)
}
}

export default PickerView

**4.4 创建 View1 组件**


在 `src` 目录下创建 `View1.jsx` 组件：

import React from ‘react’

class View1 extends React.Component {
render() {
return (

I am view1

route: {this.props.match.path}

)
}
}

export default View1

**4.5 创建 View2 组件**


在 `src` 目录下创建 `View2.jsx` 组件：

import React from ‘react’

class View2 extends React.Component {
render() {
return (

I am view2

route: {this.props.match.path}

)
}
}

export default View2

**4.6 创建 View3 组件**


在 `src` 目录下创建 `View3.jsx` 组件：

import React from ‘react’;

class View3 extends React.Component {
render() {
return (

I am view3

route: {this.props.match.path}

)
}
}

export default View3

#### 5、执行构建


**5.1 安装 cross-env**


**为什么使用cross-env？**


cross-env 是运行跨平台设置和使用环境变量的脚本。


当您使用NODE\_ENV=production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。


cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量。这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。


**安装：**

npm install cross-env --save-dev

**5.2 编写 npm 脚本**


`NODE_ENV` 环境变量将由 `cross-env` 设置。打印 `process.env.NODE_ENV` 值为 'production'。

“scripts”: {
“mp”: “cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules”
}

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！


王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。


对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！


【完整版领取方式在文末！！】


***93道网络安全面试题***


![](https://img-blog.csdnimg.cn/img_convert/6679c89ccd849f9504c48bb02882ef8d.png)








![](https://img-blog.csdnimg.cn/img_convert/07ce1a919614bde78921fb2f8ddf0c2f.png)





![](https://img-blog.csdnimg.cn/img_convert/44238619c3ba2d672b5b8dc4a529b01d.png)





内容实在太多，不一一截图了


### 黑客学习资源推荐


最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

#### 1️⃣零基础入门


##### ① 学习路线


对于从来没有接触过网络安全的同学，我们帮你准备了详细的**学习成长路线图**。可以说是**最科学最系统的学习路线**，大家跟着这个大的方向学习准没问题。


![image](https://img-blog.csdnimg.cn/img_convert/acb3c4714e29498573a58a3c79c775da.gif#pic_center)


##### ② 路线对应学习视频


同时每个成长路线对应的板块都有配套的视频提供：


![image-20231025112050764](https://img-blog.csdnimg.cn/874ad4fd3dbe4f6bb3bff17885655014.png#pic_center)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**