要用hbuilderx开发能跑通的uni-app应用，必须完成页面创建、组件复用、真实接口调用和多端预览四个关键动作；需新建项目并清空默认首页内容，手动注册页面到tabbar，封装newscard组件，调用真实api（推荐封装request.js），最后分别运行至浏览器、微信模拟器和真机验证。
要用HBuilderX开发一个能跑通的uni-app应用，必须完成页面创建、组件复用、真实接口调用和多端预览这四个关键动作，缺一不可。
创建项目并初始化结构
打开HBuilderX → 文件 → 新建 → 项目 → 选择「uni-app」→ 模板选「默认模板(Vue3)」→ 输入项目名（如news-app）→ 点击创建。
创建后立即删除 pages/index/index.vue 中除 <template></template>、<script setup></script>、<style scoped></style> 之外的所有内容，避免默认示例干扰后续开发。
【必须清空默认内容】否则首页会残留测试数据和样式，导致后续列表渲染异常或样式冲突。
新建页面并注册到TabBar
在 pages 目录右键 → 新建页面 → 输入名称（如home）→ 勾选「创建同名目录」→ 确认。
HBuilderX会自动在 pages.json 中注册该页面路径，但不会自动加入TabBar；需手动编辑 pages.json 的 "tabBar" 节点：
在 "list" 数组内添加对象：{"pagePath": "pages/home/home", "text": "首页", "iconPath": "static/icons/home.png", "selectedIconPath": "static/icons/home-active.png"}。
注意：图标文件需提前放入 static/icons/ 目录，否则真机运行时TabBar图标不显示且无报错提示。
封装可复用新闻卡片组件
在 components 目录右键 → 新建 → Vue组件 → 命名为 NewsCard.vue。
组件内使用 defineProps 接收 title、date、imgUrl 三个 prop，模板中用 <image></image> 渲染封面图，用 <text></text> 显示标题和时间。
在 pages/home/home.vue 中通过 <news-card></news-card> 标签引入并传入数据，记得在 <script setup></script> 开头用 import NewsCard from '@/components/NewsCard.vue' 声明。
调用真实API获取新闻列表
方法一：使用 uni.request 直接请求
在 pages/home/home.vue 的 onLoad 生命周期中调用：uni.request({ url: 'https://api.example.com/news', success: (res) => { newsList = res.data } })。
方法二：封装成 request.js 工具函数（推荐）
在 utils 目录新建 request.js，导出默认函数，内部统一处理 header、timeout 和错误弹窗；调用时只需写 request('/news')。
⚠️ 注意：H5端请求需配置 manifest.json → H5设置 → 运行基础URL，否则跨域报错且控制台无明确提示。
运行与多端预览
第一步：点击顶部菜单「运行」→「运行到浏览器」→ 选择「Chrome」或「内置浏览器」，验证H5页面逻辑和样式。
第二步：确保已安装微信开发者工具 → 「运行」→「运行到小程序模拟器」→「微信开发者工具」，检查TabBar切换、下拉刷新是否生效。
第三步：连接安卓手机并开启USB调试 → 「运行」→「运行到手机或模拟器」→ 选择对应设备，观察原生渲染效果与H5是否存在布局偏移。
