uniapp编辑教程

uniapp 基础环境搭建

确保已安装最新版 HBuilderX，这是官方推荐的开发工具，支持 uniapp 项目创建和调试。从官网下载并安装后，启动 HBuilderX。

在 HBuilderX 中新建 uniapp 项目时，选择模板类型（如默认模板、uni-ui 项目等），填写项目名称和存储路径。项目创建完成后，会自动生成基础目录结构，包括 pages、static 等文件夹。

页面创建与路由配置

在 pages 文件夹下新建页面文件夹（如 home），右键选择“新建页面”会自动生成 .vue 文件和相关配置。页面路由通过 pages.json 管理，在此文件中添加页面路径和窗口样式：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

组件与模板语法

使用 Vue 的单文件组件（.vue）开发页面，模板部分支持 Vue 指令和 uniapp 扩展的组件。例如，使用 view 替代 HTML 的 div，text 替代 span：

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

脚本部分与 Vue 一致，支持 data、methods 等选项：

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp'
    }
  },
  methods: {
    changeMessage() {
      this.message = '内容已更新';
    }
  }
}
</script>

样式编写与适配

样式部分支持 CSS 预处理器（如 SCSS），通过 <style> 标签编写。使用 rpx 单位实现自适应布局，750rpx 等于屏幕宽度：

<style>
.container {
  padding: 20rpx;
}
button {
  margin-top: 30rpx;
}
</style>

跨端 API 调用

uniapp 提供统一的 API 跨平台调用，例如网络请求 uni.request：

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

设备相关 API 如获取系统信息：

uni.getSystemInfo({
  success: (res) => {
    console.log(res.platform);
  }
});

发布与打包

在 HBuilderX 中选择“发行”菜单，根据目标平台（小程序、App、H5）生成对应包。小程序需填写 AppID；App 打包需配置证书；H5 可直接生成静态文件部署到服务器。

调试时使用内置模拟器或真机调试功能。通过数据线连接手机，开启 USB 调试模式，HBuilderX 会自动检测设备并安装调试基座。