深入浅出：UniApp 从入门到精通全指南

https://juejin.cn/post/7440119937644101684

uni-app官网

uniapp安卓离线打包流程_uniapp离线打包-CSDN博客

本文是关于 UniApp 从入门到精通的全指南，涵盖基础入门（环境搭建、创建项目、项目结构、编写运行）、核心概念与进阶知识（组件与开发、页面路由与导航、数据绑定与响应式原理、生命周期钩子）、电商应用开发（商品展示、购物车、订单结算等功能）、项目优化与部署（性能、安全优化及不同平台部署）、案例分析及总结展望，为开发者全面介绍 UniApp 开发知识体系。

关联问题:UniApp如何压缩图片怎样优化购物车功能如何部署到小程序

一、引言

在当今移动应用开发领域，跨平台开发框架因其能够显著提高开发效率、降低成本而备受青睐。UniApp 作为一款优秀的跨平台应用开发框架，允许开发者使用 Vue.js 技术栈一次编写代码，即可生成 iOS、Android、H5、小程序等多端应用，为开发者提供了极大的便利。本文将详细介绍 UniApp 的入门到精通知识，助力开发者快速上手并深入掌握这一强大的开发工具。

二、UniApp 基础入门

（一）环境搭建

1. 安装 Node.js ：Node.js 是 UniApp 开发的基础环境，可前往官网（nodejs.org/）下载适合操作系统的版本并进行安装。安装完成后，可在命令行中输入 node -v 和 npm -v 检查安装是否成功以及版本信息。
2. 安装 HBuilderX ：HBuilderX 是 UniApp 的官方开发工具，集成了丰富的开发功能和插件。在 HBuilderX 官网（www.dcloud.io/hbuilderx.h...）下载对应版本并安装。安装完成后，启动 HBuilderX，在菜单栏中点击 "工具"->"插件安装"，确保安装了 "uni-app" 插件。

（二）创建项目

1. 打开 HBuilderX，点击 "文件"->"新建"->"项目"。
2. 在项目创建向导中，选择 "uni-app" 项目类型，填写项目名称、项目路径等信息，点击 "创建"。创建完成后，HBuilderX 会自动生成一个包含基础结构的 UniApp 项目。

（三）项目结构

1. pages 目录：存放应用的页面文件，每个页面由一个.vue 文件组成，包括页面的结构、样式和逻辑。
2. static 目录：用于存放静态资源，如图片、字体文件等，这些资源在编译后会直接拷贝到各个端的项目中。
3. manifest.json 文件：项目的配置文件，包含应用的名称、图标、权限设置、页面路径等信息，用于配置应用在不同端的基本属性。
4. pages.json 文件：用于配置应用的页面路由、导航栏样式、底部 tabBar 等页面相关的全局设置。

（四）编写第一个页面

1. 在 pages 目录下创建一个新的.vue 文件，例如 index.vue。

2. 在 <template> 标签内编写页面的 HTML 结构，例如：

xml

代码解读

复制代码

<template> <view class="container"> <text>Hello, UniApp!</text> </view> </template>

1. 在 <script> 标签内编写页面的 JavaScript 逻辑，例如：

xml

代码解读

复制代码

