uni-app移动应用开发总结_uniapp开发安卓app-CSDN博客

本文链接：https://blog.csdn.net/tt12514/article/details/130811589

本文总结了uni-app的使用经验，包括项目创建、git和gitee版本控制、pages.json页面路由配置、静态资源引用、Iconfont的下载与使用、第三方组件m-for-skeleton的安装与使用、自定义组件开发、Apifox调用测试API、uni.request发起网络请求、页面跳转及参数传递、音频对象控制和CSS3动画实现。uni-app凭借其跨平台、高性能、低学习曲线等特点，成为移动应用开发的高效工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以让你使用一份代码在多个平台上构建出原生的、高性能的应用。通过Uni-app，你可以将一份代码编译成Android、iOS原生应用程序、H5应用程序以及各种小程序（如微信小程序、支付宝小程序等）。

在这门课程里我学到的东西

uni-app项目的创建

1.打开文件，点击新建项目

2.选择uni-app，输入工程名，如：test，选择默认模板，点击创建，即可成功创建uni-app；

使用git和gitee进行代码的版本控制

Git是一种分布式版本控制系统，它可以帮助你管理代码的版本。而Gitee是一个在线代码托管平台，它提供了Git仓库的服务。下面是使用Git和Gitee进行代码版本控制的步骤：

在Gitee上创建一个仓库。这个仓库将存储你的代码。
使用Git命令行工具克隆你在Gitee上创建的仓库。在命令行中输入：

git clone https://gitee.com/你的用户名/你的仓库名.git

将代码添加到本地仓库中。使用以下命令将代码添加到 Git 仓库：

git add .

提交代码到本地仓库。使用以下命令提交代码：

git commit -m "你的提交信息"

推送代码到远程仓库（即Gitee上的仓库）。使用以下命令推送代码：

git push origin master

如果你想在本地分支上工作，使用以下命令创建一个新分支：

git checkout -b 你的分支名

在你的分支上添加、修改、提交和推送代码。
当你完成一个功能或修复一个bug后，将分支合并到主分支。使用以下命令：

git checkout master
git merge 你的分支名

推送合并后的代码到远程仓库：

git push origin master

这样，你就可以使用Git和Gitee进行代码的版本控制了。

pages.json页面路由的配置

在一个基于React的应用中，我们需要配置页面路由，以便我们的应用能够响应地址栏发生的变化。在React中，常用的页面路由配置方式是使用一个名为react-router-dom的第三方库。页面路由配置可以在一个名为pages.json的文件中进行。

pages.json文件包含了整个应用的页面路由配置信息。每一个页面都由一个对象来配置，这个对象包含了页面的路径、页面对应的组件、是否需要登录等信息。以下是一个pages.json文件的示例：

{
  "pages": [
    {
      "path": "/login",
      "component": "Login",
      "auth": false
    },
    {
      "path": "/dashboard",
      "component": "Dashboard",
      "auth": true
    }
  ]
}

在上面的示例中，我们定义了两个页面路由。第一个页面路由的路径是/login，对应的React组件名为Login，这个页面不需要登录即可访问；第二个页面路由的路径是/dashboard，对应的React组件名为Dashboard，这个页面需要登录才能访问。

进一步解释：

path：表示页面的访问路径，例如/login表示访问应用的登录页面。
component：表示页面对应的React组件的名称，例如Login表示登录页面的React组件名称。
auth：表示是否需要登录才能访问这个页面，如果为true则表示需要登录，如果为false则表示不需要登录。

在uni-app中使用静态资源

在uni-app中，可以在项目根目录下的 static 文件夹中存放静态资源，比如图片、字体等。通过在页面中使用相对路径引用这些静态资源，可以直接使用它们。

例如，假设我们在 static 目录下有一张名为 logo.png 的图片，我们可以在页面中这样引用它：

<template>
  <img src="../../static/logo.png" alt="logo">
</template>

其中，.. 表示上一级目录，因为通常我们在页面中使用相对路径时是以当前页面所在的目录作为相对路径的起点，而 static 目录位于项目根目录下。

当然，如果我们需要在 JavaScript 代码中使用静态资源，也可以通过 uni-app 提供的 uni. 对象来进行引用。比如：

uni.getImageInfo({
  src: '/static/logo.png',
  success: (res) => {
    console.log(res.width)
  }
})