前言

最近看见大家都在卷react源码，突然就心慌了。但是自己的操作水平还有待提高，现在看源码也需要循序渐进的，打算还是从写代码慢慢理解功能再去看源码。所以就尝试使用vite这个构建工具进行尝试构建一个react项目。因为是第一次使用，也是看着文档来操作的。下面展示一下效果。

效果

录屏软件生成gif的找到一个只能一次免费后面收费的，效果有点模糊。mac电脑，如果有比较好的，可以推荐一下哈！！！

放个截图

实现步骤

一，项目搭建

1，按照vite文档进行操作。
- 目前require在vite项目中不能使用，导入用import
- 兼容性注意：Vite 需要 Node.js 版本 >= 14.18.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

  yarn create vite #yarn安装npm create vite@latest # npm安装

2，按照上面步骤之后,我选择了npm安装，选择react搭建
- 如图所示：
- 其中vanilla js可以翻译为原生js，vite搭建vanilla运行地址。
- preact是React 的轻量级替代方案，体积仅有 3kB，并且拥有与 React 相同的 API。vite搭建preact运行地址。
- 在svelte中，应用程序由一个或多个 组件（components） 构成。组件是一个可重用的、自包含的代码块，它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中，vite搭建svelte运行地址。
- Lit 是一个简单的框架，用于构建快速、轻量级的 Web 组件。它提供反应状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统，vite搭建lit运行地址
3，运行。cd到对应目录，然后查看package.json脚本显示dev
```
yarn dev # yarn安装
npm run dev # npm安装
```

4，适配移动端

安装插件

 yarn add postcss-pxtorem -D # yarn安装npm install postcss-pxtorem -D # npm安装

在vite.config.js中进行配置,将+ 后面的添加到相应的位置