<script> export default { data() { return { // 数据定义 } }, methods: { // 方法定义 }, mounted() { // 生命周期钩子，页面加载完成时执行 } } </script>

1. 在 <style> 标签内编写页面的 CSS 样式，例如：

xml

代码解读

复制代码

<style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style>

（五）运行项目

1. 在 HBuilderX 中，点击菜单栏中的 "运行"->"运行到浏览器"，可以在浏览器中预览项目的 H5 版本。
2. 点击 "运行"->"运行到手机或模拟器"，如果连接了手机或启动了模拟器，会将项目安装到手机或模拟器中运行，可查看项目的原生应用效果（iOS 或 Android）。
3. 点击 "运行"->"运行到小程序模拟器"，可选择微信小程序、支付宝小程序等不同平台的小程序模拟器进行项目预览。

三、UniApp 核心概念与进阶知识

（一）组件与组件化开发

1. 内置组件 ：UniApp 提供了丰富的内置组件，如 <view>（视图容器）、<text>（文本）、<image>（图片）、<button>（按钮）等，开发者可以直接在页面中使用这些组件构建界面。例如：

arduino

代码解读

复制代码

<image src="/static/logo.png" mode="aspectFit"></image>

上述代码在页面中显示一张图片，src 属性指定图片路径，mode 属性设置图片的缩放模式。

2. 自定义组件 ：除了内置组件，开发者还可以创建自定义组件，实现代码的复用。在项目中创建一个 components 目录，在该目录下创建自定义组件的.vue 文件。例如创建一个名为 my-header.vue 的自定义组件：

xml

代码解读

复制代码

<template> <view class="header"> <text>{``{title}}</text> </view> </template> <script> export default { props: { title: { type: String, default: '默认标题' } } } </script> <style> .header { height: 50px; line-height: 50px; background-color: #007aff; color: #fff; text-align: center; } </style>

在其他页面中使用自定义组件：

xml

代码解读

复制代码

<template> <view class="container"> <my-header title="我的页面标题"></my-header> </view> </template> <script> import myHeader from '@/components/my-header.vue' export default { components: { myHeader } } </script>

（二）页面路由与导航

1. 路由配置 ：在 pages.json 文件中配置页面路由，例如：

json

代码解读

复制代码

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

上述配置定义了两个页面的路由路径和导航栏标题。

2. 导航方式：

• 编程式导航 ：在 JavaScript 代码中使用 uni.navigateTo、uni.redirectTo、uni.switchTab 等方法进行页面跳转。例如：

css

代码解读

复制代码

uni.navigateTo({ url: '/pages/detail/detail?id=123' })

上述代码跳转到详情页，并传递一个参数 id，值为 123。

• 声明式导航 ：在页面的 <template> 标签中使用 <navigator> 组件进行导航，例如：

ini

代码解读

复制代码

<navigator url="/pages/detail/detail?id=456">跳转到详情页</navigator>

（三）数据绑定与响应式原理

1. 数据绑定语法 ：在 UniApp 中，使用 {``{}} 语法进行数据绑定。例如在页面的 <template> 标签中：

arduino

代码解读

复制代码

<text>{``{message}}</text>

在对应的 <script> 标签中：

javascript

代码解读

复制代码

export default { data() { return { message: 'Hello, Vue!' } } }

页面加载时，text 组件会显示 Hello, Vue!。

2. 响应式原理：UniApp 基于 Vue.js 的响应式原理，当数据发生变化时，会自动更新与之绑定的视图。例如：

javascript

代码解读

复制代码

export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } }

在页面中绑定一个按钮的点击事件：

css

代码解读

复制代码

<button @click="increment">{``{count}}</button>

每次点击按钮，count 的值会增加，页面上显示的数字也会随之更新。

（四）生命周期钩子

1. 页面生命周期 ：UniApp 页面有多个生命周期钩子函数，如 onLoad（页面加载时触发）、onShow（页面显示时触发）、onReady（页面初次渲染完成时触发）、onHide（页面隐藏时触发）、onUnload（页面卸载时触发）等。例如：

javascript

代码解读

复制代码

export default { onLoad(options) { // 页面加载时获取参数 options console.log('页面加载，参数：', options) }, onShow() { // 页面每次显示时执行 console.log('页面显示') } }

1. 应用生命周期 ：除了页面生命周期，UniApp 应用也有生命周期钩子，如 onLaunch（应用启动时触发）、onShow（应用前台显示时触发）、onHide（应用后台运行时触发）等。在 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() // 注册应用生命周期钩子 uni.onLaunch(() => { console.log('应用启动') })

四、UniApp 与原生功能交互

（一）网络请求

1. uni.request 方法 ：UniApp 提供了 uni.request 方法用于发送网络请求，例如：

javascript

代码解读

复制代码

uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('请求成功', res.data) }, fail: (err) => { console.log('请求失败', err) } })

上述代码向指定的 API 地址发送一个 GET 请求，并在成功或失败时打印相应信息。

2. 封装网络请求模块 ：为了更好地管理网络请求，通常会封装一个网络请求模块。创建一个 utils 目录，在该目录下创建 http.js 文件：

javascript

代码解读

复制代码

const baseUrl = 'https://api.example.com' export const request = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseUrl + options.url, method: options.method || 'GET', data: options.data || {}, success: (res) => { if (res.statusCode === 200) { resolve(res.data) } else { reject(res) } }, fail: (err) => { reject(err) } }) }) }

