Uni app课程学习收获

21计应UI2班蒋加婷

已于 2023-06-21 10:32:27 修改

阅读量496

点赞数

文章标签： uni-app

于 2023-06-20 18:45:43 首次发布

本文链接：https://blog.csdn.net/2201_76019323/article/details/131313341

版权

本教程介绍了使用UniApp进行跨平台应用开发的步骤，包括安装HBuilderX编辑器、创建项目、编写页面、配置路由、运行应用，并分享了使用体验和优缺点，强调了UniApp的高效、统一开发体验和多平台支持特性。

摘要由CSDN通过智能技术生成

开始前准备

在开始使用 Uni App 开发应用程序之前，你需要安装最新版本的 HBuilderX 编辑器，可以从官网下载安装。

创建 Uni App 项目

打开 HBuilderX 编辑器，选择 “新建” > “项目” > “Uni App 项目”。

在弹出的 “新建 Uni App 项目” 界面中，输入项目相关的信息，包括项目名称、存储位置、App ID 等。并选择需要支持的平台。

设置好项目信息后，点击 “创建” 按钮即可完成项目的创建过程。

开发应用程序

创建页面

在 Uni App 项目中，页面是应用程序的核心组成部分。页面可以是一个单独的页面，也可以是一个组件。

打开项目中的 pages 文件夹，在该文件夹下新建一个页面，例如 index.vue。

在 index.vue 页面中，可以编写 HTML、CSS 和 JavaScript 代码，以及使用 Vue.js 提供的各种组件和指令。

<template>
    <view>
        <text>{{ message }}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World!',
            }
        },
    }
</script>

<style>
    text {
        color: red;
    }
</style>

在上面的代码中，我们定义了一个简单的页面，包括一个文本消息和相应样式表。最后导出一个 Vue.js 的组件对象。

路由配置

在 Uni App 项目中，通过路由进行页面间的切换。路由配置中包括了每个页面的 URL、名称等信息。

打开项目中的 pages.json 文件，在该文件中配置导航栏、页面、标签栏等信息。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/about/about",
            "style": {
                "navigationBarTitleText": "关于"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Uni App 示例",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#eeeeee"
    },
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/index/index",
                "name": "首页",
                "iconPath": "static/images/home.png",
                "selectedIconPath": "static/images/home-active.png"
            },
            {
                "pagePath": "pages/about/about",
                "name": "关于",
                "iconPath": "static/images/about.png",
                "selectedIconPath": "static/images/about-active.png"
            }
        ]
    }
}

在上面的代码中，我们定义了两个页面，分别是首页和关于页面，并设置了页面标题。

运行应用程序

在完成上述步骤后，我们就可以运行应用程序了。点击 HBuilderX 编辑器中的 “运行” 按钮，选择需要运行的平台（如 Android、iOS、小程序等），然后就能够在设备或模拟器上运行应用程序了。

总结

本教程中，我们介绍了如何使用 Uni App 开发一款简单的应用程序。在本教程中，我们学会了创建页面、配置路由、集成组件，并运行应用程序。通常需要更多的学习和实践才可以成为一名优秀的 Uni App 开发者。希望本教程对你有所帮助，让你更好地了解 Uni App 开发框架，提高自己的应用程序开发技巧。

Uni -app是一款新型的跨平台开发工具，可以将一套代码同时转化成iOS和Android两大系统平台上的应用程序，极大地方便了开发者的工作。在我使用了Uni -app一段时间之后，我对它的感受和体会如下：

首先，Uni -app的安装过程非常简单。只需要几步操作就能完成整个安装过程，对于开发者来说非常友好。然后，在实际使用过程中，我发现Uni -app提供多种模板和插件，这些组件可以为我们开发者节省很多时间，同时做出很棒的应用程序。

另外，Uni -app还提供了强大的开发工具。在集成了Uni -app之后，我们可以使用Vue.js和HTML5等技术进行开发。而且，在开发时Uni -app提供了许多实用的工具，如代码提示、布局工具等等，这些工具让我们的开发效率倍增。

Uni -app同时还兼顾了应用程序的性能。通过它可以将一套代码同时部署在不同的系统平台上，降低了系统资源的使用。同时，Uni -app还提供了很多性能的优化方法，如保持应用程序的流畅性，减少程序的内存占用等。

