uniapp学习步骤

原创已于 2025-08-12 16:21:20 修改 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2025-08-12 14:41:44 首次发布

uniapp 专栏收录该内容

61 篇文章

订阅专栏

学习 Uniapp 需要从基础认知到实战应用逐步深入，以下是详细的学习步骤，涵盖核心知识点和实操环节：

一、初识 Uniapp：建立基础认知

1. 了解 Uniapp 的核心概念

定义：Uniapp 是一个使用 Vue.js 开发跨平台应用的框架，可同时发布到微信 / 支付宝 / 百度等小程序、H5、App（iOS/Android）等 10 + 平台。
优势：一套代码多端运行，减少跨平台开发成本；基于 Vue 语法，学习成本低；内置丰富 API 和组件，开发效率高。
应用场景：中小型跨平台应用（如电商、资讯、工具类 App / 小程序）。

2. 明确学习前提

掌握HTML/CSS/JavaScript 基础（核心语法、DOM 操作、ES6 + 特性如箭头函数、Promise）。
了解Vue.js 基础（数据绑定v-model、指令v-if/v-for、组件、生命周期、this.$emit等）——Uniapp 语法高度依赖 Vue，建议先花 1-2 天快速过 Vue 基础。

二、环境搭建：准备开发工具

1. 安装 HBuilderX（官方推荐工具）

下载地址：HBuilderX 官网，选择「正式版」（Windows/Mac）。
安装后：打开 HBuilderX，进入「工具」-「插件安装」，勾选「uniapp 编译」和「微信小程序开发者工具」（若开发小程序），点击安装并重启。

2. 安装微信小程序开发者工具（可选，针对小程序开发）

下载地址：微信公众平台，选择「小程序开发者工具」。
配置：打开微信开发者工具，进入「设置」-「安全设置」，开启「服务端口」（允许 HBuilderX 调用）。

3. 配置手机模拟器 / 真机（可选，用于调试）

模拟器：推荐「夜神模拟器」（Android），安装后在 HBuilderX 中「运行」-「运行到手机或模拟器」-「选择模拟器」。
真机：手机开启「开发者模式」和「USB 调试」，连接电脑后在 HBuilderX 中选择设备。

三、基础语法：掌握 Uniapp 核心规则

1. 项目结构解析

新建 Uniapp 项目（HBuilderX：文件 - 新建 - 项目 - 选择「uniapp」- 填写名称和路径），核心文件 / 目录：

pages/：存放页面（每个页面是一个文件夹，包含.vue文件）。
pages.json：配置页面路由、窗口样式（导航栏、状态栏等）。
manifest.json：配置应用名称、图标、平台权限等（如小程序 AppID、App 的包名）。
App.vue：应用入口文件，包含全局生命周期（如onLaunch应用启动时触发）。
main.js：入口脚本，配置 Vue 实例、全局组件 / 方法等。
static/：存放静态资源（图片、字体等，注意：小程序端体积有限制，避免过大文件）。

2. 模板语法（与 Vue 类似，重点关注差异）

数据绑定：{{ }} 渲染数据，v-model 双向绑定（支持表单组件如input、picker）。
条件渲染：v-if/v-else/v-show（注意：小程序端v-if可能影响性能，复杂场景用hidden属性）。
列表渲染：v-for="(item, index) in list" :key="index"（key必须唯一，避免用 index 作为 key 在列表修改时出问题）。
事件绑定：@click="handleClick"（替代 Vue 的v-on:click），事件传参用@click="handleClick(item)"。

3. 生命周期（Uniapp 特有，区分应用 / 页面 / 组件生命周期）

应用生命周期（在App.vue中）：
- onLaunch：应用初始化完成（只触发一次）。
- onShow：应用启动或从后台切换到前台时触发。
- onHide：应用从前台切换到后台时触发。
页面生命周期（在页面.vue的script中）：
- onLoad(option)：页面加载时触发（可获取路由参数option）。
- onShow：页面显示时触发（每次打开页面都会触发）。
- onReady：页面初次渲染完成（类似 Vue 的mounted）。
- onUnload：页面卸载时触发（如跳转后关闭当前页）。
组件生命周期：与 Vue 一致（created、mounted、updated等）。

四、页面路由与导航：实现页面跳转

1. 配置路由（`pages.json`）

{
  "pages": [
    {
      "path": "pages/index/index", // 页面路径（必填）
      "style": {
        "navigationBarTitleText": "首页", // 导航栏标题
        "navigationBarBackgroundColor": "#fff" // 导航栏背景色
      }
    },
    {
      "path": "pages/detail/detail",
      "style": { "navigationBarTitleText": "详情页" }
    }
  ],
  "globalStyle": { // 全局窗口样式（所有页面默认继承）
    "navigationBarTextStyle": "black" // 导航栏文字颜色（black/white）
  }
}