在页面中使用封装后的网络请求模块：

javascript

代码解读

复制代码

import { request } from '@/utils/http.js' export default { methods: { fetchData() { request({ url: '/data' }).then((data) => { console.log('获取数据成功', data) }).catch((err) => { console.log('获取数据失败', err) }) } } }

（二）存储与缓存

1. 同步存储与缓存 ：UniApp 提供了 uni.setStorageSync（同步设置缓存）、uni.getStorageSync（同步获取缓存）、uni.removeStorageSync（同步移除缓存）等方法。例如：

arduino

代码解读

复制代码

// 设置缓存 uni.setStorageSync('token', 'abcdefg') // 获取缓存 const token = uni.getStorageSync('token') console.log('缓存中的 token：', token) // 移除缓存 uni.removeStorageSync('token')

1. 异步存储与缓存 ：除了同步方法，还有对应的异步方法 uni.setStorage、uni.getStorage、uni.removeStorage 等，异步方法返回一个 Promise。例如：

javascript

代码解读

复制代码

// 异步设置缓存 uni.setStorage({ key: 'userInfo', data: { name: 'John', age: 25 } }).then(() => { console.log('缓存设置成功') }).catch((err) => { console.log('缓存设置失败', err) })

（三）设备信息与系统功能调用

1. 获取设备信息 ：使用 uni.getSystemInfo 或 uni.getSystemInfoSync 方法获取设备信息，如设备型号、屏幕宽度、屏幕高度等。例如：

javascript

代码解读

复制代码

uni.getSystemInfo({ success: (res) => { console.log('设备信息：', res) } })

1. 调用系统功能 ：UniApp 提供了丰富的 API 用于调用系统功能，如 uni.makePhoneCall（拨打电话）、uni.chooseImage（选择图片）、uni.getLocation（获取地理位置）等。例如：

php

代码解读

复制代码

// 拨打电话 uni.makePhoneCall({ phoneNumber: '13888888888' })

五、UniApp 多端适配与优化

（一）样式适配

1. rpx 单位：UniApp 推荐使用 rpx 单位进行样式编写，rpx 会根据设备屏幕宽度自动进行换算，从而实现自适应布局。例如：

css

代码解读

复制代码

.container { width: 750rpx; height: 100rpx; background-color: #f00; }

在不同屏幕宽度的设备上，container 元素的宽度和高度会根据比例自动调整。

2. 条件编译：针对不同平台的样式差异，可以使用条件编译。例如：

css

代码解读

复制代码

/* #ifdef APP-PLUS */ .app-only-style { color: #007aff; } /* #endif */ /* #ifdef MP-WEIXIN */ .weixin-only-style { background-color: #f5f5f5; } /* #endif */

上述代码中，.app-only-style 样式只会在 APP 端生效，.weixin-only-style 样式只会在微信小程序端生效。

（二）性能优化

1. 图片优化：在项目中尽量使用合适尺寸和格式的图片，避免使用过大的图片资源。可以使用图片压缩工具对图片进行压缩，或者使用雪碧图、base64 编码等方式优化图片加载。

2. 代码分包 ：对于大型项目，可以使用代码分包技术，将不同页面或功能的代码拆分成多个分包，在需要时才加载相应的分包，从而减少首屏加载时间。在 pages.json 文件中配置代码分包：

json

代码解读

复制代码

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } } ], "subPackages": [ { "root": "subpkg1", "pages": [ { "path": "detail/detail", "style": { "navigationBarTitleText": "详情页" } } ] } ] }

上述配置将 detail 页面所在的代码放在 subpkg1 分包中。

3. 数据懒加载：对于页面中不需要立即显示的数据，可以采用数据懒加载的方式，在用户滚动到相应位置或触发特定事件时才加载数据，提高页面的初始加载速度。例如：

ini

代码解读

复制代码

<view v-for="(item, index) in list" :key="index" v-if="index < visibleCount">{``{item}}</view> <button @click="loadMore">加载更多</button>

javascript

代码解读

复制代码