除此之外，Uni -app还有一些其他的优点，比如社区活跃，拥有很多的开发者，可以及时解决开发中的问题。Uni -app还有专门的论坛和教程资源，让初学者可以轻松上手。

尽管Uni -app有很多优点，但是它也有它的不足。比如，一些平台专有的GUI控件不能兼容Uni -app，这可能会影响应用程序的某些特定功能。

综上所述，Uni -app是一款非常优秀的跨平台开发工具，通过它可以方便快捷地开发出多平台应用程序。我相信它将在未来的各种应用场景中发挥更大的作用，并得到越来越多的开发者认可和使用。

Uni-app是一种基于Vue.js框架的跨平台开发框架，它能够将代码转换为原生应用程序，同时支持iOS、Android、H5和小程序。个人使用Uni-app进行移动应用程序的开发，收获颇丰，下面我将从以下几个方面分享我的使用体会：

一、开发效率高

我用Uni-app开发同时支持iOS、Android和小程序的应用程序，代码只需要编写一次即可，在Uni-app帮助下进行自动转换，在性能上不出现降级。这个特点使Uni-app成为了一个高效的跨平台开发工具。此外，Uni-app还提供了内置组件、自定义组件等一系列功能，极大地提高了项目的开发效率，让开发人员不必根据不同平台的差异进行多次重复开发，可以专注于业务。

二、统一的开发体验

在Uni-app的帮助下，我不再需要进行针对不同平台的用户界面以及交互体验的开发，这样的开发体验大大地减轻了我的负担，让我可以将更多的精力放在业务逻辑开发上。相信对于大多数开发者来说，这也是一个非常值得使用Uni-app的原因。

三、同时支持iOS和Android

相信不少开发者都曾经因为无法同时支持iOS和Android而感到困扰，但是Uni-app帮助我们实现了这一愿望。Uni-app能够为我们生成iOS和Android的应用程序，这让我们能够同时在iOS和Android上发布应用程序，从而让更多的用户受益于我们的产品。

四、微信小程序支持

Uni-app支持微信小程序，这一特点在移动应用开发中是非常具有价值的。因为微信是国内最大的社交平台之一，而微信小程序又将手机应用的访问门槛极低，可以直接在微信内部打开，用户也不需要下载安装，可以直接使用。因此，支持微信小程序的Uni-app能够更好地满足用户的需求。

总之，我在使用Uni-app过程中，实实在在地感受到了它为我的开发工作带来了极大的帮助，从而提高了我的开发效率和开发体验。同时支持iOS、Android、H5和小程序使得Uni-app更具有实用性和可扩展性，让开发者能够更好地应对不同的需求。相信Uni-app未来会发展得越来越好，为用户带来更多更好的体验。

我认为学习 Uni App 课程，对于我来说，是一段非常值得的旅程。在整个学习过程中，我获得了许多实际的技能和知识，并且对跨平台开发有了更为深入的理解。下面我将分享我在学习 Uni App 课程中得到的主要收获。

首先，我掌握了一套全新的跨平台开发技术。在学习 Uni App 课程之前，我只会开发单平台的应用程序。然而，Uni App 是一个非常有用的工具和框架，在它的帮助下，我可以用一套代码开发同时支持多个平台的应用程序。这种方法大大节约了我的实际开发时间，并且让我更快地推出了产品，这对一个开发者来说非常重要。

其次，我深入了解了 Vue.js 的框架和技术。Vue.js 是一个非常流行的前端框架，Uni App 使用它作为其主要代码库。学习 Uni App 课程让我更深入了解了 Vue.js ，以及它的各种特征，如单文件组件、组件生命周期、Prop 与 Slot 传参等等。这样我现在可以更加自信地处理 Vue.js 应用程序的问题了。

第三，我学会了如何调试应用程序。在开发过程中，总会出现各种各样的错误和问题。在学习 Uni App 课程中，我学会了用 Chrome 开发工具来调试应用程序，这非常有用。它让我更好地了解我的代码中出现了什么问题，并且让我更快地找到了解决问题的方法。

