uni-app学习笔记（一）-官方文档的学习路线

uni-app学习笔记（⼀）-官⽅⽂档的学习路线资料观看顺序（在⽐较中学习）：5.与7.观看。8.看完uniapp官⽹的《》、《》（先看常⽤的）、《》（先⼤体了解）、《》、《路由（、）》《》、《》（包括案例页和HBuilderX中的模板项⽬）9.然后就是刷⼏个+Vue官⽹的视频。10.现在就可以上⼿⼤部分项⽬了，边做项⽬边学完《》、《》。注意：uni-app使⽤vue的语法+⼩程序的标签和API，HBuilderX创建项⽬中包含了⼤量可供学习或使⽤的模板框架。⼀，uniapp⽬录结构┌─uniCloud云空间⽬录，阿⾥云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）│─components符合vue组件规范的uni-app组件⽬录│└─comp可复⽤的a组件├─hybridApp端存放本地html├─platforms存放各平台专⽤页⾯的⽬录，详见-a.vue⽂件的⽬录，详见├─pages业务页⾯⽂件存放的⽬录│├─index││└─index.vue│└─listindex页⾯│└─list.vue页list⾯├─static存放应⽤引⽤的本地静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此,static⽬录下的⽂件均会被完整打包进去，且不会编译（es6代码不要放这⾥了，css和less/scss等⽂件建议放到⾃建的common⽂件夹下）。⾮static⽬录下的⽂件（vue、js、css等）只有被引⽤到才会被打包编译进去。├─uni_modules存放[uni_module](/uni_modules)规范的插件。├─wxcomponents存放⼩程序组件的⽬录，详见├─main.js├─App.vueVue初始化⼊⼝⽂件应⽤配置，⽤来配置App全局样式以及监听应⽤⽣命周期├─manifest.json配置应⽤名称、appid、logo、版本等打包信息，详见├─pages.json配置页⾯路由、导航条、选项卡等页⾯类信息，详见└─uni.scss这⾥是uni-app内置的常⽤样式变量⼆，使⽤到的⼯具、（实时调试⽤，初步上⼿阶段⽐浏览器好⽤点）、、⼿机模拟器（、、）。三，.Vue⽂件介绍⼀般包含<template><template>：html标签;vue标签与html标签是有区别的（h1,h2<script>：javascript，同html⽂件的⽤法;<style>:样式，同⽂件的⽤法;、<script>和<style>,可以⾃定义标签和使⽤sass语法、div还是⽀持的），详细见：。html1<template>最多/*有⼀个template*/2<viewclass="example">{{msg}}</view>3</template>45<script>最多有/*⼀个script*/6exportdefault{7data(){8return{9msg:'Helloworld!'}1011}12}13</script>1415<style>可以有/*多个style*/16.example{17color:red;18}19</style>20

