uni-app学习笔记（⼀）-官⽅⽂档的学习路线
资料观看顺序（在⽐较中学习）：
5.与
7.观看。
8.看完uniapp官⽹的《》、《》（先看常⽤的）、《》（先⼤体了解）、《》、《路由（、）》《》、《》（包括案例页和HBuilderX中的模板项⽬）
9.然后就是刷⼏个+Vue官⽹的视频。
10.现在就可以上⼿⼤部分项⽬了，边做项⽬边学完《》、《》。
注意：uni-app 使⽤vue的语法+⼩程序的标签和API，HBuilder X创建项⽬中包含了⼤量可供学习或使⽤的模板框架。
⼀，uniapp⽬录结构
┌─uniCloud 云空间⽬录，阿⾥云为uniCloud-aliyun，腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件⽬录
│└─comp-a.vue 可复⽤的a组件
├─hybrid App端存放本地html⽂件的⽬录，详见
├─platforms 存放各平台专⽤页⾯的⽬录，详见
├─pages 业务页⾯⽂件存放的⽬录
│├─index
││└─index.vue index页⾯
│└─list
│└─list.vue list页⾯
├─static存放应⽤引⽤的本地静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此,static⽬录下的⽂件均会被完整打包进去，且不会编译（es6代码不要放这⾥了，css和less/scss等⽂件建议放到⾃建的common⽂件夹下）。⾮static⽬录下的⽂件（vue、js、css 等）只有被引⽤到才
会被打包编译进去。
├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放⼩程序组件的⽬录，详见
├─main.js Vue初始化⼊⼝⽂件
├─App.vue 应⽤配置，⽤来配置App全局样式以及监听应⽤⽣命周期
├─manifest.json 配置应⽤名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页⾯路由、导航条、选项卡等页⾯类信息，详见
└─uni.scss 这⾥是uni-app内置的常⽤样式变量
⼆，使⽤到的⼯具
、（实时调试⽤，初步上⼿阶段⽐浏览器好⽤点）、、⼿机模拟器（、、）。
三，.Vue⽂件介绍
⼀般包含 <template>、<script> 和 <style>，可以⾃定义标签和使⽤sass语法
<template>：html标签;vue标签与html标签是有区别的（h1,h2、div还是⽀持的），详细见：。
<script>：javascript，同html⽂件的⽤法;
<style>：样式，同html⽂件的⽤法;
1 <template> /* 最多有⼀个template */
2 <view class="example">{{ msg }}</view>
3 </template>
4
5 <script> /* 最多有⼀个script*/
6 export default {
7 data () {
8 return {
9 msg: 'Hello world!'
10 }
11 }
12 }
13 </script>
14
15 <style> /* 可以有多个style */
16 .example {
17 color: red;
18 }
19 </style>
20
21 <custom1> /* ⾃定义标签 */
22 This could documentation for the component.
23 </custom1>
同样vue⽀持把资源放到外⾯，使⽤和html⼀样的相对路径引⽤（相对路径或者绝对路径）。
1 <template src="./template.html"></template>
2 <style src="./style.css"></style>
3 <script src="./script.js"></script>
或者css样式部分导⼊
<style>
@import "../../common/uni.css";
.uni-card { box-shadow: none; }
</style>
也⽀持内联样式写法：
<view : />
补充：
四，Vue组件的引⽤
Vue⽀持引⽤Vue组件，使⽤⼀般分3步（创建、引⽤、注册、使⽤）。
1.创建⼦Vue组件(⼀般放在component⽬录中)，⽐如上⾯‘三’中的样⼦；
⽐如创建了⽗组件Fvue.vue和⼦组件Cvue.vue
2.引⽤，在⽗组件中使⽤import的⽅式引⽤⼦组件（<script></script>标签中），如下：
import cvue from'./component/Cvue.vue'
3.注册，在⽗组件的<script></script>标签内的 data 代码块后⾯加上 components: { cvue }
1 export default {
2 data () {
3return {
4
5 }
6 },
7 components: {c vue }
8 }
4.使⽤，通过上⾯的步骤就可以在⽗组件中直接使⽤cvue标签了：
1 <template>
2 <view id="app">
3 <image src="@/static/logo.png">
4 <text>{{ title }}</text>
5 <cvue></cvue>
6 </view>
7 </template>
补充1-全局引⽤（就是把上⾯写在⽗组件的<script></script>标签中的放到main.js中，写法还是有点不⼀样的）：
①参照上⾯创建⼦组件
②在⼯程根⽬录的main.js中添加代码（引⽤、注册），如下：
import ffvue './components/FFvue.vue'
Vueponent('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⽬录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
background-image: url(/static/logo.png);
<!-- 相对路径 --> <image class="logo" src="../../static/logo.png"></image>
@import url('../../common/uni.css');
注意
@开头的绝对路径以及相对路径会经过base64转换规则校验
引⼊的静态资源在⾮h5平台，均不转为base64。
H5平台，⼩于4kb的资源会被转换成base64，其余不转。
不⽀持本地图⽚的平台，⼩于40kb，⼀定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
App平台⾃HBuilderX 2.6.9起template节点中引⽤静态资源⽂件时（如：图⽚），调整查策略为【基于当前⽂件的路径搜索】，与其他平台保持⼀致。
⽀付宝⼩程序组件内 image 标签不可使⽤相对路径。
js⽂件不⽀持使⽤/开头的⽅式引⼊
补充：①（专有⽬录下的静态资源只有在特定平台才会编译进去）
②（存放适⽤于特定平台的Vue组件⽬录，也是条件编译，见）
六，⽣命周期
⽣命周期包含应⽤⽣命周期和页⾯⽣命周期、组件⽣命周期。
1.应⽤⽣命周期：
①onLaunch：当uni-app 初始化完成时触发（全局只触发⼀次）
②onShow：当 uni-app 启动，或从后台进⼊前台显⽰
③onHide：当 uni-app 从前台进⼊后台
④onError：当 uni-app 报错时触发
⑤onUniNViewMessage：对 nvue 页⾯发送的数据进⾏监听，可参考
⑥onUnhandledRejection：对未处理的 Promise 拒绝事件监听函数（2.8.1+）
⑦onPageNotFound：页⾯不存在监听函数（页⾯实际上已经打开了（⽐如通过分享卡⽚、⼩程序码）且发现页⾯不存在，才会触发，api 跳转不存在的页⾯不会触发，如uni.navigateTo）
⑧onThemeChange：监听系统主题变化
2.页⾯⽣命周期：
①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、H5
onNavigationBarSearchInputConfirmed：监听原⽣标题栏搜索输⼊框搜索事件，⽤户点击软键盘上的“搜索”按钮时触发，App、H5
onNavigationBarSearchInputClicked：监听原⽣标题栏搜索输⼊框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发），App、H5； onShareTimeline：监听⽤户点击右上⾓转发到朋友圈，⼩程序； onAddToFavorites：监听⽤户点击右上⾓收藏，⼩程序；3.组件（控件）⽣命周期：
①beforeCreate：在实例化完成前 ②created：在实例化完成后 ③beforeMount：在挂载开始前 ④mounted：在挂载完成后
⑤beforeUpdate：数据更新时的虚拟Dom渲染和打补丁之前 ⑥updated：数据更新时虚拟Dom渲染和打补丁之后 ⑦beforeDestroy：Vue组件⽰例销毁前 ⑧destroyed：Vue组件⽰例销毁后
七，路由
1.路由跳转（看navigator 和uni.navigatorTo()两种⽅法的介绍）
⽀持、跳转，也可以通过在插件市场安装Vue Router 插件来实现Vue Router 跳转。2.页⾯栈（常⽤的路由⽅法）
⼋、条件编译
见：
九、判断运⾏平台
见：
⼗，页⾯样式与布局
1.全局css 样式：
定义在 App.vue 中的样式为全局样式，作⽤于每个页⾯，各个页⾯可重写该样式对其覆盖。 注：nvue 页⾯暂不⽀持全局样式
2.uni-app 的内置CSS 变量（状态栏、导航栏、底部选项卡的⼀些样式改变⽤到的变量）
①注意：
var(--status-bar-height) 此变量在⼩程序环境为固定 25px ，在 App ⾥为⼿机实际状态栏⾼度。
当设置 "navigationStyle":"custom" 取消原⽣导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使⽤⼀个⾼度为 var(--status-bar-height) 的 view 放在页⾯顶部，避免页⾯内容出现在状态栏。
由于在H5端，不存在原⽣导航栏和tabbar ，也是前端div 模拟。如果设置了⼀个固定位置的居底view ，在⼩程序和App 端是在tabbar 上⽅，但在H5端会与tabbar 重叠。此时可使⽤--
路由⽅式页⾯栈表现触发时机
初始化新页⾯⼊栈uni-app 打开的第⼀个页⾯打开新页⾯新页⾯⼊栈
调⽤ API 、使⽤组件 页⾯重定向当前页⾯出栈，新页⾯⼊栈调⽤ API 、使⽤组件
页⾯返回页⾯不断出栈，直到⽬标返回页调⽤ API 、使⽤组件 、⽤户按左上⾓返回按钮、安卓⽤户点击物理back 按键Tab 切换页⾯全部出栈，只留下新的 Tab 页⾯调⽤ API 、使⽤组件 、⽤户切换 Tab 重加载页⾯全部出栈，只留下新的页⾯
调⽤ API 、使⽤组件
CSS 变量
描述
App
⼩程序H5--status-bar-height 系统状态栏⾼度
、nvue 注意见下25px 0
--window-top 内容区域距离顶部的距离00NavigationBar 的⾼度--window-bottom
内容区域距离底部的距离
TabBar 的⾼度
window-bottom，不管在哪个端，都是固定在tabbar上⽅。
⽬前 nvue 在App端，还不⽀持 --status-bar-height变量，替代⽅案是在页⾯onLoad时通过SystemInfoSync().statusBarHeight获取状态栏⾼度，然后通过style绑定⽅式给占位view设定⾼度。
②下⾯是提供的⽰例代码
快速书写css变量的⽅法是：在css中敲hei，在候选助⼿中即可看到3个css变量。（HBuilderX 1.9.6
以上⽀持）
⽰例1 - 普通页⾯使⽤css变量：
<template>
<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：uniapp.dcloud.io/component/page-meta -->
<page-meta>
<navigation-bar />
</page-meta>
<view>
<view class="status_bar">
<!-- 这⾥是状态栏 -->
</view>
<view> 状态栏下的⽂字 </view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
<template>
手机上可以打html与css的app<view>
<view class="toTop">
<!-- 这⾥可以放⼀个向上箭头，它距离底部tabbar上浮10px-->
</view>
</view>
</template>
<style>
.toTop {
bottom: calc(var(--window-bottom) + 10px)
}
</style>
⽰例2 - nvue页⾯获取状态栏⾼度：
<template>
<view class="content">
<view :></view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight:0
}
},
onLoad() {
this.iStatusBarHeight = SystemInfoSync().statusBarHeight
}
}
</script>
uni-app 中以下组件的⾼度是固定的，不可修改：
组件描述App H5 NavigationBar导航栏44px44px TabBar底部选项卡HBuilderX 2.3.4之前为56px，2.3.4起和H5调为⼀致，统⼀为 50px。但可以⾃主更改⾼度）50px
各⼩程序平台，包括同⼩程序平台的iOS和Android的⾼度也不⼀样。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论