uniapp指南

uniapp 简介

uniapp 是一个使用 Vue.js 开发跨平台应用的框架，支持编译到 iOS、Android、H5、微信小程序、支付宝小程序、百度小程序等多个平台。它基于 Vue 的语法和组件化思想，开发者可以通过一套代码实现多端发布。

开发环境搭建

安装 HBuilderX：HBuilderX 是 uniapp 官方推荐的开发工具，支持代码高亮、智能提示和一键运行到多端。从官网下载并安装适合的版本。

安装 Node.js：确保系统已安装 Node.js（建议版本 12+），用于依赖管理和打包构建。

创建 uniapp 项目：在 HBuilderX 中选择新建项目，选择 uniapp 模板，或通过命令行创建：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

项目结构说明

• pages：页面目录，每个页面是一个单独的文件夹，包含 .vue 文件。
• static：静态资源目录，存放图片、字体等文件。
• components：可复用的组件目录。
• manifest.json：应用配置，如 AppID、启动图、权限等。
• pages.json：路由和页面样式配置。
• App.vue：应用入口文件，可设置全局样式和生命周期。

基础语法与组件

uniapp 使用 Vue 的单文件组件（.vue）开发，模板语法与 Vue 一致。例如：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">点击</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello uniapp"
    };
  },
  methods: {
    handleClick() {
      uni.showToast({ title: "点击事件触发" });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

多端适配与条件编译

uniapp 支持条件编译，通过注释语法实现不同平台的代码差异化：

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

// #ifdef MP-WEIXIN
console.log("仅在微信小程序生效");
// #endif

常用 API

uniapp 提供丰富的 API，涵盖网络请求、存储、设备信息等：

• 网络请求：uni.request({ url, method, data })
• 本地存储：uni.setStorageSync(key, value)
• 路由跳转：uni.navigateTo({ url })
• 获取设备信息：uni.getSystemInfoSync()

调试与发布

调试：在 HBuilderX 中选择运行到浏览器或模拟器，实时查看效果。小程序需使用开发者工具预览。

发布：在 HBuilderX 中选择发行，生成对应平台的包。小程序需上传至各自平台审核，App 需打包为 IPA 或 APK。

性能优化建议

减少全局样式：避免在 App.vue 中定义过多全局样式，防止样式污染。

图片压缩：使用工具压缩静态图片，减少包体积。

按需加载：使用分包加载功能，拆分大型应用为多个子包。

学习资源

• 官方文档：uniapp 官网
• 社区论坛：DCloud 社区
• GitHub 示例：uniapp 示例项目