当前位置：首页 > uni-app

uniapp写程序

2026-03-05 04:02:04uni-app

使用 UniApp 开发应用程序

UniApp 是一个基于 Vue.js 的跨平台开发框架，允许开发者使用一套代码同时发布到 iOS、Android、H5 及小程序等多个平台。以下是 UniApp 开发的基本流程和关键要点。

环境搭建

安装开发工具
- 下载并安装 HBuilderX（官方推荐的 IDE），提供更好的 UniApp 开发支持。
- 确保 Node.js 已安装，用于依赖管理和构建。
创建项目
- 在 HBuilderX 中选择“新建项目” → “UniApp”，选择默认模板或自定义模板。
- 通过命令行创建项目：
```
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-uniapp
```
安装依赖
- 进入项目目录，安装必要的依赖：
```
npm install
```

开发核心概念

目录结构
- pages：存放页面，每个页面为一个文件夹，包含 .vue 文件。
- static：存放静态资源（图片、字体等）。
- components：存放可复用的组件。
- manifest.json：配置应用名称、图标等基本信息。
- pages.json：配置页面路由、导航栏样式等。

页面开发

uniapp写程序

每个页面由 <template>、<script> 和 <style> 组成，语法与 Vue.js 一致。

示例页面代码：

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

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp!'
    }
  },
  methods: {
    changeMessage() {
      this.message = '消息已更新';
    }
  }
}
</script>

<style>
view {
  padding: 20px;
}
</style>

路由与导航

uniapp写程序

在 pages.json 中配置页面路径：

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

使用 uni.navigateTo 进行页面跳转：

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

跨平台适配

条件编译

通过注释实现不同平台的代码适配：

// #ifdef H5
console.log('仅在 H5 平台执行');
// #endif

组件与 API 兼容性
- 使用 UniApp 提供的跨平台组件（如 <view>、<button>）代替 HTML 原生标签。
- 调用 UniApp API（如 uni.request、uni.showToast）替代浏览器或小程序原生 API。

调试与发布

运行项目
- 在 HBuilderX 中选择运行到浏览器、模拟器或真机。
- 命令行运行：
```
npm run dev:%PLATFORM%  # 如 npm run dev:mp-weixin
```
打包发布
- 在 HBuilderX 中选择“发行”生成各平台的应用包。
- 通过命令行构建：
```
npm run build:%PLATFORM%
```