uniapp简单项目
uniapp 简单项目创建步骤
确保已安装 HBuilderX（官方推荐的开发工具）和 Node.js 环境。HBuilderX 提供了一键创建项目的功能，简化了初始化流程。
打开 HBuilderX，点击菜单栏的“文件” > “新建” > “项目”。选择“uni-app”模板，填写项目名称和存储路径。模板推荐选择“默认模板”或“hello uni-app”作为学习起点。
在项目根目录中，pages 文件夹存放页面文件，每个页面由 .vue 文件、js、json 和 wxss 文件组成。manifest.json 配置应用名称、图标等全局信息，App.vue 是应用入口组件。
编写第一个页面
在 pages 目录下新建一个文件夹（如 home），并创建 home.vue 文件。以下是一个简单示例：
<template>
<view class="content">
<text>Hello UniApp!</text>
<button @click="showToast">点击提示</button>
</view>
</template>
<script>
export default {
methods: {
showToast() {
uni.showToast({
title: '欢迎使用UniApp',
icon: 'none'
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>配置页面路由
在 pages.json 中注册页面路由。将新建的 home 页面设置为首页：
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Demo",
"backgroundColor": "#F8F8F8"
}
}运行与调试
通过 HBuilderX 顶部的运行菜单，选择目标平台（如微信小程序、H5 或安卓模拟器）。点击运行后，工具会自动编译并启动调试环境。对于 H5 平台，项目会生成一个本地服务器地址，浏览器访问即可预览。
扩展功能示例
调用设备 API 或使用 UI 组件库（如 uni-ui）可以快速增强功能。以下示例展示获取地理位置：
<script>
export default {
methods: {
getLocation() {
uni.getLocation({
type: 'wgs84',
success: res => {
console.log('纬度：' + res.latitude, '经度：' + res.longitude);
}
});
}
}
}
</script>注意事项
开发多端应用时，注意 API 和样式的平台差异。通过条件编译处理不同平台的代码，例如：
// #ifdef MP-WEIXIN
console.log('微信小程序特有逻辑');
// #endif项目打包发布时，需在 manifest.json 中配置各平台的应用标识，并通过 HBuilderX 的“发行”菜单生成对应平台的提交包。
