初学者指南：从零开始学习 UniApp

最新推荐文章于 2024-05-18 18:21:54 发布

FLLLLLDL

最新推荐文章于 2024-05-18 18:21:54 发布

阅读量1.4k

点赞数 32

文章标签：学习 uni-app

本文链接：https://blog.csdn.net/FLLLLLDL/article/details/138482715

版权

简介

1.UniApp 是什么？

UniApp 是一个跨平台的应用开发框架，由中国企业阿里巴巴旗下的公司蚂蚁金服（Ant Group）开发和维护。它允许开发者使用一套代码，同时在多个平台上（如iOS、Android、Web等）构建应用程序。UniApp基于Vue.js框架，并提供了丰富的组件和插件，使开发者能够快速地开发出高性能、原生体验的应用。UniApp的特点包括高效的性能、丰富的扩展性以及便捷的开发方式，因此受到了开发者的欢迎。

2.为什么选择 UniApp？

UniApp之所以备受欢迎，有几个主要原因：

跨平台开发：UniApp允许开发者使用一套代码同时在多个平台上构建应用程序，包括iOS、Android、Web等，这极大地简化了开发流程，提高了开发效率。
基于Vue.js框架：UniApp基于Vue.js框架，Vue.js是一个流行的JavaScript框架，具有简单易学、灵活高效等特点，因此开发者可以快速上手UniApp，加速应用的开发。
丰富的组件和插件：UniApp提供了丰富的组件和插件，开发者可以根据自己的需求选择合适的组件和插件，从而快速地构建出具有丰富功能的应用程序。
高效的性能：UniApp具有高效的性能，能够保证应用程序的流畅运行和良好的用户体验。
原生体验：虽然UniApp是跨平台开发框架，但它能够提供接近原生应用的体验，包括快速响应、流畅动画等，这也是开发者选择UniApp的一个重要原因。

综上所述，UniApp因其跨平台特性、基于Vue.js框架、丰富的组件和插件、高效的性能以及原生体验等优点，成为开发者开发应用程序的首选框架之一。

3.结构概述

UniApp 是一个跨平台的应用开发框架，它允许开发者使用一套代码在多个平台上（如 iOS、Android 和 Web）构建应用程序。UniApp 的结构可以从几个方面来概述：

Vue.js 基础：UniApp 是基于 Vue.js 框架的，它采用 Vue.js 的模板语法和组件化开发理念，因此对于熟悉 Vue.js 的开发者来说，上手 UniApp 非常容易。
UI 组件：UniApp 提供了丰富的 UI 组件库，包括基础组件（如按钮、输入框等）和高级组件（如导航、图表等），开发者可以根据需要使用这些组件快速构建应用界面。
API 接口：UniApp 提供了一系列丰富的 API 接口，涵盖了网络请求、存储、文件操作、设备信息等功能，方便开发者调用这些接口来实现应用的各种功能。
插件支持：UniApp 支持插件扩展，可以通过插件扩展应用的功能，例如增加地图、音视频、支付等功能。开发者可以使用官方提供的插件或自行开发插件。
原生开发能力：UniApp 支持原生开发能力，允许开发者在需要时编写原生代码（如 Objective-C、Java 等）来实现特定的功能。这使得 UniApp 的应用能够接近原生应用的体验。
项目结构：UniApp 项目的结构通常包括：
- src：源代码目录，包括页面和组件。
- common：存放公共方法、配置等。
- static：存放静态资源，如图片、音频等。
- pages：存放应用的页面文件。
- components：存放应用的组件文件。
- manifest.json：应用的配置文件，包括应用的元数据、页面路径等。
构建和打包：UniApp 支持一键构建和打包功能，开发者可以通过配置文件和命令行工具快速构建出不同平台的应用包。

UniApp 的结构设计简洁且灵活，能够满足开发者的多样化需求，使其成为一种高效的跨平台应用开发框架。

准备工作

安装与配置与创建项目

1.安装编辑器：Hbuilder X

2. 创建UniApp项目：打开HBuilderX，点击菜单栏的“文件”->“新建”->“项目”，选择“uni-app”模板，填写项目名称和路径，点击“创建”按钮即可创建一个UniApp项目。

