手机uniapp入门
环境准备
安装HBuilderX（官方IDE），支持Windows/MacOS。官网下载后解压即可使用，无需安装。确保Node.js（≥12）已安装，用于包管理和编译。
项目创建
打开HBuilderX，选择“新建项目” → “uni-app” → 默认模板。填写项目名称和存储路径，选择Vue 2或3版本（推荐Vue 3）。
目录结构
pages：页面目录，每个子文件夹代表一个页面，需在pages.json中配置路由。static：静态资源（图片、字体等）。manifest.json：应用配置（AppID、启动图等）。App.vue：根组件，全局样式和生命周期。
页面开发
在pages/index/index.vue中编写模板、脚本和样式：
<template>
<view class="content">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return { message: 'Hello uni-app' };
}
};
</script>
<style>
.content { text-align: center; }
</style> 路由配置
修改pages.json，新增页面路径：
{
"pages": [
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },
{ "path": "pages/detail/detail", "style": { "navigationBarTitleText": "详情" } }
]
} 组件使用
内置组件如<view>, <button>，跨端兼容。通过npm安装第三方组件（如uView），需在main.js中引入：
import uView from 'uview-ui';
app.use(uView); 调试与发布
- H5：直接运行到浏览器。
- 小程序：需安装开发者工具，HBuilderX生成代码后导入。
- App：云打包或本地打包，需配置证书（Android）和描述文件（iOS）。
注意事项
- 样式单位建议用
rpx（自适应分辨率）。 - 接口调用注意跨端兼容，使用
uni.request封装请求。 - 发布前真机测试，确保各端功能一致。