21<custom1>/*⾃定义标签*/22Thiscouldbee.g.documentationforthecomponent.23</custom1>同样vue⽀持把资源放到外⾯，使⽤和html⼀样的相对路径引⽤（相对路径或者绝对路径）。1<templatesrc="./template.html"2<stylesrc="./style.css"3<scriptsrc="./script.js"></template>></style>></script>或者css样式部分导⼊<style>@import"../../common/uni.css";.uni-card{box-shadow:none;}</style>也⽀持内联样式写法：<view:style="{color:color}"/>补充：四，Vue组件的引⽤Vue⽀持引⽤Vue组件，使⽤⼀般分3步（创建、引⽤、注册、使⽤）。1.创建⼦Vue组件(⼀般放在component⽬录中)，⽐如上⾯‘三’中的样⼦；⽐如创建了⽗组件Fvue.vue和⼦组件Cvue.vue2.引⽤，在⽗组件中使⽤import的⽅式引⽤⼦组件（<script></script>标签中），如下：importcvuefrom'./component/Cvue.vue'3.注册，在⽗组件的<script></script>标签内的data代码块后⾯加上components:{cvue}1exportdefault{2data(){3return{45}6},7components:{cvue}8}4.使⽤，通过上⾯的步骤就可以在⽗组件中直接使⽤cvue标签了：1<template>2<viewid="app">34<imagesrc="@/static/logo.png"><text>{{title}}</text>5<cvue></cvue>6</view>7</template>补充1-全局引⽤（就是把上⾯写在⽗组件的<script></script>标签中的放到main.js中，写法还是有点不⼀样的）：①参照上⾯创建⼦组件②在⼯程根⽬录的main.js中添加代码（引⽤、注册），如下：importffvue'./components/FFvue.vue'Vponent('f-fvue',ffvue)③使⽤，在该项⽬任何vue组件中都可以通过<f-fvue/>标签引⽤<template><view><f-fvue></f-fvue></view></template>补充2-传值：见：。五，资源的那些事template内引⼊静态资源，如image、video等标签的src属性时，可以使⽤相对路径或者绝对路径，形式如下<!--绝对路径，/static指根⽬录下的static⽬录，在cli项⽬中/static指src⽬录下的static⽬录--><imageclass="logo"src="/static/logo.png"></image><imageclass="logo"src="@/static/logo.png"></image>background-image:url(/static/logo.png);<!--相对路径--><imageclass="logo"src="../../static/logo.png"></image>@importurl('../../common/uni.css');注意@开头的绝对路径以及相对路径会经过base64引⼊的静态资源在⾮h5平台，均不转为base64H5平台，⼩于4kb的资源会被转换成base64不⽀持本地图⽚的平台，⼩于40kb，⼀定会转base64平台⾃HBuilderX2起tem.6.9plate节点中引⽤静态资源⽂件时（如：图⽚），调整查找策略为【基于当前⽂件的路径搜索】，与其他平台保持⼀致。⽀付宝⼩程序组件内image转换规则校验。，其余不转。。（共四个平台mp-weixin,mp-qq,mp-toutiao,appv2）App标签不可使⽤相对路径。js⽂件不⽀持使⽤/开头的⽅式引⼊补充：①（专有⽬录下的静态资源只有在特定平台才会编译进去）②（存放适⽤于特定平台的Vue组件⽬录，也是条件编译，见）六，⽣命周期⽣命周期包含应⽤⽣命周期和页⾯⽣命周期、组件⽣命周期。1.应⽤⽣命周期：①onLaunch②onShow：当uni-app③onHide：当uni-app④onError：当uni-app报错时触发⑤onUniNViewMessage：对nvue页⾯发送的数据进⾏监听，可参考⑥onUnhandledRejection：对未处理的Promise拒绝事件监听函数（2.8.1+）⑦onPageNotFound：页⾯不存在监听函数（页⾯实际上已经打开了（⽐如通过分享卡⽚、⼩程序码）且发现页⾯不存在，才会触发a，pi跳转不存在的页⾯不会触发，如：当uni-app初始化完成时触发（全局只触发⼀次）启动，或从后台进⼊前台显⽰从前台进⼊后台uni.navigateTo）⑧onThemeChange2.页⾯⽣命周期：①onInit②onLoad③onShow④onReady⑤onHide:⑥onUnload:⑦onResize:App：监听系统主题变化：百度⼩程序特有的，监听页⾯初始化时；：监听页⾯加载时；：监听页⾯显⽰时；：监听页⾯初次渲染完成；监听页⾯隐藏；监听页⾯卸载；、微信⼩程序监听页⾯尺⼨变化；⑧onPullDownRefresh:页⾯下拉（刷新）事件；⑨onReachBottom:页⾯上滑触底事件；⑩onTabltemTap:点击tab时触发的事件，微信⼩程序、QQ⼩程序、⽀付宝⼩程序、百度⼩程序、H5、App；onShareAppMessage：⽤户点击右上⾓分享，微信⼩程序、QQ⼩程序、⽀付宝⼩程序、字节⼩程序、飞书⼩程序、快⼿⼩程序；onPageScroll：监听页⾯滚动，nvue暂不⽀持；onNavigationBarButtonTap：监听原⽣标题栏按钮点击事件，App、H5；onBackPress：监听页⾯返回，app、H5、⽀付宝⼩程序，⽀付宝⼩程序有点特殊使⽤见官⽹⽂档；onNavigationBarSearchInputChanged：监听原⽣标题栏搜索输⼊框输⼊内容变化事件；App、H5onNavigationBarSearchInputConfirmed：监听原⽣标题栏搜索输⼊框搜索事件，⽤户点击软键盘上的“搜索”按钮时触发，App、H5

