uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点

news2024/9/20 15:17:50

uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点

目录

  • 介绍
    • uniapp 介绍
    • uniapp x 介绍
    • 功能框架图
    • 创建项目&发布
    • 组件/标签的变化
    • js的变化
    • css的变化
    • 工程结构和页面管理
  • pages.json
  • manifest.json 应用配置
  • 组件
    • easycom组件规范
  • api
  • 教程
    • 应用生命周期&全局样式
    • 页面生命周期
    • 组件生命周期
    • 页面通讯
    • 路由
    • 互相引用
      • 引用组件
      • 引用js、json
      • 引用css
    • 条件编译处理多端差异
      • 使用方法
  • 插件市场
  • 问答社区

介绍

官方文档:https://uniapp.dcloud.net.cn/

必需技术:uniapp、vuejs 3、ES6及以上常用语法、pinia、css、scss

‌‌ES6(‌ECMAScript 6)是JavaScript语言的一个标准,于2015年6月正式发布,正式名称为ECMAScript 2015(ES2015)。‌} ES6的目标是使JavaScript能够用于编写复杂的大型应用程序,成为企业级开发语言。它引入了许多新特性,包括但不限于let和‌const关键字、‌模板字符串、‌解构赋值、‌箭头函数、‌Promise、async/await、模块化【import/export】等,这些特性极大地增强了JavaScript的功能和表达能力。‌

在这里插入图片描述

uniapp 介绍

uniapp是基于vue.js开发所有前端应用的框架,编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。也支持鸿蒙。

  • 在web平台,将.vue文件编译为js代码。与普通的vue cli项目类似
  • 在微信小程序平台,编译器将.vue文件拆分生成wxml、wxss、js等代码
  • 在app平台,将.vue文件编译为js代码。进一步,如果涉及uts代码:
    • 在Android平台,将.uts文件编译为kotlin代码
    • 在iOS平台,将.uts文件编译为swift代码
    • 鸿蒙OS平台,编译为ArkTS(HBuilderX 4.22+)

h5端运行于浏览器中。非h5端(包含小程序和App),Android平台运行在v8引擎中,iOS平台运行在iOS自带的jscore引擎中,都没有运行在浏览器或webview里。

uniapp x 介绍

uni-app x,是下一代 uni-app,是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程,它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

uts是一门类ts的、跨平台的、新语言。

uts在iOS平台编译为swift、在Android平台编译为kotlin、在Web和小程序平台编译为js、在鸿蒙next平台上编译为ArkTS。

在Android平台,uni-app x 的工程被整体编译为kotlin代码,本质上是换了vue写法的原生kotlin应用,在性能上与原生kotlin一致。

  • web/小程序平台,编译为JavaScript
  • Android平台,编译为Kotlin
  • iOS平台,编译Swift
  • 暂不支持小程序

功能框架图

在这里插入图片描述

创建项目&发布

uni-app支持通过 可视化界面【推荐&简单】、vue-cli命令行 两种方式快速创建项目。

https://uniapp.dcloud.net.cn/quickstart-hx.html

组件/标签的变化

https://uniapp.dcloud.net.cn/vernacular.html#%E7%BB%84%E4%BB%B6-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%8F%98%E5%8C%96

  • div 改成 view
  • span、font 改成 text
  • a 改成 navigator
  • img 改成 image

js的变化

【自行查看】https://uniapp.dcloud.net.cn/vernacular.html#js%E7%9A%84%E5%8F%98%E5%8C%96

  • 标准js语法和api都支持,比如if、for、settimeout、indexOf等。

  • 但浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。

  • 这意味着依赖document的很多HTML的库,比如jquery无法使用。

  • 在uni-app中只支持标准的vue,不支持小程序的数据绑定语法。

  • js api变化

    • alert,confirm 改成 uni.showmodel
    • ajax 改成 uni.request
    • cookie、session 没有了,local.storage 改成 uni.storage

css的变化

  • 标准的css基本都是支持的
  • *选择器不支持;
  • 单位方面,px无法动态适应不同宽度的屏幕,如果想使用根据屏幕宽度自适应的单位,推荐使用rpx,全端支持。

工程结构和页面管理

  • 每个可显示的页面,都必须在 pages.json 中注册。
