uniapp教程

uniapp 入门基础

uniapp 是一个使用 Vue.js 开发跨平台应用的框架，支持编译到 iOS、Android、H5 以及小程序等多个平台。以下是快速入门的关键点。

环境搭建 安装 HBuilderX（官方推荐的 IDE），内置了 uniapp 的开发环境。下载后直接创建 uniapp 项目即可开始开发。

项目结构

• pages：存放页面文件，每个页面是一个文件夹，包含 .vue 文件。
• static：存放静态资源如图片。
• App.vue：应用的主组件。
• main.js：应用入口文件。

核心语法与 Vue.js 对比

uniapp 的语法与 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 = 'Message changed'
    }
  }
}
</script>

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

跨平台适配

uniapp 提供条件编译语法，解决不同平台的差异问题。例如，仅在微信小程序中执行的代码：

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

常用组件与 API

uniapp 封装了跨平台组件和 API，例如：

• 组件：<view>、<text>、<button> 等。
• API：uni.request（网络请求）、uni.showToast（提示框）等。

网络请求示例：

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

生命周期

uniapp 的生命周期包括应用生命周期和页面生命周期。常用生命周期函数：

• onLaunch：应用初始化时触发。
• onShow：页面显示时触发。
• onLoad：页面加载时触发。

发布与打包

在 HBuilderX 中，选择菜单栏的“发行”即可打包对应平台的应用。需注意：

• 小程序：需配置对应的开发者工具路径。
• App：需生成证书并配置打包信息。
• H5：直接生成静态文件部署到服务器。

学习资源推荐

• 官方文档：uniapp.dcloud.io
• DCloud 插件市场：ext.dcloud.net.cn
• 社区论坛：ask.dcloud.net.cn

通过以上内容可快速掌握 uniapp 的基础开发流程。实际开发中需结合具体平台特性调整代码。