2. 导航跳转方式

组件跳转：使用内置组件navigator

<!-- 跳转到新页面（保留当前页） -->
<navigator url="/pages/detail/detail">去详情页</navigator>

<!-- 关闭当前页，跳转到目标页 -->
<navigator url="/pages/detail/detail" open-type="redirectTo">跳转并关闭当前页</navigator>

API 跳转：使用uni.navigateTo等方法（在script中调用）

// 跳转到详情页，传参id=123
goDetail() {
  uni.navigateTo({
    url: '/pages/detail/detail?id=123'
  })
}

// 在详情页onLoad中接收参数
onLoad(option) {
  console.log(option.id) // 输出123
}

常见 API：uni.navigateTo（保留当前页）、uni.redirectTo（关闭当前页）、uni.reLaunch（关闭所有页）、uni.navigateBack（返回上一页）。

五、组件开发：内置组件与自定义组件

1. 内置组件（Uniapp 封装的跨平台组件）

常用组件：

view：容器组件（类似div，支持 flex 布局）。
text：文本组件（仅支持文本内容，可复制、换行）。
button：按钮组件（支持type、size、plain等属性，@click事件）。
image：图片组件（src指向图片路径，支持mode裁剪模式，注意：小程序端图片需配置域名白名单）。
scroll-view：滚动容器（支持横向 / 纵向滚动，scroll-top控制滚动位置）。
picker：选择器（日期、时间、自定义选项等，通过mode设置类型）。

示例（view+text）：

<view class="container">
  <text class="title">Hello Uniapp</text>
</view>

<style>
.container { padding: 20upx; }
.title { color: #333; font-size: 36upx; }
</style>

2. 扩展组件（uni-ui，提升开发效率）

安装：HBuilderX 中右键项目 -「插件安装」- 搜索「uni-ui」- 安装。
使用：无需引入，通过 easycom 机制自动识别（如uni-card、uni-list）。

<uni-card title="标题" content="内容"></uni-card>

3. 自定义组件（复用逻辑）

步骤：

在components/目录下新建组件（如my-component.vue）。
组件内部定义模板、样式、逻辑（与页面类似）。
在页面中使用（无需注册，easycom 自动引入，或在pages.json中配置）。

示例（自定义组件）：

<!-- components/my-component.vue -->
<template>
  <view class="my-component">
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: { title: String } // 接收父组件参数
}
</script>

<!-- 在页面中使用 -->
<template>
  <my-component title="自定义组件"></my-component>
</template>

六、数据请求：与后端交互

1. 基础请求（`uni.request`）

// 发送GET请求
uni.request({
  url: 'https://api.example.com/news', // 后端接口地址
  method: 'GET',
  data: { page: 1 }, // 请求参数
  success: (res) => {
    console.log('请求成功', res.data)
  },
  fail: (err) => {
    console.log('请求失败', err)
  }
})

2. 封装请求（避免重复代码）

新建utils/request.js：

// 基础路径
const baseUrl = 'https://api.example.com'

// 封装请求方法
export default (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        // 可添加token：'Authorization': 'Bearer ' + uni.getStorageSync('token')
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

在页面中使用：

import request from '@/utils/request'

async onLoad() {
  try {
    const res = await request({ url: '/news', method: 'GET' })
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

七、状态管理：跨页面共享数据

1. 简单场景：全局变量（`globalData`）

在App.vue中定义：

export default {
  globalData: {
    userInfo: null // 全局共享的用户信息
  },
  onLaunch() {}
}

在页面中访问 / 修改：

// 获取
const app = getApp()
console.log(app.globalData.userInfo)

// 修改
app.globalData.userInfo = { name: '张三' }

2. 复杂场景：Vuex（或 Pinia）

安装：HBuilderX 中右键项目 -「npm 初始化」，然后运行npm install vuex --save。
创建store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      uni.setStorageSync('token', token) // 持久化存储
    }
  },
  actions: {}
})

在main.js中引入：

import store from './store'
Vue.prototype.$store = store

在页面中使用：

// 调用mutation修改状态
this.$store.commit('setToken', 'xxx')

// 获取状态
console.log(this.$store.state.token)

八、样式与布局：适配多端

1. 单位：upx（响应式像素）

原理：750upx = 屏幕宽度（无论设备尺寸，自动适配），如 iPhone 6（375px）中 1rpx=0.5px。
建议：所有尺寸用 upx（字体、边距、宽高等），避免使用 px（固定尺寸，适配差）。

2. 布局：flex（主流方案）