import { defineConfig } from 'vite'  // defineConfig对vite进行配置
import react from '@vitejs/plugin-react'+ import postcss from 'postcss-pxtorem'
//注意，这里和之前的不一样，将defineConfig({})中对像按照配置dev环境一样改成了箭头函数
export default defineConfig((command, mode) => {return {plugins: [react(),],// css模块适配移动端+ css: {postcss: {plugins: [postcss({ // 把px单位换算成rem单位rootValue: 16, // 换算基数，默认100，这样的话把根标签的字体规定为1rem//为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。propList: ['*'], //属性的选择器，*表示通用unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。exclude: /(node_module)/,  // 默认false，可以（reg）利用正则表达//式 排除某些文件夹的方法})]}}}
})

5，antd-mobile按需引入

安装antd-mobile

yarn add antd-mobile # yarn安装
npm install yarn add antd-mobile # npm安装

插件配置

import { defineConfig } from 'vite'  // defineConfig对vite进行配置
import react from '@vitejs/plugin-react'+ import postcss from 'postcss-pxtorem'
+ import vitePluginImp from 'vite-plugin-imp' export default defineConfig((command, mode) => {return {plugins: [react(),// antd按需引入样式+ vitePluginImp({libList: [{libName: 'antd-mobile',libDirectory: 'es/components',style(name) {return `antd-mobile/es/components/${name}/${name}.css`},},]})],})

6, 配置别名

import { defineConfig } from 'vite'  // defineConfig对vite进行配置
import react from '@vitejs/plugin-react'
import postcss from 'postcss-pxtorem'
import vitePluginImp from 'vite-plugin-imp' //vitePluginImp 是将 antd-mobile 进行按需加载export default defineConfig((command, mode) => {return {plugins: [react(),// antd按需引入样式vitePluginImp({libList: [{libName: 'antd-mobile',libDirectory: 'es/components',style(name) {return `antd-mobile/es/components/${name}/${name}.css`},},]})],// 配置别名+ resolve: {extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],alias: {'@': '/src'}},css: {postcss: {plugins: [postcss({ // 把px单位换算成rem单位rootValue: 16, // 换算基数，默认100，这样的话把根标签的字体规定为1rem//为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。propList: ['*'], //属性的选择器，*表示通用unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。exclude: /(node_module)/,  // 默认false，可以（reg）利用正则表达//式 排除某些文件夹的方法})]}}}})

canvas碰撞效果

1,初始化

import React, { useEffect } from 'react'export default function(props) {// 全局变量let canvas// 将通过面相对象的小球push进去，后面调用才知道是哪一个小球在运动let ballArr = []// 定时器名字let timerC// 小球左边的文字let fireWords = '你的眼睛|像星星|一样美丽|无论冬夏|晴雨山川|一样灿烂|我的眼睛|因为|有你|所以更美'// 对文字做切割let textArr = fireWords.split('|')useEffect(() => {// 获取canvas标签canvas = document.getElementById('tutorial');// 生成canvas上下文，创建都用上这个let ctx = canvas.getContext('2d');// 调用函数绘画draw(ctx)// 切换页面取消定时器return () => { clearInterval(timerC) }}, [])return (<canvas id="tutorial" width="375" height="750">你的浏览器不支持canvas,请升级你的浏览器</canvas>)
}

2，绘画draw()函数实现

    const draw = (ctx) => {// 创建10小球，小球个数可以更多for (let index = 0; index < 10; index++) {// 构造10个随机的小球参数对象var ball = new Ball()// 将每个对象push进去ballArr.push(ball)}// 通过定时器移动小球x,y坐标，实现小球的移动timerC = setInterval(() => {// 每次进行定时移动的时候,清除画布，不然图像会连在一块ctx.clearRect(0, 0, 375, 750)// 遍历ballArr，将所有参数取出来，通过show()创建小球for (let index = 0; index < ballArr.length; index++) {var ball = ballArr[index]// 创建小球show(ctx, ball, textArr[index])//二次循环，确定直线的位置for (let j = 0; j < index; j++) {const preBall = ballArr[j]// 画连接的直线drawLine(ctx, preBall.x, preBall.y, ball.x, ball.y, ball.color)}}}, 20)}

3，面相对象写法。创建不同小球的参数

 // 设置一个随机数const randMod = (number) => {return parseInt(Math.random() * number)}function Ball() {// 的this指向new Ball()这个对象this.w = 375 //画布的宽this.h = 750 //画布的宽this.x = randMod(5) + 60 //小球的x坐标this.y = randMod(5) + 60 //小球的y坐标this.r = randMod(50) + 10 //[10,60] //小球的半径// this.color = '#' + parseInt(Math.random() * 0xffffff).toString(16)//随机颜色this.color = "rgb(" + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ")"this.xSpeed = randMod(2) + 3// [3,5] // 每个小球的速度，按x轴移动this.ySpeed = randMod(3) + 1// [1,4] // 每个小球的速度，按y轴移动}

4，画直线

 const drawLine = (ctx, x1, y1, x2, y2, color) => {ctx.beginPath()ctx.moveTo(x1, y1)ctx.lineTo(x2, y2)ctx.closePath()ctx.stroke();ctx.strokeStyle = color
}

5,小球展示

    const show = function (ctx, ball, text) {// 每次展示的时候先运行一下run(ball)// 每次开始show被调用时，都要重新绘制路径，不然小球会连在一块儿ctx.beginPath()// 画小球ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI, false)// 设置颜色ctx.fillStyle = ball.colorctx.fill()//描述文字text && drawText(ctx, text, ball.x, ball.y, ball.r, ball.color)}

6，小球运行

    const run = function (ball) {if (ball.x - ball.r < 0 || ball.x + ball.r > ball.w) {ball.xSpeed = -ball.xSpeed}if (ball.y - ball.r < 0 || ball.y + ball.r > ball.h) {ball.ySpeed = -ball.ySpeed}ball.x = ball.x + ball.xSpeedball.y = ball.y + ball.ySpeed}

7,画文字

    const drawText = (ctx, text, x, y, r, color) => {//文字要显示在小球右边，所以用小球的水平位置坐标，加上小球半径，可以作为文字的初始坐标ctx.fillText(text, x + r, y)ctx.fillStyle = colorctx.textAlign = 'left'}

思考

这个例子的小球碰撞，有一些不完美，上面的炫酷文字是另一个页面的，切换过来没有消失。正在学习canvas，所以一起加油。学习后持续输出才能为自己赋能！！！

用vite命令搭个react移动端项目，实现canvas碰撞效果（按需导入antd-mobile，pxtorem适配）相关推荐

React 移动端项目之pdf预览
因为项目需要,需要在在项目中实现pdf文件遇见功能,众所周知,安卓老大哥貌似不怎么支持,所以采用的react-pdf插件实现方式,实现方式很简单: 一:引入react-pdf包: yarn add r ...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐> React 移动端 UI 组件库 1. Taro UI for React - 京东出品,多端 ...
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架启动项目 git clone ht ...
使用Vite 搭建高可用的服务端渲染SSR工程
在非常早期的 Web 开发中,大家还在使用 JSP 这种古老的模板语法来编写前端的页面,然后直接将 JSP 文件放到服务端,在服务端填入数据并渲染出完整的页面内容,可以说那个时代的做法是天然的服务端渲 ...
React服务端渲染（SSR）入门及项目搭建
代码已经关联到github: 链接地址文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(: 前言服务端渲染是什么?我们什么情况下需要使用它?想要了解这些,需要简单 ...
手把手带你用next搭建一个完善的react服务端渲染项目（集成antd、redux、样式解决方案）
前言本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目,也算是做个笔记吧. 源码地址 github.com/sl1673495/n- 介绍 Next ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
react服务端/客户端，同构代码心得
FKP-REST是一套全栈javascript框架 react服务端/客户端,同构代码心得作者:webkixi react服务端/客户端,同构代码心得服务端,客户端同构一套代码,大前端的梦想,为了 ...
React服务端渲染实现（基于Dva)
React服务端渲染实现 (基于Dva) 功能基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再 ...

用vite命令搭个react移动端项目，实现canvas碰撞效果（按需导入antd-mobile，pxtorem适配）

前言

效果

实现步骤

一，项目搭建

canvas碰撞效果

思考

用vite命令搭个react移动端项目，实现canvas碰撞效果（按需导入antd-mobile，pxtorem适配）相关推荐

最新文章

热门文章