、1415 20
21 /* ⾃定义标签 */22 This could be e.g. documentation for the component.23
同样vue⽀持把资源放到外⾯,使⽤和html⼀样的相对路径引⽤(相对路径或者绝对路径)。
1 2 3 或者css样式部分导⼊
也⽀持内联样式写法:
补充:
四,Vue组件的引⽤
Vue⽀持引⽤Vue组件,使⽤⼀般分3步(创建、引⽤、注册、使⽤)。1.创建⼦Vue组件(⼀般放在component⽬录中),⽐如上⾯‘三’中的样⼦; ⽐如创建了⽗组件Fvue.vue和⼦组件Cvue.vue
2.引⽤,在⽗组件中使⽤import的⽅式引⽤⼦组件(标签中),如下:
import cvue from './component/Cvue.vue'
3.注册,在⽗组件的标签内的 data 代码块后⾯加上 components: { cvue }
1 export default {2 data () {3 return {
4 5 }6 },
7 components: {cvue } 8 }
4.使⽤,通过上⾯的步骤就可以在⽗组件中直接使⽤cvue标签了:
1 2 3 4 {{ title }}5 6
7
补充1-全局引⽤(就是把上⾯写在⽗组件的标签中的放到main.js中,写法还是有点不⼀样的): ①参照上⾯创建⼦组件
②在⼯程根⽬录的main.js中添加代码(引⽤、注册),如下:
import ffvue './components/FFvue.vue' Vue.component('f-fvue',ffvue)
③使⽤,在该项⽬任何vue组件中都可以通过标签引⽤
补充2-传值: 见:。
五,资源的那些事
template内引⼊静态资源,如image、video等标签的src属性时,可以使⽤相对路径或者绝对路径,形式如下
background-image: url(/static/logo.png);
@import url('../../common/uni.css');
注意
@开头的绝对路径以及相对路径会经过base转换规则校验引⼊的静态资源在⾮h5平台,均不转为base。
H5平台,⼩于4kb的资源会被转换成base,其余不转。
不⽀持本地图⽚的平台,⼩于40kb,⼀定会转base。(共四个平台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.页⾯栈(常⽤的路由⽅法)
路由⽅式初始化打开新页⾯页⾯重定向页⾯返回Tab 切换重加载
⼋、条件编译
见:
页⾯栈表现新页⾯⼊栈新页⾯⼊栈
当前页⾯出栈,新页⾯⼊栈页⾯不断出栈,直到⽬标返回页页⾯全部出栈,只留下新的 Tab 页⾯页⾯全部出栈,只留下新的页⾯
触发时机
uni-app 打开的第⼀个页⾯调⽤ API 、使⽤组件 调⽤ API 、使⽤组件
调⽤ API 、使⽤组件 、⽤户按左上⾓返回按钮、安卓⽤户点击物理back按键调⽤ API 、使⽤组件 、⽤户切换 Tab调⽤ API 、使⽤组件
九、判断运⾏平台
见:
⼗,页⾯样式与布局
1.全局css样式:
定义在 App.vue 中的样式为全局样式,作⽤于每个页⾯,各个页⾯可重写该样式对其覆盖。 注:nvue页⾯暂不⽀持全局样式
2.uni-app的内置CSS变量(状态栏、导航栏、底部选项卡的⼀些样式改变⽤到的变量)
CSS变量
--status-bar-height--window-top--window-bottom
①注意:
描述
系统状态栏⾼度
内容区域距离顶部的距离内容区域距离底部的距离
App
、nvue注意见下00
⼩程序25px00
H50
NavigationBar 的⾼度TabBar 的⾼度
var(--status-bar-height) 此变量在微信⼩程序环境为固定 25px,在 App ⾥为⼿机实际状态栏⾼度。
当设置 \"navigationStyle\":\"custom\" 取消原⽣导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使⽤⼀个⾼度为 var(--status-bar-height) 的 view 放在页⾯顶部,避免页⾯内容出现在状态栏。
由于在H5端,不存在原⽣导航栏和tabbar,也是前端div模拟。如果设置了⼀个固定位置的居底view,在⼩程序和App端是在tabbar上⽅,但在H5端会与tabbar重叠。此时可使⽤--
window-bottom,不管在哪个端,都是固定在tabbar上⽅。
⽬前 nvue 在App端,还不⽀持 --status-bar-height变量,替代⽅案是在页⾯onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏⾼度,然后通过style绑定⽅式给占位view设定⾼度。 ②下⾯是提供的⽰例代码
快速书写css变量的⽅法是:在css中敲hei,在候选助⼿中即可看到3个css变量。(HBuilderX 1.9.6以上⽀持) ⽰例1 - 普通页⾯使⽤css变量:
状态栏下的⽂字
⽰例2 - nvue页⾯获取状态栏⾼度:
uni-app 中以下组件的⾼度是固定的,不可修改:
组件
NavigationBarTabBar
描述导航栏底部选项卡
App44px
HBuilderX 2.3.4之前为56px,2.3.4起和H5调为⼀致,统⼀为 50px。但可以⾃主更改⾼度)
H544px50px
各⼩程序平台,包括同⼩程序平台的iOS和Android的⾼度也不⼀样。
3.字体图标:
⽀持 base 格式字体图标。⽀持⽹络路径字体图标。
⼩程序不⽀持在css中使⽤本地⽂件,包括本地的背景图和字体⽂件。需以base⽅式⽅可使⽤。⽹络路径必须加协议头 https。
从 上拷贝的代码,默认是没加协议头的。
从 上下载的字体⽂件,都是同名字体(字体名都叫iconfont,安装字体⽂件时可以看到),在nvue内使⽤时需要注意,此字体名重复可能会显⽰不正常,可以使⽤⼯具修改。使⽤本地路径图标字体需注意:
为⽅便开发者,在字体⽂件⼩于 40kb 时,uni-app 会⾃动将其转化为 base 格式;
字体⽂件⼤于等于 40kb,仍转换为 base ⽅式使⽤的话可能有性能问题,如开发者必须使⽤,则需⾃⼰将其转换为 base 格式使⽤,或将其挪到服务器上,从⽹络地址引⽤;
字体⽂件的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf'); }
①nvue中不可直接使⽤css的⽅式引⼊字体⽂件,需要使⽤以下⽅式在js内引⼊。nvue内不⽀持本地路径引⼊字体,请使⽤⽹络链接或者base形式。src字段的url的括号内⼀定要使⽤单引号。
var domModule = weex.requireModule('dom');domModule.addRule('fontFace', { 'fontFamily': \"fontFamilyName\", 'src': \"url('https://...')\"})
②使⽤⽰例:
1 2 3 4 5 6 7
8 9 10
4.补充:
①Flexbox⽤法:——uni-app,。 ②
⼗⼀、页⾯渲染控制——template和 block
1.template⽰例:
1 2 3 4 test 为 true 时显⽰ 5
6 7 test 为 false 时显⽰ 8
9
10
2.block⽰例
1 2 3 4 {{item}} - {{index}}5 6
7
注: 在不同的平台表现存在⼀定差异,推荐统⼀使⽤
引⽤:该⽂章为本⼈的学习笔记,可供⼤家学习参考,与uni-app官⽹教程如有出⼊请以官⽅教程为主。uniapp是⼀个很好的前端框架,学习成本不⾼值得⼤家学习(uniapp、⼩程序、uView等好多框架都是在Vue基础上演变的,学好⼀门+Vue语法,再去学其他的就简单了。)