┌─uniCloud              云空间目录,支付宝小程序云为uniCloud-alipay,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录
├─uni_modules           存放uni_module 详见
├─platforms             存放各平台专用页面的目录,详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录,详见
├─wxcomponents          存放小程序组件的目录,详见
├─unpackage             非工程代码,一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量

pages.json

https://uniapp.dcloud.net.cn/collocation/pages.html

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

  • pages
  • style
  • tabBar

manifest.json 应用配置

https://uniapp.dcloud.net.cn/collocation/manifest.html

manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录,CLI 创建的工程此文件在 src 目录。

组件

easycom组件规范

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

只要组件安装在项目的components目录下或uni_modules目录下,并符合components/组件名称/组件名称.(vue|uvue)目录结构(注意:当同时存在vue和uvue时,uni-app 项目优先使用 vue 文件,而uni-app x 项目优先使用 uvue 文件,详情)。就可以不用引用、注册,直接在页面中使用。

组件库选型:

uni-ui:https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
在这里插入图片描述

api

https://uniapp.dcloud.net.cn/api/

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

标准 ECMAScript 的 js 仅是最基础的 js。浏览器基于它扩展了 window、document、navigator 等对象。小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。node 也扩展了 fs 等模块。

uni-app 基于 ECMAScript 扩展了 uni 对象,并且 API 命名与小程序保持兼容。

教程

应用生命周期&全局样式

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

  • App.vue中,可以定义一些全局通用样式。

应用生命周期:

函数名说明平台兼容
*onLaunchuni-app 初始化完成时触发(全局只触发一次),参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onShowuni-app 启动,或从后台进入前台显示,参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onHideuni-app 从前台进入后台
onErroruni-app 报错时触发app-uvue 不支持
onUniNViewMessagenvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯app-uvue 不支持
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(2.8.1+ app-uvue 暂不支持)app-uvue 不支持
onPageNotFound页面不存在监听函数app-uvue 不支持
onThemeChange监听系统主题变化app-uvue 不支持
onLastPageBackPress最后一个页面按下Android back键,常用于自定义退出app-uvue-android 3.9+
*onExit监听应用退出app-uvue-android 3.9+
import { defineComponent, ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
export default defineComponent({
  setup() {
    const title = ref('Hello')
    onReady(() => {
      console.log('onReady')
    })
    return {
      title
    }
  }
})

页面生命周期

*为常用方法

函数名说明平台差异说明最低版本
onInit监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad百度小程序3.1.0+
*onLoad监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例。
*onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
*onReady监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发
*onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序、快手小程序
*onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
*onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll监听页面滚动,参数为Objectnvue不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为ObjectApp、H5
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;详见app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)App、H51.6.0
onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序、QQ小程序2.8.1+

组件生命周期

uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

*为常用方法

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之前被调用。详见
*created在实例创建完成后被立即调用。详见
beforeMount在挂载开始之前被调用。详见
*mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,
如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
所有的事件监听器会被移除,所有的子实例也会被销毁。详见

页面通讯

  • uni.$emit(eventName,OBJECT) :触发全局的自定义事件。

  • uni. o n ( e v e n t N a m e , c a l l b a c k ) :监听全局的自定义事件,事件可以由 u n i . on(eventName,callback):监听全局的自定义事件,事件可以由 uni. on(eventName,callback):监听全局的自定义事件,事件可以由uni.emit 触发。

  • uni. o n c e ( e v e n t N a m e , c a l l b a c k ) :监听全局的自定义事件。事件可以由 u n i . once(eventName,callback):监听全局的自定义事件。事件可以由 uni. once(eventName,callback):监听全局的自定义事件。事件可以由uni.emit 触发,但是只触发一次,在第一次触发之后移除监听器。

  • uni.$off(eventName, callback):移除全局自定义事件监听器。

路由

uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

互相引用

引用组件

<template>
	<view>
		<!-- 2.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

引用js、json

// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

引用css

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

条件编译处理多端差异

https://uniapp.dcloud.net.cn/tutorial/platform.html

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

使用方法

#ifdef#ifndef%PLATFORM% 开头,以 #endif 结尾。

  • #ifdef:if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台,其它平台均存在的代码(注意if后面有个n)
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)