3.组件（控件）⽣命周期：①beforeCreate：在实例化完成前②created：在实例化完成后③beforeMount：在挂载开始前④mounted：在挂载完成后⑤beforeUpdate：数据更新时的虚拟Dom渲染和打补丁之前⑥updated：数据更新时虚拟Dom渲染和打补丁之后⑦beforeDestroy：Vue组件⽰例销毁前⑧destroyed：Vue组件⽰例销毁后七，路由1.路由跳转（看navigator和uni.navigatorTo()两种⽅法的介绍）⽀持、跳转，也可以通过在插件市场安装VueRouter插件来实现VueRouter跳转。2.页⾯栈（常⽤的路由⽅法）路由⽅式初始化页⾯栈表现触发时机新页⾯⼊栈uni-app打开的第⼀个页⾯打开新页⾯新页⾯⼊栈调⽤API、使⽤组件页⾯重定向页⾯返回Tab切换重加载当前页⾯出栈，新页⾯⼊栈调⽤API、使⽤组件页⾯不断出栈，直到⽬标返回页页⾯全部出栈，只留下新的Tab页⾯页⾯全部出栈，只留下新的页⾯调⽤API、使⽤组件、⽤户按左上⾓返回按钮、安卓⽤户点击物理back按键调⽤API、使⽤组件、⽤户切换Tab调⽤API、使⽤组件⼋、条件编译见：九、判断运⾏平台见：⼗，页⾯样式与布局1.全局css样式：定义在App.vue中的样式为全局样式，作⽤于每个页⾯，各个页⾯可重写该样式对其覆盖。注：nvue页⾯暂不⽀持全局样式2.uni-app的内置CSS变量（状态栏、导航栏、底部选项卡的⼀些样式改变⽤到的变量）CSS变量描述App⼩程序25px0H50--status-bar-height系统状态栏⾼度、nvue注意见下--window-top内容区域距离顶部的距离00NavigationBar的⾼度TabBar的⾼度--window-bottom内容区域距离底部的距离0①注意：var(--status-bar-height)此变量在微信⼩程序环境为固定25px，在App⾥为⼿机实际状态栏⾼度。当设置"navigationStyle":"custom"取消原⽣导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使⽤⼀个⾼度为var(--status-bar-height)⾯内容出现在状态栏。由于在H5端，不存在原⽣导航栏和tabbar，也是前端div模拟。如果设置了⼀个固定位置的居底view，在⼩程序和App端是在tabbar上⽅，但在H5端会与tabbar的view放在页⾯顶部，避免页重叠。此时可使⽤--window-bottom，不管在哪个端，都是固定在tabbar上⽅。⽬前nvue在App端，还不⽀持--status-bar-height变量，替代⽅案是在页⾯onLoad位view设定⾼度。时通过uni.getSystemInfoSync().statusBarHeight获取状态栏⾼度，然后通过style绑定⽅式给占②下⾯是提供的⽰例代码快速书写css变量的⽅法是：在css中敲hei⽰例1-普通页⾯使⽤css变量：，在候选助⼿中即可看到3个css变量。（HBuilderX1.9.6以上⽀持）<template><!--2.HBuilderX.36+新增meta,详情：https://uniapp.dcloud.io/component/meta--><meta><navigation-bar/></meta><view>cla="<viewssstatus_bar">这⾥是状态栏<!></view>状态栏<view>下的⽂字</view></view></template><style>.status_bar{va(rheigh--stahte:us-bar-ight);10%0;width:}</style><template><view>cla="<viewsstoTop">这⾥可以放⼀个<!--向上箭头，它距离底部tabbar上浮10px--></view></view></template><style>.toTop{bottom:va(r--windcalc(ow-bottom)10px)+}</style>⽰例2-nvue页⾯获取状态栏⾼度：<template>c<viewlass="content"><view"{hei:sghtyle=:iStatusBarHeight></view>+'px'}"</view></template><script>exportdefault{data(){return{0iStatusBarHeight:}},onLoad(){this.iStatusBarHeiuni.gehtSy=stemInfoSync().statusBarHeight}}</script>uni-app中以下组件的⾼度是固定的，不可修改：组件描述AppH5NavigationBar导航栏44px44px50pxTabBar底部选项卡HBuilderX之前为2.3.456px，2.3.4起和H5调为⼀致，统⼀为50px。但可以⾃主更改⾼度）各⼩程序平台，包括同⼩程序平台的iOS和Android的⾼度也不⼀样。3.字体图标：⽀持base64格式字体图标。⽀持⽹络路径字体图标。⼩程序不⽀持在css中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。⽹络路径必须加协议头https。从上拷贝的代码，默认是没加协议头的。从上下载的字体⽂件，都是同名字体（字体名都叫iconfont，安装字体⽂件时可以看到），在nvue内使⽤时需要注意，此字体名重复可能会显⽰不正常，可以使⽤⼯具修改。使⽤本地路径图标字体需注意：为⽅便开发者，在字体⽂件⼩于40kb时，uni-app会⾃动将其转化为base64格式；字体⽂件⼤于等于40kb，仍转换为base64⽅式使⽤的话可能有性能问题，如开发者必须使⽤，则需⾃⼰将其转换为base64格式使⽤，或将其挪到服务器上，从⽹络地址引⽤；字体⽂件的引⽤路径推荐使⽤以~@开头的绝对路径。@font-face{font-family:test1-icon;src:url('~@/static/iconfont.ttf');}①nvue中不可直接使⽤css的⽅式引⼊字体⽂件，需要使⽤以下⽅式在js内引⼊。nvue内不⽀持本地路径引⼊字体，请使⽤⽹络链接或者base64形式。src字段的url的括号内定要使⽤单引号。vardomModule=weex.requireModule('dom');domModule.addRule('fontFace',{'fontFamily':"fontFamilyName",'src':"url('https://...')"})②使⽤⽰例：1<template>2<view>3<view>4<textclass="test"></text><textcl