export default { data() { return { list: [], visibleCount: 10, page: 1 } }, methods: { loadMore() { // 模拟加载更多数据 const newData = [] for (let i = 0; i < 10; i++) { newData.push('新数据' + (this.page * 10 + i)) } this.list = this.list.concat(newData) this.visibleCount += 10 this.page++ } } }

六、UniApp 项目实战与案例分析

（一）实战项目搭建

1. 需求分析：确定项目的功能需求，例如开发一个电商应用，需要包括商品列表展示、商品详情页、购物车功能、订单结算、用户登录注册等功能。

2. 技术选型：根据项目需求，选择合适的技术栈和插件。对于 UniApp 项目，确定使用 Vue.js 进行页面开发，选择合适的 UI 框架（如 uView UI）提高开发效率，使用后端开发语言（如 Node.js + Express）搭建后端 API 服务。

3. 数据库设计：设计项目所需的数据库表结构，如用户表、商品表、订单表、购物车表等，确定表之间的关系和字段类型。

4. 项目架构设计：规划项目的目录结构，将页面、组件、接口请求、工具函数等分别放在不同的目录中，便于管理和维护。例如：

arduino

代码解读

复制代码

- api // 接口请求目录 - index.js // 接口请求模块入口 - user.js // 用户相关接口 - product.js // 商品相关接口 - components // 组件目录 - header.vue // 头部组件 - footer.vue // 底部组件 - pages // 页面目录 - index.vue // 首页 - productList.vue // 商品列表页 - productDetail.vue // 商品详情页 - cart.vue // 购物车页 - order.vue // 订单页 - login.vue // 用户登录页 - register.vue // 用户注册页 - utils // 工具函数目录 - http.js // 网络请求工具函数 - storage.js // 存储工具函数 - static // 静态资源目录 - images // 图片资源 - fonts // 字体资源

（二）核心功能实现

1. 商品列表页：

   • 在 productList.vue 页面中，使用 uni.request 向后端 API 请求商品列表数据，在 onLoad 生命周期钩子中发起请求。例如：

javascript

代码解读

复制代码

import { request } from '@/utils/http.js' export default { data() { return { productList: [] } }, onLoad() { request({ url: '/product/list' }).then((res) => { this.productList = res.data }).catch((err) => { console.log('获取商品列表失败', err) }) } }

• 在页面的 <template> 中使用 v-for 指令循环渲染商品列表数据：

xml

代码解读

复制代码

<template> <view class="product-list"> <view class="product-item" v-for="(product, index) in productList" :key="index"> <image :src="product.image" mode="aspectFit"></image> <text>{``{product.name}}</text> <text>￥{``{product.price}}</text> <button @click="addToCart(product)">加入购物车</button> </view> </view> </template>

1. 商品详情页：

   • 接收从商品列表页传递过来的商品 ID 参数，在 onLoad 生命周期中根据 ID 请求商品详情数据。例如：

javascript

代码解读

复制代码

export default { data() { return { productDetail: {} } }, onLoad(options) { const productId = options.id request({ url: `/product/detail/${productId}` }).then((res) => { this.productDetail = res.data }).catch((err) => { console.log('获取商品详情失败', err) }) } }

• 在页面中展示商品详情信息，包括图片、名称、价格、描述等。

1. 购物车功能：

   • 在 cart.vue 页面中，从本地缓存或后端获取购物车数据并展示。例如：

javascript

代码解读

复制代码

export default { data() { return { cartList: [] } }, onLoad() { const cartData = uni.getStorageSync('cart') || [] this.cartList = cartData } }

• 实现添加商品到购物车功能，在商品列表页或商品详情页点击 "加入购物车" 按钮时，将商品信息添加到购物车数据中，并更新本地缓存和页面显示。例如：

scss

代码解读

复制代码

methods: { addToCart(product) { const cartData = uni.getStorageSync('cart') || [] const index = cartData.findIndex(item => item.id === product.id) if (index!== -1) { // 商品已存在，数量加 1 cartData[index].quantity++ } else { // 新商品加入购物车 cartData.push({...product, quantity: 1 }) } uni.setStorageSync('cart', cartData) this.$forceUpdate() // 强制更新页面数据 } }

• 实现购物车商品数量修改、删除商品等功能。

1. 订单结算功能：

   • 在 order.vue 页面中，计算购物车中商品的总价，展示订单信息。
   • 点击 "提交订单" 按钮时，向后端提交订单数据，包括用户信息、收货地址、商品信息等，后端处理订单逻辑并返回订单结果。

（三）项目优化与部署

1. 性能优化：

   • 对项目中的图片进行压缩和优化，使用雪碧图或 base64 编码处理小图标，减少网络请求次数。
   • 对代码进行混淆和压缩，去除不必要的代码注释和空白字符，减小代码体积。在 HBuilderX 中，可以在项目的发行设置中开启代码压缩功能。
   • 优化页面的加载速度，采用数据懒加载、骨架屏等技术。例如，在商品列表页，当用户滚动到页面底部时，再加载更多的商品数据；在页面加载时，先显示骨架屏，待数据加载完成后再显示真实内容。

2. 安全优化：

   • 对用户输入的数据进行严格的验证和过滤，防止 SQL 注入、XSS 攻击等安全漏洞。例如，在用户登录注册页面，对用户名、密码等输入框进行输入限制和验证，确保输入的数据符合要求。
   • 对后端 API 进行权限验证，确保只有合法用户才能访问敏感数据和操作。例如，使用 JWT（JSON Web Tokens）进行用户身份认证，在用户登录成功后，后端返回一个 JWT 令牌，前端在后续的 API 请求中携带该令牌，后端验证令牌的有效性来确定用户身份和权限。

3. 项目部署：

   • 将 UniApp 项目编译成不同平台的应用程序。在 HBuilderX 中，点击 "发行" 菜单，可以选择编译成 iOS 应用、Android 应用、H5 网站或小程序等。
   • 对于 iOS 应用，需要在苹果开发者账号中创建应用证书和描述文件，然后使用 Xcode 进行应用的打包和发布到 App Store。
   • 对于 Android 应用，需要生成签名证书，然后使用 Android Studio 或其他打包工具进行应用的打包和发布到各大应用商店，如华为应用市场、小米应用商店等。
   • 对于 H5 网站，可以将编译后的代码部署到自己的服务器或使用云服务平台（如阿里云、腾讯云等）进行部署，配置好域名和服务器环境后即可通过浏览器访问。
   • 对于小程序，需要在对应的小程序平台（如微信小程序、支付宝小程序等）注册开发者账号，然后将编译后的小程序代码上传到平台进行审核和发布。

（四）案例分析

以一个成功的 UniApp 电商应用为例，分析其在市场上取得成功的因素：

1. 用户体验：该应用界面设计简洁美观，操作流程简单流畅，用户能够快速找到所需商品并完成购物流程。例如，商品分类清晰，搜索功能强大，购物车和订单结算方便快捷，提供了良好的用户交互体验。

2. 性能优化：应用在加载速度、图片显示、数据请求等方面进行了有效的优化。在网络较差的情况下，也能快速显示商品列表的骨架屏，并在数据加载完成后及时更新页面，减少了用户的等待时间。同时，图片经过压缩和优化，加载速度快，不会出现卡顿现象。

3. 功能完整性：涵盖了电商应用的核心功能，如商品展示、购物车、订单结算、用户评价、售后客服等，满足了用户在购物过程中的各种需求。并且，还提供了一些特色功能，如个性化推荐、积分系统、优惠券等，增加了用户的粘性和购物乐趣。

4. 多端适配：在 iOS、Android、H5 和小程序等多端都有良好的表现，用户可以在不同的设备和平台上使用该应用，扩大了应用的用户群体和使用场景。例如，在小程序端，利用微信的社交属性，用户可以方便地分享商品链接给好友，促进了商品的传播和销售。

通过对这个案例的分析，可以总结出 UniApp 项目开发的一些经验和教训，为后续的项目开发提供参考和借鉴，帮助开发者更好地打造出高质量、受欢迎的跨平台应用。

七、总结与展望

UniApp 作为一款强大的跨平台应用开发框架，为开发者提供了高效、便捷的开发方式。从入门的环境搭建、项目创建，到核心概念的掌握、原生功能的交互，再到多端适配与优化以及项目实战，本文全面地介绍了 UniApp 的开发知识体系。通过学习和实践 UniApp，开发者可以快速构建出功能丰富、性能优良、多端兼容的应用程序，满足不同用户群体和业务场景的需求。随着移动应用开发技术的不断发展，UniApp 也在持续更新和完善，未来有望在更多领域得到广泛应用，为跨平台应用开发带来更多的创新和突破。开发者应不断关注 UniApp 的发展动态，深入学习和探索其新特性和功能，提升自己的开发技能，在跨平台应用开发领域创造出更多优秀的作品。