第四，我学会了如何将应用程序部署到不同的平台。有时开发应用程序容易，但是将应用程序部署到不同平台就需要更仔细地研究相关步骤。在学习 Uni App 课程中，我学会了将应用程序部署到多个平台，包括微信小程序和 H5 页面等等。这让我对应用程序发布过程更加深刻地了解，并能够有效地将应用程序推向不同的用户群体。

总之，学习 Uni App 课程对于我来说是一个非常有用的经历。它不仅帮助我学习了新技术，还让我能够更好地处理 Vue.js 应用程序，并且让我更加自信地调试和部署应用程序。我坚信这些技能和知识会在我的职业生涯中收到很好的应用。

好的，下面我将为你提供一个 Uni App 开发教程，希望可以帮助你了解 Uni App 的基本概念和使用方法。

一、前置知识

在开始学习 Uni App 开发教程之前，需要先掌握以下技能和知识：

1. HTML、CSS 和 JavaScript 的基础知识；
2. Vue.js 的基础知识；
3. 移动端开发的一些基础技巧。

如果你已经掌握了以上知识，可以进入下一步。

二、环境搭建

1. 安装 HBuilderX，HBuilderX 是一款跨平台的前端集成开发环境。

2. 安装 js 工具库，Uni 提供了一些 js 工具库，如 ajax、request、event 等。

三、创建 Uni App 项目

在 HBuilderX 的工具栏中，点击新建 Uni App 项目，输入项目名称和路径，然后选择需要支持的平台。

创建完成后，会在指定路径下生成项目基础文件。其中，一些重要的文件和目录如下：

- App.vue：根组件文件，Uni App 通用，除 H5 外全局唯一。
- main.js：程序入口文件。
- manifest.json：应用信息配置文件，包含应用的基本配置。
- pages 文件夹：存放项目的主要页面。
- static 文件夹：存放静态资源。比如放置一些图片、css、js 等静态文件。

四、编写界面

在 pages 文件夹中新建一个名为 index 的页面。然后在 index.vue 文件中编写页面相关代码：


<template>
  <view class="container">
    <view class="banner">
      <image src="../../static/logo.png" alt="logo" class="logo"></image>
    </view>
    <view class="content">
      <text class="title">Welcome to Uni App</text>
      <button class="btn" @click="goToDemo">点击查看示例</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToDemo() {
      uni.navigateTo({
        url: '/pages/demo/demo'
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner {
  padding: 20px;
}

.logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.content {
  text-align: center;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.btn {
  background-color: #42b983;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}
</style>

在 index 页面中，我们使用了一个 view 容器将页面内容包裹起来，并在容器中添加了一个 logo 图片和一个标题。

五、添加路由和跳转

在 manifest.json 文件中，我们可以设置应用首页为 index 页面。

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    }
  ],
  "tabBar": {},
  "globalStyle": {},
  "window": {
    "backgroundColor": "#f1f1f1",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Uni App"
  },
  "networkTimeout": {}
}
```

在 index 中，我们添加了一个按钮，用来跳转到 demo 页面。这里使用了 uni.navigateTo 来实现页面跳转。

```javascript
goToDemo() {
  uni.navigateTo({
    url: '/pages/demo/demo'
  })
}
```

通过这个方法，我们可以将 demo 页面添加到路由中，并在按钮点击时进行跳转。接下来，在 pages 文件夹中新增一个 demo 页面，并在 demo.vue 里面编写对应的代码。

六、发布应用

1. H5 端发布

在 HBuilderX 中选择要发布的 H5 端项目，然后右键点击选择发行-网站-图标+Startup

21计应UI2班蒋加婷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Uni app课程学习收获

我用Uni-app开发同时支持iOS、Android和小程序的应用程序，代码只需要编写一次即可，在Uni-app帮助下进行自动转换，在性能上不出现降级。总之，我在使用Uni-app过程中，实实在在地感受到了它为我的开发工作带来了极大的帮助，从而提高了我的开发效率和开发体验。因此，支持微信小程序的Uni-app能够更好地满足用户的需求。在Uni-app的帮助下，我不再需要进行针对不同平台的用户界面以及交互体验的开发，这样的开发体验大大地减轻了我的负担，让我可以将更多的精力放在业务逻辑开发上。
复制链接

扫一扫