uni-app Hello World 完整教程从软件安装开始uni-app 官方推荐使用HBuilderX IDE开发内置环境、开箱即用无需手动配置 Node.jsApp 开发版适合零基础快速上手。以下从安装到运行 Hello World 全流程讲解。一、安装开发工具HBuilderX1. 下载 HBuilderX访问官网https://www.dcloud.io/hbuilderx.html选择App 开发版包含 uni-app 全环境无需额外装插件对应系统下载Windowsexe、macOSdmg、Linuxtar.gz2. 安装 HBuilderXWindows双击 exe → 选安装路径建议非系统盘无中文/特殊字符→ 勾选桌面快捷方式 → 完成macOS打开 dmg → 拖拽 HBuilderX 到 Applications 文件夹Linux解压 tar.gz → 双击 HBuilderX 启动首次启动同意用户协议等待初始化完成即可3. 可选安装微信开发者工具小程序调试必备下载https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html安装后打开 → 微信扫码登录 → 开启服务端口设置 → 安全设置 → 服务端口HBuilderX 配置工具 → 设置 → 运行配置 → 填写微信开发者工具安装路径二、创建第一个 uni-app 项目打开 HBuilderX → 顶部菜单文件 → 新建 → 项目快捷键 Ctrl/CmdN弹出窗口配置项目类型uni-app项目名称HelloUniApp英文无中文/空格模板选默认模板最简或Hello uni-app官方示例Vue 版本选Vue3最新主流项目路径选本地空文件夹无中文点击创建等待项目创建完成左侧出现项目目录核心结构如下HelloUniApp/ ├─ pages/ # 页面文件夹所有页面放这里 │ └─ index/ # 首页 │ └─ index.vue # 首页文件核心 ├─ static/ # 静态资源图片、字体 ├─ App.vue # 应用根组件 ├─ main.js # 项目入口 └─ pages.json # 路由/页面配置三、编写 Hello World 代码展开pages/index/双击打开index.vue首页文件删除默认代码替换为最简 Hello World 代码template !-- 页面结构HTML -- view classcontainer text classtitleHello World/text text classsubtitle我的第一个 uni-app 项目/text /view /template script // 页面逻辑JS/Vue3 export default { setup() { // 数据/方法写这里 return {} } } /script style scoped /* 页面样式CSS */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; /* 满屏高度 */ background-color: #f5f5f5; } .title { font-size: 36px; color: #2c3e50; margin-bottom: 20px; } .subtitle { font-size: 18px; color: #7f8c8d; } /style按Ctrl/CmdS保存文件四、运行项目多端测试方式1运行到浏览器H5最快选中左侧项目HelloUniApp顶部菜单运行 → 运行到浏览器 → 选择 Chrome/Edge等待编译完成自动打开浏览器显示Hello World页面方式2运行到微信小程序确保微信开发者工具已开启服务端口HBuilderX运行 → 运行到小程序模拟器 → 微信开发者工具自动打开微信开发者工具加载项目显示 Hello World方式3运行到手机 App真机/模拟器真机手机开启 USB 调试 → 数据线连接电脑 → 运行 → 运行到 Android/iOS App模拟器安装夜神/雷电模拟器 → 配置 HBuilderX 模拟器路径 → 运行到 App 模拟器五、常见问题运行提示缺插件按提示点击安装等待自动下载完成微信小程序无法打开检查开发者工具服务端口是否开启、路径是否配置正确页面不显示确保 index.vue 代码无语法错误、已保存Ctrl/CmdS路径报错项目路径不能有中文、空格、特殊字符完成以上步骤你已成功搭建 uni-app 环境并运行第一个 Hello World 项目uni-app 支持一套代码编译到 H5、小程序、App、快应用等多端后续可学习页面路由、组件、API 等进阶内容。需要我帮你整理uni-app 常用基础组件与 API 速查表方便你后续学习吗2、基于uniapp开发一个贪吃蛇小游戏给出index.vue完整代码基于 uniapp 开发的贪吃蛇小游戏完整 index.vue 代码这是一个纯原生 uniapp 实现、可直接运行在微信小程序/App/H5 端的贪吃蛇小游戏包含完整功能开始游戏、方向控制、吃食物、碰撞检测、计分、游戏结束重启。代码无任何第三方依赖直接复制到pages/index/index.vue即可使用。完整代码templateviewclassgame-container!-- 分数展示 --viewclassscore分数{{ score }} | 最高分数{{ maxScore }}/view!-- 游戏画布 --canvascanvas-idgameCanvasclassgame-canvastouchstarthandleTouchStarttouchendhandleTouchEnd/canvas!-- 游戏控制/状态提示 --viewclassgame-infoviewv-if!isGameStartclassstart-btnclickstartGame点击开始游戏/viewviewv-else-ifisGameOverclassgame-over游戏结束viewclassrestart-btnclickrestartGame重新开始/view/view/view/view/templatescriptexportdefault{data(){return{// 画布配置canvasWidth:300,// 画布宽度canvasHeight:300,// 画布高度gridSize:15,// 每个格子大小gridCount:20,// 格子数量20*20网格// 蛇配置snake:[],// 蛇身体数组 [{x,y}]snakeSpeed:150,// 移动速度毫秒direction:right,// 默认方向nextDirection:right,// 下一个方向防止反向// 食物配置food:{},// 食物坐标// 游戏状态isGameStart:false,// 是否开始游戏isGameOver:false,// 是否游戏结束score:0,// 当前分数maxScore:0,// 最高分数gameTimer:null,// 游戏定时器// 触摸滑动记录touchStartX:0,touchStartY:0}},onReady(){// 页面渲染完成初始化画布this.initCanvas();// 读取本地最高分数this.maxScoreuni.getStorageSync(maxScore)||0;},onUnload(){// 页面销毁清除定时器clearInterval(this.gameTimer);},methods:{// 初始化画布initCanvas(){this.ctxuni.createCanvasContext(gameCanvas);// 绘制初始空白画布this.drawCanvas();},// 开始游戏startGame(){// 重置游戏状态this.resetGame();this.isGameStarttrue;this.isGameOverfalse;// 生成蛇和食物this.createSnake();this.createFood();this.drawCanvas();// 启动游戏定时器this.gameTimersetInterval((){this.moveSnake();},this.snakeSpeed);},// 重置游戏数据resetGame(){this.snake[];this.directionright;this.nextDirectionright;this.score0;clearInterval(this.gameTimer);},// 重新开始游戏restartGame(){this.resetGame();this.startGame();},// 初始化蛇默认长度3createSnake(){this.snake[{x:10,y:10},// 蛇头{x:9,y:10},{x:8,y:10}];},// 生成食物随机位置不与蛇身体重叠createFood(){letxMath.floor(Math.random()*this.gridCount);letyMath.floor(Math.random()*this.gridCount);// 判断食物是否在蛇身体上是则重新生成constisOnSnakethis.snake.some(itemitem.xxitem.yy);if(isOnSnake){this.createFood();return;}this.food{x,y};},// 蛇移动逻辑moveSnake(){// 更新方向this.directionthis.nextDirection;// 获取蛇头lethead{...this.snake[0]};// 根据方向移动蛇头switch(this.direction){caseup:head.y--;break;casedown:head.y;break;caseleft:head.x--;break;caseright:head.x;break;}// 碰撞检测撞墙/撞自己 → 游戏结束if(this.checkCollision(head)){this.gameOver();return;}// 将新蛇头加入身体this.snake.unshift(head);// 判断是否吃到食物if(head.xthis.food.xhead.ythis.food.y){this.score10;// 加分this.createFood();// 重新生成食物}else{this.snake.pop();// 没吃到食物删除尾部}// 重新绘制画布this.drawCanvas();},// 碰撞检测checkCollision(head){// 撞墙if(head.x0||head.xthis.gridCount||head.y0||head.ythis.gridCount){returntrue;}// 撞自己身体returnthis.snake.some(itemitem.xhead.xitem.yhead.y);},// 游戏结束gameOver(){this.isGameOvertrue;this.isGameStartfalse;clearInterval(this.gameTimer);// 更新最高分数if(this.scorethis.maxScore){this.maxScorethis.score;uni.setStorageSync(maxScore,this.maxScore);}},// 绘制游戏画布drawCanvas(){// 清空画布this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);// 绘制背景this.ctx.fillStyle#f5f5f5;this.ctx.fillRect(0,0,this.canvasWidth,this.canvasHeight);// 绘制蛇this.ctx.fillStyle#4cd964;this.snake.forEach(item{this.ctx.fillRect(item.x*this.gridSize,item.y*this.gridSize,this.gridSize-1,// 留1px间隙this.gridSize-1);});// 绘制蛇头不同颜色this.ctx.fillStyle#008000;this.ctx.fillRect(this.snake[0].x*this.gridSize,this.snake[0].y*this.gridSize,this.gridSize-1,this.gridSize-1);// 绘制食物this.ctx.fillStyle#ff3b30;this.ctx.fillRect(this.food.x*this.gridSize,this.food.y*this.gridSize,this.gridSize-1,this.gridSize-1);// 渲染画布this.ctx.draw();},// 触摸开始记录起始坐标handleTouchStart(e){this.touchStartXe.changedTouches[0].pageX;this.touchStartYe.changedTouches[0].pageY;},// 触摸结束判断滑动方向handleTouchEnd(e){if(!this.isGameStart||this.isGameOver)return;constendXe.changedTouches[0].pageX;constendYe.changedTouches[0].pageY;constdisXendX-this.touchStartX;constdisYendY-this.touchStartY;// 判断滑动方向取绝对值大的轴if(Math.abs(disX)Math.abs(disY)){// 左右滑动if(disX0this.direction!left){this.nextDirectionright;}elseif(disX0this.direction!right){this.nextDirectionleft;}}else{// 上下滑动if(disY0this.direction!up){this.nextDirectiondown;}elseif(disY0this.direction!down){this.nextDirectionup;}}}}};/scriptstylescoped.game-container{display:flex;flex-direction:column;align-items:center;padding:20rpx;box-sizing:border-box;}.score{font-size:32rpx;font-weight:bold;color:#333;margin-bottom:20rpx;}.game-canvas{width:300px;height:300px;border:3rpx solid #333;background-color:#f5f5f5;}.game-info{margin-top:30rpx;text-align:center;}.start-btn, .restart-btn{width:200rpx;height:80rpx;line-height:80rpx;background-color:#4cd964;color:#fff;border-radius:10rpx;font-size:30rpx;font-weight:bold;}.game-over{font-size:36rpx;font-weight:bold;color:#ff3b30;margin-bottom:20rpx;}/style核心功能说明跨端兼容基于 uniapp 标准 canvas 实现支持 H5、微信小程序、App、支付宝小程序等全端运行操作方式屏幕滑动控制方向上/下/左/右禁止反向移动游戏规则吃到红色食物 10 分蛇身体变长撞墙/撞到自己身体 → 游戏结束自动记录本地最高分数视觉效果蛇头绿色加深、身体浅绿色、食物红色格子带间隙视觉更清晰使用方法新建 uniapp 项目找到pages/index/index.vue全选替换为上面的完整代码直接运行即可H5 浏览器、微信小程序开发者工具、真机调试都支持可自定义修改项画布大小修改canvasWidth/canvasHeight游戏难度修改snakeSpeed数值越小速度越快网格大小修改gridSize/gridCount颜色样式在drawCanvas方法中修改fillStyle颜色值分数规则修改吃到食物后的加分数值总结这是开箱即用的 uniapp 贪吃蛇完整代码无需额外配置基于 canvas 绘制滑动控制方向包含完整游戏逻辑与计分系统全端兼容可直接打包发布为小程序/App/H5 版本
uniapp学习1，hello world 项目，打包到微信小程序,贪吃蛇小游戏
发布时间：2026/6/7 1:22:04
uni-app Hello World 完整教程从软件安装开始uni-app 官方推荐使用HBuilderX IDE开发内置环境、开箱即用无需手动配置 Node.jsApp 开发版适合零基础快速上手。以下从安装到运行 Hello World 全流程讲解。一、安装开发工具HBuilderX1. 下载 HBuilderX访问官网https://www.dcloud.io/hbuilderx.html选择App 开发版包含 uni-app 全环境无需额外装插件对应系统下载Windowsexe、macOSdmg、Linuxtar.gz2. 安装 HBuilderXWindows双击 exe → 选安装路径建议非系统盘无中文/特殊字符→ 勾选桌面快捷方式 → 完成macOS打开 dmg → 拖拽 HBuilderX 到 Applications 文件夹Linux解压 tar.gz → 双击 HBuilderX 启动首次启动同意用户协议等待初始化完成即可3. 可选安装微信开发者工具小程序调试必备下载https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html安装后打开 → 微信扫码登录 → 开启服务端口设置 → 安全设置 → 服务端口HBuilderX 配置工具 → 设置 → 运行配置 → 填写微信开发者工具安装路径二、创建第一个 uni-app 项目打开 HBuilderX → 顶部菜单文件 → 新建 → 项目快捷键 Ctrl/CmdN弹出窗口配置项目类型uni-app项目名称HelloUniApp英文无中文/空格模板选默认模板最简或Hello uni-app官方示例Vue 版本选Vue3最新主流项目路径选本地空文件夹无中文点击创建等待项目创建完成左侧出现项目目录核心结构如下HelloUniApp/ ├─ pages/ # 页面文件夹所有页面放这里 │ └─ index/ # 首页 │ └─ index.vue # 首页文件核心 ├─ static/ # 静态资源图片、字体 ├─ App.vue # 应用根组件 ├─ main.js # 项目入口 └─ pages.json # 路由/页面配置三、编写 Hello World 代码展开pages/index/双击打开index.vue首页文件删除默认代码替换为最简 Hello World 代码template !-- 页面结构HTML -- view classcontainer text classtitleHello World/text text classsubtitle我的第一个 uni-app 项目/text /view /template script // 页面逻辑JS/Vue3 export default { setup() { // 数据/方法写这里 return {} } } /script style scoped /* 页面样式CSS */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; /* 满屏高度 */ background-color: #f5f5f5; } .title { font-size: 36px; color: #2c3e50; margin-bottom: 20px; } .subtitle { font-size: 18px; color: #7f8c8d; } /style按Ctrl/CmdS保存文件四、运行项目多端测试方式1运行到浏览器H5最快选中左侧项目HelloUniApp顶部菜单运行 → 运行到浏览器 → 选择 Chrome/Edge等待编译完成自动打开浏览器显示Hello World页面方式2运行到微信小程序确保微信开发者工具已开启服务端口HBuilderX运行 → 运行到小程序模拟器 → 微信开发者工具自动打开微信开发者工具加载项目显示 Hello World方式3运行到手机 App真机/模拟器真机手机开启 USB 调试 → 数据线连接电脑 → 运行 → 运行到 Android/iOS App模拟器安装夜神/雷电模拟器 → 配置 HBuilderX 模拟器路径 → 运行到 App 模拟器五、常见问题运行提示缺插件按提示点击安装等待自动下载完成微信小程序无法打开检查开发者工具服务端口是否开启、路径是否配置正确页面不显示确保 index.vue 代码无语法错误、已保存Ctrl/CmdS路径报错项目路径不能有中文、空格、特殊字符完成以上步骤你已成功搭建 uni-app 环境并运行第一个 Hello World 项目uni-app 支持一套代码编译到 H5、小程序、App、快应用等多端后续可学习页面路由、组件、API 等进阶内容。需要我帮你整理uni-app 常用基础组件与 API 速查表方便你后续学习吗2、基于uniapp开发一个贪吃蛇小游戏给出index.vue完整代码基于 uniapp 开发的贪吃蛇小游戏完整 index.vue 代码这是一个纯原生 uniapp 实现、可直接运行在微信小程序/App/H5 端的贪吃蛇小游戏包含完整功能开始游戏、方向控制、吃食物、碰撞检测、计分、游戏结束重启。代码无任何第三方依赖直接复制到pages/index/index.vue即可使用。完整代码templateviewclassgame-container!-- 分数展示 --viewclassscore分数{{ score }} | 最高分数{{ maxScore }}/view!-- 游戏画布 --canvascanvas-idgameCanvasclassgame-canvastouchstarthandleTouchStarttouchendhandleTouchEnd/canvas!-- 游戏控制/状态提示 --viewclassgame-infoviewv-if!isGameStartclassstart-btnclickstartGame点击开始游戏/viewviewv-else-ifisGameOverclassgame-over游戏结束viewclassrestart-btnclickrestartGame重新开始/view/view/view/view/templatescriptexportdefault{data(){return{// 画布配置canvasWidth:300,// 画布宽度canvasHeight:300,// 画布高度gridSize:15,// 每个格子大小gridCount:20,// 格子数量20*20网格// 蛇配置snake:[],// 蛇身体数组 [{x,y}]snakeSpeed:150,// 移动速度毫秒direction:right,// 默认方向nextDirection:right,// 下一个方向防止反向// 食物配置food:{},// 食物坐标// 游戏状态isGameStart:false,// 是否开始游戏isGameOver:false,// 是否游戏结束score:0,// 当前分数maxScore:0,// 最高分数gameTimer:null,// 游戏定时器// 触摸滑动记录touchStartX:0,touchStartY:0}},onReady(){// 页面渲染完成初始化画布this.initCanvas();// 读取本地最高分数this.maxScoreuni.getStorageSync(maxScore)||0;},onUnload(){// 页面销毁清除定时器clearInterval(this.gameTimer);},methods:{// 初始化画布initCanvas(){this.ctxuni.createCanvasContext(gameCanvas);// 绘制初始空白画布this.drawCanvas();},// 开始游戏startGame(){// 重置游戏状态this.resetGame();this.isGameStarttrue;this.isGameOverfalse;// 生成蛇和食物this.createSnake();this.createFood();this.drawCanvas();// 启动游戏定时器this.gameTimersetInterval((){this.moveSnake();},this.snakeSpeed);},// 重置游戏数据resetGame(){this.snake[];this.directionright;this.nextDirectionright;this.score0;clearInterval(this.gameTimer);},// 重新开始游戏restartGame(){this.resetGame();this.startGame();},// 初始化蛇默认长度3createSnake(){this.snake[{x:10,y:10},// 蛇头{x:9,y:10},{x:8,y:10}];},// 生成食物随机位置不与蛇身体重叠createFood(){letxMath.floor(Math.random()*this.gridCount);letyMath.floor(Math.random()*this.gridCount);// 判断食物是否在蛇身体上是则重新生成constisOnSnakethis.snake.some(itemitem.xxitem.yy);if(isOnSnake){this.createFood();return;}this.food{x,y};},// 蛇移动逻辑moveSnake(){// 更新方向this.directionthis.nextDirection;// 获取蛇头lethead{...this.snake[0]};// 根据方向移动蛇头switch(this.direction){caseup:head.y--;break;casedown:head.y;break;caseleft:head.x--;break;caseright:head.x;break;}// 碰撞检测撞墙/撞自己 → 游戏结束if(this.checkCollision(head)){this.gameOver();return;}// 将新蛇头加入身体this.snake.unshift(head);// 判断是否吃到食物if(head.xthis.food.xhead.ythis.food.y){this.score10;// 加分this.createFood();// 重新生成食物}else{this.snake.pop();// 没吃到食物删除尾部}// 重新绘制画布this.drawCanvas();},// 碰撞检测checkCollision(head){// 撞墙if(head.x0||head.xthis.gridCount||head.y0||head.ythis.gridCount){returntrue;}// 撞自己身体returnthis.snake.some(itemitem.xhead.xitem.yhead.y);},// 游戏结束gameOver(){this.isGameOvertrue;this.isGameStartfalse;clearInterval(this.gameTimer);// 更新最高分数if(this.scorethis.maxScore){this.maxScorethis.score;uni.setStorageSync(maxScore,this.maxScore);}},// 绘制游戏画布drawCanvas(){// 清空画布this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);// 绘制背景this.ctx.fillStyle#f5f5f5;this.ctx.fillRect(0,0,this.canvasWidth,this.canvasHeight);// 绘制蛇this.ctx.fillStyle#4cd964;this.snake.forEach(item{this.ctx.fillRect(item.x*this.gridSize,item.y*this.gridSize,this.gridSize-1,// 留1px间隙this.gridSize-1);});// 绘制蛇头不同颜色this.ctx.fillStyle#008000;this.ctx.fillRect(this.snake[0].x*this.gridSize,this.snake[0].y*this.gridSize,this.gridSize-1,this.gridSize-1);// 绘制食物this.ctx.fillStyle#ff3b30;this.ctx.fillRect(this.food.x*this.gridSize,this.food.y*this.gridSize,this.gridSize-1,this.gridSize-1);// 渲染画布this.ctx.draw();},// 触摸开始记录起始坐标handleTouchStart(e){this.touchStartXe.changedTouches[0].pageX;this.touchStartYe.changedTouches[0].pageY;},// 触摸结束判断滑动方向handleTouchEnd(e){if(!this.isGameStart||this.isGameOver)return;constendXe.changedTouches[0].pageX;constendYe.changedTouches[0].pageY;constdisXendX-this.touchStartX;constdisYendY-this.touchStartY;// 判断滑动方向取绝对值大的轴if(Math.abs(disX)Math.abs(disY)){// 左右滑动if(disX0this.direction!left){this.nextDirectionright;}elseif(disX0this.direction!right){this.nextDirectionleft;}}else{// 上下滑动if(disY0this.direction!up){this.nextDirectiondown;}elseif(disY0this.direction!down){this.nextDirectionup;}}}}};/scriptstylescoped.game-container{display:flex;flex-direction:column;align-items:center;padding:20rpx;box-sizing:border-box;}.score{font-size:32rpx;font-weight:bold;color:#333;margin-bottom:20rpx;}.game-canvas{width:300px;height:300px;border:3rpx solid #333;background-color:#f5f5f5;}.game-info{margin-top:30rpx;text-align:center;}.start-btn, .restart-btn{width:200rpx;height:80rpx;line-height:80rpx;background-color:#4cd964;color:#fff;border-radius:10rpx;font-size:30rpx;font-weight:bold;}.game-over{font-size:36rpx;font-weight:bold;color:#ff3b30;margin-bottom:20rpx;}/style核心功能说明跨端兼容基于 uniapp 标准 canvas 实现支持 H5、微信小程序、App、支付宝小程序等全端运行操作方式屏幕滑动控制方向上/下/左/右禁止反向移动游戏规则吃到红色食物 10 分蛇身体变长撞墙/撞到自己身体 → 游戏结束自动记录本地最高分数视觉效果蛇头绿色加深、身体浅绿色、食物红色格子带间隙视觉更清晰使用方法新建 uniapp 项目找到pages/index/index.vue全选替换为上面的完整代码直接运行即可H5 浏览器、微信小程序开发者工具、真机调试都支持可自定义修改项画布大小修改canvasWidth/canvasHeight游戏难度修改snakeSpeed数值越小速度越快网格大小修改gridSize/gridCount颜色样式在drawCanvas方法中修改fillStyle颜色值分数规则修改吃到食物后的加分数值总结这是开箱即用的 uniapp 贪吃蛇完整代码无需额外配置基于 canvas 绘制滑动控制方向包含完整游戏逻辑与计分系统全端兼容可直接打包发布为小程序/App/H5 版本