插件市场

https://uniapp.dcloud.net.cn/plugin/

问答社区

https://ask.dcloud.net.cn/explore/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2149242.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Unity杂谈】iOS 18中文字体显示问题的调查

一、问题现象 最近苹果iOS 18系统正式版推送&#xff0c;周围升级系统的同事越来越多&#xff0c;有些同事发现&#xff0c;iOS 18上很多游戏&#xff08;尤其是海外游戏&#xff09;的中文版&#xff0c;显示的字很奇怪&#xff0c;就像一些字被“吞掉了”&#xff0c;无法显示…

MongoDB解说

MongoDB 是一个流行的开源 NoSQL 数据库&#xff0c;它使用了一种被称为文档存储的数据库模型。 与传统的关系型数据库管理系统&#xff08;RDBMS&#xff09;不同&#xff0c;MongoDB 不使用表格来存储数据&#xff0c;而是使用了一种更为灵活的格式——JSON 样式的文档。 这…

详解Vite创建Vue3项目router-less-scss-pinia-持久化

前言 Vite 和 Webpack 都是现代化的前端构建工具&#xff0c;它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的&#xff0c;但它们在设计和实现方面有许多不同之处。webpack可以看我的上一篇文章 一、准备工作安装工具 这里我们简单介绍一下文章中使用到…

你必须要懂的网络安全知识

不管是网工还是运维&#xff0c;都应该对网络安全的重要性非常清楚&#xff0c;每一次数据泄露、每一次网络攻击&#xff0c;都可能给企业带来不可估量的损失。 从SQL注入到跨站脚本攻击&#xff08;XSS&#xff09;&#xff0c;从分布式拒绝服务攻击&#xff08;DDoS&#xf…

Java 数据结构 最小栈的实现

在O&#xff08;N&#xff09;时间复杂度内找出最小值&#xff1a; 创建两个栈当普通栈只有一个数据时&#xff0c;把该数据放入最小栈往普通栈放入数据时&#xff0c;把要放入的数据和最小栈的栈顶数据相比较&#xff0c;若要放入的数据比最小栈的栈顶数据小&#xff0c;则把…

容器内的Nodejs应用如何获取宿主机的基础信息-系统、内存、cpu、启动时间,以及一个df -h的坑

在现代应用部署时中&#xff0c;Docker容器化技术被广泛应用。Node.js应用在容器中运行时&#xff0c;有时需要获取宿主机的基础信息&#xff0c;如系统信息、内存使用情况、磁盘空间和启动时间等。本文将介绍如何在Docker容器内的Node.js应用中获取这些信息&#xff0c;以及可…

数字化转型中的企业蓝图构建:基于业务能力建模的全面解读与战略实施指南

随着企业数字化转型的不断深入&#xff0c;业务复杂性和技术需求的多样化推动了企业架构的新变革。为了应对日益复杂的市场环境&#xff0c;如何构建清晰、稳定的业务蓝图成为企业成败的关键。《业务能力指南》为此提供了系统的框架和指导&#xff0c;帮助企业通过业务能力建模…

谷歌女高管被裁员,3份兼职越干越开心!55岁正是闯的年纪!

在职场的金字塔顶端&#xff0c;那些大龄女性高管正在面对一场无形却深刻的危机。曾经&#xff0c;她们凭借坚定的决心和无畏的勇气&#xff0c;在职场中披荆斩棘&#xff0c;闯出了一片天地。 现代职场的年轻化和技术更新正将她们逐渐推向边缘。裁员通知的突如其来&#xff0…

Vue3.0组合式API:使用ref获取DOM元素

Vue3.0组合式API系列文章&#xff1a; 《Vue3.0组合式API&#xff1a;setup()函数》 《Vue3.0组合式API&#xff1a;使用reactive()、ref()创建响应式代理对象》 《Vue3.0组合式API&#xff1a;computed计算属性、watch监听器、watchEffect高级监听器》 《Vue3.0组合式API&…

Go语言grequests库并发请求的实战案例

在当今快速发展的互联网时代&#xff0c;数据的获取和处理速度成为了衡量一个系统性能的重要标准。Go语言以其并发处理能力而闻名&#xff0c;而grequests库则为Go语言的HTTP请求提供了简洁易用的API。本文将通过一个实战案例&#xff0c;介绍如何使用Go语言的grequests库来实现…

