uniapp项目教程

uniapp项目教程

uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（包括 iOS、Android、H5、小程序等）。以下是详细的教程指南，帮助快速上手 uniapp 项目开发。

环境搭建

1. 安装 HBuilderX
   HBuilderX 是官方推荐的开发工具，支持 uniapp 项目的创建、调试和打包。

   • 下载地址：HBuilderX 官网
   • 安装完成后，启动 HBuilderX，选择新建 uniapp 项目。

2. 安装 Node.js 和 npm

   • 确保系统已安装 Node.js（建议版本 14+），用于依赖管理。
   • 验证安装：

     node -v
     npm -v

3. 安装 Vue CLI（可选）
   如需使用命令行创建项目，可全局安装 Vue CLI：

   npm install -g @vue/cli

创建 uniapp 项目

1. 通过 HBuilderX 创建

   • 打开 HBuilderX，选择“文件” → “新建” → “项目”。
   • 选择“uniapp”模板，填写项目名称和路径，点击“创建”。

2. 通过命令行创建
   使用 Vue CLI 初始化 uniapp 项目：

   vue create -p dcloudio/uni-preset-vue my-uniapp

   选择默认模板或自定义配置。

项目结构说明

典型的 uniapp 项目目录结构如下：

├── pages           # 页面目录，每个页面一个文件夹
│   └── index       # 示例页面
│       ├── index.vue
│       └── index.json
├── static          # 静态资源（图片、字体等）
├── components      # 公共组件
├── App.vue         # 应用入口组件
├── main.js         # 应用入口脚本
├── manifest.json   # 应用配置（如 AppID、启动页）
└── pages.json      # 页面路由与样式配置

页面开发

1. 创建页面
   在 pages 目录下新建文件夹（如 detail），并创建以下文件：

   • detail.vue：页面逻辑与模板。
   • detail.json（可选）：页面配置（如导航栏标题）。

2. 配置路由
   在 pages.json 中注册页面：

   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": { "navigationBarTitleText": "首页" }
       },
       {
         "path": "pages/detail/detail",
         "style": { "navigationBarTitleText": "详情页" }
       }
     ]
   }

3. 页面跳转
   使用 uni.navigateTo 实现页面跳转：

   uni.navigateTo({
     url: '/pages/detail/detail'
   });

组件使用

1. 创建组件
   在 components 目录下新建组件（如 MyButton.vue）：

   <template>
     <button @click="handleClick">{{ text }}</button>
   </template>
   
   <script>
   export default {
     props: ['text'],
     methods: {
       handleClick() {
         this.$emit('click');
       }
     }
   };
   </script>

2. 引入组件
   在页面中引入并使用：

   <template>
     <MyButton text="点击" @click="onButtonClick" />
   </template>
   
   <script>
   import MyButton from '@/components/MyButton.vue';
   export default {
     components: { MyButton },
     methods: {
       onButtonClick() {
         console.log('按钮点击');
       }
     }
   };
   </script>

调试与发布

1. 运行到浏览器

   • 在 HBuilderX 中，选择“运行” → “运行到浏览器” → Chrome。
   • 或使用命令行：

     npm run dev:%PLATFORM%  # %PLATFORM% 替换为 h5、mp-weixin 等

2. 打包发布

   • H5：选择“发行” → “网站-H5手机版”，生成 dist 目录。
   • 小程序：选择“发行” → “小程序-微信”，生成 unpackage/dist/build/mp-weixin。
   • App：需配置 manifest.json，选择“发行” → “原生App-云打包”。

常见问题

1. 跨端兼容性
   使用条件编译处理平台差异：

   // #ifdef H5
   console.log('仅 H5 平台生效');
   // #endif

2. 静态资源路径
   建议使用绝对路径（/static/logo.png）或 @/static/logo.png。

3. 性能优化

   • 减少大图使用，压缩静态资源。
   • 使用 v-if 替代 v-show 控制组件渲染。

通过以上步骤，可以快速掌握 uniapp 的基础开发流程。如需深入学习，可参考官方文档或社区教程。