uniapp编辑教程

uniapp 基础编辑环境搭建

下载并安装 HBuilderX 作为开发工具，它是官方推荐的 IDE，内置对 uniapp 的深度支持。创建新项目时选择 uniapp 模板，根据需求选择 Vue2 或 Vue3 版本。

配置 manifest.json 文件以设置应用名称、图标等基本信息。通过 pages.json 定义页面路由与窗口样式，这是 uniapp 特有的多端统一路由管理方式。

页面结构与组件编写

采用 Vue 单文件组件（.vue）形式编写页面，模板部分使用类 HTML 语法，支持所有 Vue 指令。样式部分可使用 CSS/SCSS/LESS，通过 lang 属性指定预处理器类型。

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp'
    }
  }
}
</script>

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

跨平台 API 调用

使用 uni 命名空间调用跨端 API，例如网络请求、本地存储等功能。这些 API 会自动适配各平台底层实现：

uni.request({
  url: 'https://example.com/api',
  success: (res) => {
    console.log(res.data)
  }
})

uni.setStorageSync('key', 'value')

条件编译处理平台差异

通过特殊注释语法实现多端差异化代码，这是 uniapp 实现跨端兼容的核心方案：

// #ifdef H5
console.log('这段代码只在H5平台执行')
// #endif

// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序平台执行')
// #endif

组件库与插件使用

通过 npm 安装官方组件库如 @dcloudio/uni-ui，或第三方组件库。在 pages.json 中配置 easycom 规则实现自动按需引入：

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  }
}

调试与发布流程

在 HBuilderX 中直接运行到指定平台模拟器或真机调试。使用发行菜单生成各平台特定包：

• 小程序平台生成上传代码包
• APP 平台生成 ipa/apk 安装包
• H5 生成静态网站资源

性能优化技巧

避免在模板中使用复杂表达式，大数据列表使用 virtual-list 组件。图片资源使用压缩工具处理，静态资源尽量放在 static 目录。使用分包加载机制减少主包体积：

"subPackages": [
  {
    "root": "pages/sub",
    "pages": [
      {
        "path": "moduleA",
        "style": {}
      }
    ]
  }
]