卖家必看:利用亚马逊自养号测评精选热门产品,增强店铺权重

在亚马逊的商业版图中&#xff0c;选品始终占据着核心地位&#xff0c;是贯穿其经营策略的永恒旋律。一个商品能否脱颖而出&#xff0c;成为市场中的明星爆款&#xff0c;其关键在于卖家对产品的精挑细选&#xff0c;这一环节的重要性不言而喻&#xff0c;是决定胜负的关键所在…

C++笔记21•C++11的新特性•

相比于 C98/03&#xff0c;C11则带来了数量可观的变化&#xff0c;其中包含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得C11更像是从C98/03中孕育出的一种新语言。相比较而言&#xff0c;C11能更好地用于系统开发和库开发、语法更加泛华和简…

【C语言】自定义类型——结构体

目录 一、结构体的类型的声明 二、结构体变量的创建和初始化 三、匿名结构体类型 四、结构体自引用 五、结构体内存对齐 &#xff08;1&#xff09;对齐规则 &#xff08;2&#xff09;计算结构体大小练习 &#xff08;3&#xff09;需要内存对齐的原因 &#xff08;4…

Eigen3 教程基础篇(三)

参考 Eigen3 主页&#xff0c;Eigen3 官网教程 矩阵的本质&#xff0c;通过多种矩阵的应用去感受矩阵本质 3Blue1Brown 的线性代数&#xff0c;用可视化方法来表现线性代数的特性&#xff0c;强推 如何理解复数和虚数&#xff0c;有动画方便理解复数的意义 相关文章 Eigen…

基于SpringBoot+Vue+MySQL的在线宠物用品商城销售系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着人们生活质量的提升和宠物经济的蓬勃发展&#xff0c;宠物已成为众多家庭不可或缺的一员。宠物市场的需求日益增长&#xff0c;涵盖了食品、用品、医疗、美容等多个领域。基于SpringBootVueMySQL的在线宠物用品商城销售系统…

新产品,推出 MLX90372GVS 第三代 Triaxis® 位置传感器 IC,适用于汽车和工业系统(MLX90372GVS-ACE-308)

Triaxis 旋转和线性位置传感器IC&#xff1a; MLX90372GVS-ACE-103 MLX90372GVS-ACE-108 MLX90372GVS-ACE-301 MLX90372GVS-ACE-200 MLX90372GVS-ACE-208 MLX90372GVS-ACE-303 MLX90372GVS-ACE-300 MLX90372GVS-ACE-350 MLX90372GVS-ACE-100 MLX90372GVS-ACE-101 MLX90372GVS-…

【Java算法】二叉树的深搜

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【算法工作坊】算法实战揭秘 一.2331.计算布尔二叉树的值 题目链接&#xff1a;2331.计算布尔二叉树的值 代码 public boolean evaluateTree(TreeNode root) {if(root.leftnull){return root.val0?f…

VSCode值得推荐的插件(持续更新中)

VSCode值得推荐的插件&#xff08;持续更新中&#xff09; 说明1.Peacock 说明 主要记录VSCode开发过程中插件 1.Peacock 允许开发者为 Visual Studio Code 的工作区界面&#xff08;如侧边栏、底栏和标题栏&#xff09;自定义颜色&#xff0c;以区分不同的项目或编码环境。…

【machine learning-七-线性回归之成本函数】

监督学习之cost function 成本函数权重、偏置如何实现拟合数据成本函数是如何寻找出来w和b&#xff0c;使成本函数值最小化&#xff1f; 在线性回归中&#xff0c;我们说到评估模型训练中好坏的一个方法&#xff0c;是用成本函数来衡量&#xff0c;下面来详细介绍一下 成本函数…

需求3:照猫画虎

说起写需求&#xff0c;其实对于我这种小白而言&#xff0c;接到一个需求&#xff0c;最好的方式就是照猫画虎。 因为我从0到1写&#xff0c;以我现在这种水平&#xff0c;根本就不可能完成。所以照猫画虎&#xff0c;模仿着来写是最好的提升方法。 之前在聊天的时候&#xf…