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小时内删除。