前言 - 课程介绍

一、课程背景

二、学前须知

三、课程大纲

UniAPP 快速入门学习

一、UniAPP 介绍

（1）什么是 UniAPP ？

（2）为什么要选择 UniAPP ？

（3）UniAPP 开发环境搭建

二、UniAPP 初始化相关配置

（1）应用配置 manifest.json

（2）编译配置 vue.config.js

（3）全局配置 page.json

（4）全局样式 uni.scss

（5）主组件 App.vue

（6）入口文件 main.js

三、UniAPP 常用组件简介

四、UniAPP 常用 API 简介

前言 - 课程介绍

一、课程背景

大前端时代背景下，前端开发人员掌握单一的 Web 端开发能力已经远远不够了，微信小程序、安卓 APP、IOS APP，甚至是 Windows 桌面端，还有最近出的鸿蒙系统开发，都成了我们成长需要掌握的技能。所以呢，市面上各种「跨平台」开发解决方案层出不穷，比较有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex 等等。

UniAPP 是基于「 Vue + 微信小程序」语言体系，开发人员学习成本低上手快，同时随着如今 UniAPP 生态也逐步趋于成熟。所以，基于 UniAPP 开发多端项目，已经是很多中小型企业常用的技术解决方案。

那么，今天呢，我们就从 UniAPP 基础开始，对照企业级实践标准，从零到一，一步一步打造一个多端（微信小程序 + H5 + 安卓 APP + IOS APP）的社区论坛类项目。

二、学前须知

学前须知：

掌握 HTML、CSS、JS基础，能够构建静态页面
掌握 Vue 基础，能够使用脚手架构建应用
掌握微信小程序基础，对微信小程序组件、API服务有一定的了解

三、课程大纲

课程简介：

课程大纲介绍
实战项目介绍

UniAPP 快速入门学习

一、UniAPP 介绍

（1）什么是 UniAPP ？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。

（2）为什么要选择 UniAPP ？

开发者/案例数量更多

几十万应用、uni 统计月活12亿、70+ 微信 / QQ群

平台能力不受限

在跨端的同时，通过条件编译 + 平台特有 API 调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台

性能体验优秀

加载新页面速度更快、自动 diff 更新数据，App 端支持原生渲染支撑更流畅的用户体验，小程序端的性能优于市场其他框架

周边生态丰富

插件市场数千款插件，支持 NPM、支持小程序组件和SDK，微信生态的各种 sdk 可直接用于跨平台 APP

学习成本低

基于通用的前端技术栈，采用 vue 语法+微信小程序 api，无额外学习成本

（3）UniAPP 开发环境搭建

下载开发工具 HBuilderX

HBuilderX 是通用的前端开发工具，但为uni-app做了特别强化。

下载 App 开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用

创建 uni-app 项目

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。

还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

运行 uni-app

主要包括：浏览器运行、真机运行、小程序运行等

发布 uni-app 主要包括：云端原生 APP 、离线原生 APP、H5、各种小程序

二、UniAPP 初始化相关配置

（1）应用配置 manifest.json

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为H5 设置跨域拦截处理器

（2）编译配置 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。官方文档

（3）全局配置 page.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。

（4）全局样式 uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。官方文档

uni-app 官方扩展插件（uni ui）及插件市场上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

（5）主组件 App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

（6）入口文件 main.js

main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

三、UniAPP 常用组件简介

uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。

虽然不推荐使用 HTML 标签，但实际上如果开发者写了p等标签，在编译到非H5平台时也会被编译器转换为 view 标签，类似的还有 span 转 text、a 转navigator等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发，基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。

四、UniAPP 常用 API 简介

uni-app的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，uni-app的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。

标准 ecmascript 的 API 非常多，比如：console、settimeout等等。

非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。

开发者不要把浏览器里的 js 等价于标准 js。

所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。

Uni-APP入门知识整理相关推荐

前端入门知识整理（1）Vscode使用
前端入门(1) 最近社团需要,所以整理了一下从0开始学习前端的一些知识. 安装软件 (VScode)以及对应插件的安装,相关配置. 介绍vscode常用快捷键初始化第一个html程序 1.软件以及插 ...
深度学习入门知识整理-训练技巧以及模型调优
目录网络模型先简单后复杂确认模型损失检查中间输出和连接关于可视化神经网络的主要方法,Faizan Shaikh 举出了三个例子: 超参数的选择学习率范围侧视图Colab Notebook N ...
speedtree中文对照ppt_SpeedTree树木建模入门知识整理
本文知识点整理仅为记录本人学习过程中的知识点,略显粗浅,内容较杂乱,敬请各位见谅! 一.软件介绍 Speedtree是三维软件做树木的一个很强的软件,支持很多树木的快速建立和渲染,而且它自己本身还带有 ...
JavaScript入门知识整理二
文章目录一.基础知识二.事件示例一.鼠标点击按钮触发add2()函数的执行示例二.文本框示例三.页面加载事件(onload) 三.DOM对象,控制HTML元素示例一.将HTML分解成DOM ...
关于服务器的入门知识整理
1.服务器和PC的区别? 服务器作为硬件来说,通常是指那些具有较高计算能力,能够提供给多个用户使用的计算机. PC机(personal computer)是指个人计算机,在一个时刻通常只为一个用户服务 ...
java快速入门知识整理：9、java数据类型：布尔型(boolean)
文章目录一.布尔型(逻辑型)简单说明二.代码演示说明一.布尔型(逻辑型)简单说明在 Java 语言中布尔类型的值只包括 true 和 false,没有其他值,不包括 1 和 0, 布尔类型的数 ...
智能手机Symbian操作系统入门知识整理
1.什么是S60. 什么是OS6/7/8/9,什么是J2ME. 什么是MIDP 根据人机界面的不同Symbian操作系统分为S60.S80.S90和UIQ,发展不同用户界面 ...
SOME/IP 入门知识整理
1.some/ip 位于OSI 7层模型的4层之上,当接收方有需求的时候才发送,可以大大降低总线的负载. 2.some/ip报文中"Message Type"有以下几种类型: Re ...
如何进入linux基本目录,Linux入门的一些基本知识整理
原标题:Linux入门的一些基本知识整理图形模式与文字模式的切换方式 Linux预设提供了六个命令窗口终端机让我们来登录. 默认我们登录的就是第一个窗口,也就是tty1,这个六个窗口分别为tty1. ...

Uni-APP入门知识整理

前言 - 课程介绍

一、课程背景

二、学前须知

三、课程大纲

UniAPP 快速入门学习

一、UniAPP 介绍

（1）什么是 UniAPP ？

（2）为什么要选择 UniAPP ？

（3）UniAPP 开发环境搭建

二、UniAPP 初始化相关配置

（1）应用配置 manifest.json

（2）编译配置 vue.config.js

（3）全局配置 page.json

（4）全局样式 uni.scss

（5）主组件 App.vue

（6）入口文件 main.js

三、UniAPP 常用组件简介

四、UniAPP 常用 API 简介

Uni-APP入门知识整理相关推荐

最新文章

热门文章