企业网站管理系统介绍,系统定制开发,关键词指数查询,健身所网站建设策划书uniapp快速入门教程#xff0c;内容来源于官方文档#xff0c;仅仅记录快速入门需要了解到的知识点 目录 介绍uniapp 介绍uniapp x 介绍功能框架图创建项目发布组件/标签的变化js的变化css的变化工程结构和页面管理 pages.jsonmanifest.json 应用配置组件easycom组件规…uniapp快速入门教程内容来源于官方文档仅仅记录快速入门需要了解到的知识点 目录 介绍uniapp 介绍uniapp x 介绍功能框架图创建项目发布组件/标签的变化js的变化css的变化工程结构和页面管理 pages.jsonmanifest.json 应用配置组件easycom组件规范 api教程应用生命周期全局样式页面生命周期组件生命周期页面通讯路由互相引用引用组件引用js、json引用css 条件编译处理多端差异使用方法 插件市场问答社区 介绍
官方文档https://uniapp.dcloud.net.cn/
必需技术uniapp、vuejs 3、ES6及以上常用语法、pinia、css、scss
ES6ECMAScript 6是JavaScript语言的一个标准于2015年6月正式发布正式名称为ECMAScript 2015ES2015。} 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平台编译为ArkTSHBuilderX 4.22
h5端运行于浏览器中。非h5端包含小程序和AppAndroid平台运行在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/小程序平台编译为JavaScriptAndroid平台编译为KotliniOS平台编译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 改成 viewspan、font 改成 texta 改成 navigatorimg 改成 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.showmodelajax 改成 uni.requestcookie、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 等。
pagesstyletabBar
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-uihttps://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中可以定义一些全局通用样式。
应用生命周期
函数名说明平台兼容*onLaunch当uni-app 初始化完成时触发全局只触发一次参数为应用启动参数同 uni.getLaunchOptionsSync 的返回值onShow当 uni-app 启动或从后台进入前台显示参数为应用启动参数同 uni.getLaunchOptionsSync 的返回值onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发app-uvue 不支持onUniNViewMessage对 nvue 页面发送的数据进行监听可参考 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、H5onBackPress监听页面返回返回 event {from:backbutton、 navigateBack} backbutton 表示来源是左上角返回按钮或 android 返回键navigateBack表示来源是 uni.navigateBack详见app、H5、支付宝小程序onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件pages.json 中的 searchInput 配置 disabled 为 true 时才会触发App、H51.6.0onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1onAddToFavorites监听用户点击右上角收藏微信小程序、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跳转。
互相引用
引用组件
templateview!-- 2.使用组件 --uni-rate text1/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
styleimport ../../common/uni.css;.uni-card {box-shadow: none;}
/style条件编译处理多端差异
https://uniapp.dcloud.net.cn/tutorial/platform.html
条件编译是用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同平台。
使用方法
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头以 #endif 结尾。
#ifdefif defined 仅在某平台存在#ifndefif 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/