<view class="flex-container">
  <view class="flex-item">1</view>
  <view class="flex-item">2</view>
</view>

<style>
.flex-container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
  height: 200upx;
}
.flex-item {
  width: 100upx;
  height: 100upx;
}
</style>

3. 样式隔离与引入

页面样式：在.vue的style标签中写样式，添加scoped属性隔离当前页面（不影响其他组件）。
全局样式：在App.vue的style中写全局样式（无scoped）。
引入外部样式：@import "@/static/css/common.css";。

九、平台适配：处理多端差异

1. 条件编译（核心方案）

通过特殊注释区分不同平台代码（模板、样式、脚本均支持）：

语法：#ifdef 平台标识（仅在该平台生效）、#ifndef 平台标识（除该平台外生效）、#endif（结束）。
常见平台标识：MP-WEIXIN（微信小程序）、H5（网页）、APP-PLUS（App）。

示例（模板中区分微信小程序和 H5）：

<!-- 仅微信小程序显示 -->
#ifdef MP-WEIXIN
<view>微信小程序端</view>
#endif

<!-- 仅H5显示 -->
#ifdef H5
<view>网页端</view>
#endif

示例（脚本中区分）：

onLoad() {
  // 微信小程序端执行
  #ifdef MP-WEIXIN
  console.log('微信小程序')
  #endif
  
  // H5端执行
  #ifdef H5
  console.log('H5')
  #endif
}

2. 平台特有 API

部分 API 仅支持特定平台（如微信小程序的wx.login），Uniapp 已封装为uni.login（跨平台），但个别平台特有 API 需用条件编译：

// 调用微信小程序的wx.getSetting（Uniapp未统一封装）
#ifdef MP-WEIXIN
wx.getSetting({
  success: (res) => {}
})
#endif

十、原生能力调用：设备与系统交互

Uniapp 封装了常用原生 API（通过uni.xxx调用），示例：

获取用户信息：uni.getUserInfo()（需用户授权）。
获取位置：uni.getLocation()（需配置权限，在manifest.json中勾选「地理位置」）。
选择图片：uni.chooseImage()（从相册 / 相机选择图片）。
扫码：uni.scanCode()（调用摄像头扫码）。

示例（选择图片并预览）：

chooseImage() {
  uni.chooseImage({
    count: 1, // 最多选择1张
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      // 预览图片
      uni.previewImage({
        urls: [tempFilePath]
      })
    }
  })
}

十一、打包与发布：多平台部署

1. 微信小程序发布

步骤 1：在manifest.json中配置「微信小程序 AppID」（登录微信公众平台获取）。
步骤 2：HBuilderX 中「运行」-「运行到小程序模拟器」-「微信开发者工具」。
步骤 3：在微信开发者工具中「上传」（填写版本号），然后到微信公众平台「版本管理」中提交审核，审核通过后发布。

2. H5 发布

步骤 1：HBuilderX 中「发行」-「网站 - H5 手机版」。
步骤 2：配置输出目录，点击「发行」，生成静态文件（dist/build/h5）。
步骤 3：将静态文件部署到服务器（如 Nginx、阿里云 OSS 等）。

3. App 发布（Android/iOS）

云打包（简单）：
1. manifest.json中配置 App 名称、图标、包名（Android）/Bundle ID（iOS）。
2. HBuilderX 中「发行」-「原生 App - 云打包」。
3. 选择平台（Android/iOS），Android 需填写签名证书（可生成测试证书），iOS 需配置证书（需苹果开发者账号）。
4. 等待打包完成，下载安装包（.apk/.ipa）。
本地打包（复杂，适合定制化需求）：参考官方文档。

十二、实战项目：巩固知识点

通过 1-2 个实战项目串联所有知识，推荐从简单到复杂：

TodoList：涵盖页面跳转、数据绑定、本地存储（uni.setStorageSync）、组件复用。
新闻列表 App：包含接口请求、列表渲染、详情页、下拉刷新（onPullDownRefresh）、上拉加载（onReachBottom）。
电商首页：集成 uni-ui 组件、轮播图（swiper）、分类导航、商品列表，练习平台适配。

十三、进阶学习：优化与扩展

性能优化：
- 分包加载（小程序端，pages.json中配置subPackages，减少主包体积）。
- 图片优化（压缩图片、使用image组件的lazy-load懒加载）。
- 减少不必要的渲染（避免v-if频繁切换，用hidden替代）。
自定义原生插件：当 Uniapp 内置 API 满足不了需求时，开发原生插件（Android 用 Java，iOS 用 Objective-C）。
生态工具：学习 UI 库（uView、ColorUI）、状态管理（Pinia）、路由管理（uni-simple-router）提升效率。