3.运行项目：在HBuilderX中，点击菜单栏的“运行”->“运行到浏览器”，选择对应的运行环境，即可将UniApp项目运行到手机或模拟器上。

运行到小程序需要选择微信开发工作者的路径

然后在小程序APP里面设置--安全设置--把服务器端口打开

项目运行成功

UniApp 基础

页面与组件

样式与样式管理

全局配置

概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

页面配置

数据绑定与事件处理

在uniapp中，数据绑定可以通过{{}}语法实现。可以将数据绑定到页面的元素上。

例如，在vue组件的data属性中定义一个变量message，然后将其绑定到页面元素上：

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

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

在上面的示例中，message变量绑定到了<text>元素上，并显示为Hello world。

同时，还可以通过:语法来进行属性的动态绑定。例如：

<template>
  <view>
    <text :style="textStyle">{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
      textStyle: {
        color: 'red',
        fontSize: '20px',
      },
    };
  },
};
</script>

在上面的示例中，textStyle变量通过:style绑定到了<text>元素的style属性上。

在uniapp中处理事件可以通过@符号实现。

例如，给按钮添加点击事件：

<template>
  <view>
    <button @click="handleClick">Click me</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

在上面的示例中，@click绑定了handleClick方法，并在方法中输出了Button clicked。

同时，可以通过传递参数给方法来获取事件的相关信息。

例如，获取点击事件的信息：

<template>
  <view>
    <button @click="handleClick($event)">Click me</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('Button clicked:', event);
    },
  },
};
</script>

在上面的示例中，$event是事件对象，可以通过event参数来获取相关信息。

路由与导航

在uniapp中，路由和导航都是用来控制页面之间的跳转和切换。

1. 路由（Router）：路由是指定义不同页面之间的跳转关系，通过路由可以实现页面的切换和传递参数。在uniapp中，可以使用内置的uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch等方法来进行页面的路由跳转。例如：

// 跳转到目标页面
uni.navigateTo({
  url: '/pages/target/target?id=123'
})

// 重定向到目标页面
uni.redirectTo({
  url: '/pages/target/target?id=123'
})

// 切换到目标 Tab 页面
uni.switchTab({
  url: '/pages/tab1/tab1'
})

// 关闭所有页面，打开到应用内的某个页面
uni.reLaunch({
  url: '/pages/login/login'
})

2.导航（Navigation）：导航是指在页面内部进行内容的跳转和切换，通常用于实现页面的分段展示和操作。在uniapp中，可以使用内置的uni.navigateTo、uni.redirectTo、uni.switchTab等方法进行导航跳转。同时还可以使用vue-router来实现更复杂的导航功能。例如：

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

以上是uniapp中路由和导航的基本用法，通过路由和导航，可以轻松实现页面之间的跳转和切换，提供更好的用户体验。

网络请求与数据交互

使用 uni.request 发送请求

描述：接口文档提供了一个get请求的接口，需要把接口的分类数据请求回来并渲染到页面当中。

具体步骤如下：

1、在method里面定义一个用于请求分类数据的方法，方法名为getClassifyList

2、在getClassifyList方法里面使用uni.request API请求接口的数据

3、把请求回来的数据渲染到页面上。

总结

UniApp是一款非常实用的跨平台开发框架。它的学习曲线低、开发效率高，对于前端开发者来说，是一个很好的选择。我个人非常喜欢使用UniApp进行开发，并且与其他开发者交流和分享经验，共同进步。如果你对跨平台开发感兴趣，我推荐你尝试一下UniApp，相信你会有很好的体验和收获。

FLLLLLDL

关注

32
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
初学者指南：从零开始学习 UniApp

UniApp是一款非常实用的跨平台开发框架。它的学习曲线低、开发效率高，对于前端开发者来说，是一个很好的选择。我个人非常喜欢使用UniApp进行开发，并且与其他开发者交流和分享经验，共同进步。如果你对跨平台开发感兴趣，我推荐你尝试一下UniApp，相信你会有很好的体验和收获。
复制链接

扫一扫