您现在的位置是:首页 >技术交流 >新星计划 uni-app 学习1网站首页技术交流
新星计划 uni-app 学习1
活动地址:
教程地址:
每日一学Vue脚手架中基础的ref属性与原生id区别_ref和id区别_lqj_本人的博客-CSDN博客
每日一学vue2:组件复用(详细讲解)、mixin(混入)、mounted(){}钩子函数、plugins(自定义插件)_mixin mounted_lqj_本人的博客-CSDN博客
由于有vue2基础,这部分不再多写,B站可以找到对应教程。
一、基础
数据和页面采用前后分离。
由vue文件编译成js文件,uni-app有编译器、运行时的概念。
文件内代码架构遵循“vue单文件组件(SFC)规范”。
vue单文件组件(SFC)规范,解释如下:
<template>、<script> 和 <style>为顶级语言块,一个<template>下必须包含一个<view>,将页面作为一个特殊组件处理。
vue2中 <template>一个页面尽可有一个,vue3中可以有多个。
外部引用需要根据es6语法,用util.js导入。
<style>
@import "./common/uni.css";//css导入
.uni-hello-text{
color:#7A7E83;
}
</style>
<script>
@import "./common/uni.css";//css导入
import pageHead from './components/page-head.vue' //vue文件导入
import commonData from '../../commonData.js'//引入js
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
//全局mian.js导入
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。
标签属于组件使用,比如引入一个vue文件,就可将其作为组件使用。
可以使用微信组件和内置组件。h5旧标签编译时会编译成新标签,但是编译H5时可能会混乱,所以推荐都是用新标签。
h5原组件 | uni-app | 解释 |
div | view | |
span、font | text | |
a | navigator | |
img | image | |
input | input | uniapp中仅作为输入框 |
其他表单空间 | radio组件、checkbox组件、时间选择组件、日期选择组件、图片选择api、视频选择api、多媒体文件选择api、通用文件选择api | 因为跨平台,组件和api有其兼容性。 |
form、bottun、label、textarea、canvas、video | 保留 | |
select | picker | |
iframe | web-view | |
li、ui | ulist组件 | |
audio | 背景音乐api文档 |
手机端常用标签,更多组件可以在插件市场中下载和安装,有收费和免费。
名称 | 解释 |
scroll-view | 可区域滚动视图容器 |
swiper | 可滑动区域视图容器 |
icon | 图标 |
rich-text | 富文本框 |
progress | 进度条 |
slider | 滑块指示器 |
switch | 开关选择器 |
camera | 相机 |
live-player | 直播 |
map | 地图 |
cover-view | 可覆盖原生组件试图容器 |
js的变化,分为运行环境变化、数据绑定模式变化、api变化3部分。
浏览器专用的window、document、navigator、location对象,包括cookie等存储,只有在浏览器中才有,app和小程序都不支持。
在uni-app的各个端中,除了h5端,其他端的js都运行在一个独立的v8引擎下,不是在浏览器中,所以浏览器的对象无法使用,依赖document的很多HTML的库,比如jquery无法使用。
app和小程序支持web-view组件,里面可以加载标准HTML,这种页面仍然支持浏览器专用对象。
dom操作改为mvvm,数据双向绑定,这是vue的特点。
uni-app中只支持标准的vue,不支持小程序的数据绑定语法。
在高级用法里,vue支持给组件设ref(引用标记),这类似于之前html中给一个dom元素设id,然后在js中也可以用this.$refs.xxx
来获取。
alert、confirm改成uni.showmodel;ajax改成uni.request;local.storage改为uni.storage。uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。
css选择器有2个变化:*选择器不支持;元素选择器里没有body,改为了page。
单位推荐使用rpx,全端支持;布局推荐使用flex。
css里背景图和字体文件,尽量不要大于40k,因为会影响性能。在小程序端,如果要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。
每个页面需要在page.js中注册,和小程序app.json类似,page节点下第一个页面就是首页。一般在/pages/xx的目录下。页面原生的导航栏和底部tabbar在pages.json中做配置。
小程序app.json被拆分,page.json处理页面管理,mainfest.json处理非页面管理;小程序app.js和app.wxss合并在app.vue中。
二、vue部分内容
由于uni-app使用vue编写,其编译和编写时可使用vue特性做其他操作,所以写出来加深印象。
1、vue ref
ref与id以及对应的this.$refs.xxx与document.getElementById("xxx")区别如下:
- <tempalte> 标签下效果相同
- 组件中ref获取对象,而根据id获取的内容仅为字符串
ref使用方法
<template>
<div id="app">
<h1 ref="qqq">{{lqj}}</h1>
<h1 id="qqq1">{{lqj}}</h1>
<HelloWorld ref="msg"></HelloWorld>
<HelloWorld id="msg1"></HelloWorld>
<button @click="dianji">TEST</button>
</div>
</template>
<script>
...
export default {
name: 'App',
data(){
return{
lqj:'test'
}
},
...
methods:{
dianji(){
console.log(this.$refs.qqq)//<h1>test</h1>
console.log(this.$refs.msg)//组件对象
console.log(document.getElementById("msg1"))//含有标签的字符串
console.log(document.getElementById("qqq1"))//<h1>test</h1>
},
}
}
...
</script>
2、组件使用
组件中props不可直接修改,需要用该组件中的data重新赋值的变量操作,同样该组件内修改不影响父组。
相同功能的需求,可以抽象成方法后放在公用文件夹下,使用的时候import。全局加载的话,组件内不用再加载。
生命周期函数mounted(),不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted
内部使用 vm.$nextTick。
官网:API — Vue.js
mounted: function () {
this.$nextTick(function () {
// 仅在整个视图都被渲染之后才会运行的代码
})
}
vue.prototype给原型添加方法。
//test.js 自定义的文件
export const lqj={
install(Vue){
Vue.prototype.hello = () =>{alert('nihao')}
}
}
//main.js
import {lqj} from './test'
Vue.use(lqj)
// 创建vm
new Vue({
render: h => h(App),
}).$mount('#app')
//组件
<template>
<div>
<button @click="dianji">点击我显示nihao</button>
</div>
</template>
<script>
export default {
methods:{
dianji(){
this.hello()
}
}
}
</script>
//点击后提示框显示