uni-app 如何开发多平台小程序

Uni-app 是一个使用 Vue.js 语法开发跨平台应用的前端框架，可以一次性编写代码并发布到多个平台，包括小程序（如微信小程序、支付宝小程序、百度小程序等）、H5、App（iOS 和 Android）等。以下是使用 uni-app 开发多平台小程序的基本步骤：

 

### 1. 安装 HBuilderX 开发工具

HBuilderX 是 DCloud 提供的一款高效开发工具，支持 uni-app 的开发。你可以从 [HBuilderX 官网](https://www.dcloud.io/hbuilderx.html) 下载并安装。

 

### 2. 创建项目

打开 HBuilderX，选择“文件” -> “新建” -> “项目”，然后选择“uni-app”项目模板。

 

### 3. 编写代码

在 `pages` 目录下创建页面文件夹和页面文件。以下是一个简单的首页示例：

 

```vue

<!-- pages/index/index.vue -->

<template>

  <view class="container">

    <text class="title">Hello uni-app</text>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      title: 'Hello uni-app'

    }

  }

}

</script>

 

<style>

.container {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

}

.title {

  font-size: 24px;

  color: #333;

}

</style>

```

 

### 4. 配置页面路由

在 `pages.json` 文件中配置页面路由：

 

```json

{

  "pages": [

    {

      "path": "pages/index/index",

      "style": {

        "navigationBarTitleText": "首页"

      }

    }

  ]

}

```

 

### 5. 选择发布平台

在 HBuilderX 中，选择“发行” -> “小程序-微信” 或其他小程序平台。HBuilderX 会根据选择的平台生成相应的代码包。

 

### 6. 预览和调试

在 HBuilderX 中，可以直接点击工具栏中的“运行”按钮来预览和调试代码。你可以选择在微信开发者工具或其他小程序开发工具中进行调试。

 

### 7. 发布

在 HBuilderX 中，选择“发行” -> “小程序-微信”（或其他小程序平台），然后根据提示生成相应的小程序代码包。接下来，你需要将生成的代码包上传到相应的小程序平台的开发者后台进行发布。

 

### 示例代码

以下是一个更完整的 uni-app 项目结构示例：

 

```plaintext

uni-app-project/

├── pages/

│ ├── index/

│ │ └── index.vue

├── static/

├── components/

├── main.js

├── App.vue

├── manifest.json

├── pages.json

└── uni.scss

```

 

`main.js` 文件：

 

```javascript

import Vue from 'vue'

import App from './App.vue'

 

Vue.config.productionTip = false

 

App.mpType = 'app'

 

const app = new Vue({

  ...App

})

app.$mount()

```

 

`App.vue` 文件：

 

```vue

<template>

  <App/>

</template>

 

<script>

import App from './App.vue'

export default {

  components: {

    App

  }

}

</script>

```

 

`manifest.json` 文件中配置应用的基本信息和平台：

 

```json

{

  "name": "uni-app",

  "version": "1.0.0",

  "description": "A uni-app project",

  "appid": "__UNI__XXXXXX",

  "dependencies": {},

  "minPlatformVersion": "1.0",

  "mp-weixin": {

    "appid": "YOUR_WEIXIN_APPID"

  },

  "mp-alipay": {

    "appid": "YOUR_ALIPAY_APPID"

  }

}

```

 

通过以上步骤，你就可以使用 uni-app 开发多平台小程序了。根据需要，你还可以进一步扩展和优化你的应用。