Uso básico de uni-app
Curso introductorio:
Parte básica:
- Construcción del entorno
- Configuración de la apariencia de la página
- el enlace de datos
- ciclo de vida de la aplicación uni
- Uso de componentes
- Estilo de aprendizaje en uni-app
- Use íconos de fuente y habilite scss en uni-app
- Las anotaciones condicionales son compatibles entre extremos
- eventos en la universidad
- salto de navegación
- Creación y comunicación de componentes, y ciclo de vida de los componentes
- Use la biblioteca uni-ui en uni-app
Proyecto: Proyecto del centro comercial Dark Horse
uni-app Introducción Sitio web oficial
uni-appEs un marco para desarrollar todas las aplicaciones front-end utilizando Vue.js. Los desarrolladores escriben un conjunto de códigos que se pueden publicar en iOS, Android, H5 y varios programas pequeños (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk) , plataforma etc.
Incluso si no es entre terminales, uni-apptambién es un mejor marco para el desarrollo de programas pequeños.
Con experiencia en el desarrollo de applets de vue y WeChat, puede comenzar rápidamente con uni-app
¿Por qué estudiar uni-app?
En comparación con los desarrolladores, el costo de aprendizaje se reduce, porque después de aprender uni-app, puede desarrollar aplicaciones para iOS, Android, H5 y varios programas pequeños, y no necesita aprender el marco para desarrollar otras aplicaciones. Como resultado, el costo de desarrollo también se reduce considerablemente.
Construcción del entorno
Instale la dirección de descarga del editor HbuilderX
HBuilderX es una herramienta de desarrollo front-end de uso general, pero uni-appse ha mejorado especialmente.
Descargue la versión de desarrollo de la aplicación, que se puede usar de inmediato
Instale el enlace de descarga
Inicializar el proyecto con HbuilderX
-
Haga clic en la barra de menú de HbuilderX Archivo > Proyecto > Nuevo
-
Seleccione uni-app, complete el nombre del proyecto, el directorio creado por el proyecto
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-6ncfsp9f-1644290214508)(./images/create.jpg)]
ejecutar proyecto
Haga clic en Ejecutar en la barra de menú, ejecute el navegador, seleccione el navegador para ejecutar
Ejecutar en la herramienta para desarrolladores de WeChat: Ingrese al proyecto hello-uniapp, haga clic en Ejecutar -> Ejecutar en Mini Program Simulator -> Herramienta para desarrolladores de WeChat, y podrá experimentar la aplicación uni en la herramienta para desarrolladores de WeChat
Ejecutar en las herramientas de desarrollo de WeChat: ingrese el proyecto hello-uniapp, haga clic en Ejecutar en la barra de herramientas -> Ejecutar en teléfono móvil o emulador -> seleccione el teléfono móvil del modo
Aviso:
- Si es la primera vez que lo usa, debe configurar la ruta relevante del ide del applet antes de ejecutarlo correctamente
- Las herramientas de desarrollo de WeChat están configuradas de forma segura en la configuración y el puerto de servicio está abierto
Introducir el papel del directorio y los archivos del proyecto.
pages.jsonEl archivo se usa para configurar uni-app globalmente, determinar la ruta del archivo de la página, el estilo de la ventana, la barra de navegación nativa, la barra de pestañas nativa en la parte inferior, etc.
manifest.jsonEl archivo es el archivo de configuración de la aplicación, que se utiliza para especificar el nombre, icono, permisos, etc. de la aplicación.
App.vueEs nuestro componente raíz, todas las páginas se cambian App.vuedebajo de él y es el archivo de entrada de página, que puede llamar a la función de ciclo de vida de la aplicación.
main.jsEs nuestro archivo de entrada del proyecto, la función principal es inicializar vuela instancia y usar los complementos necesarios.
uni.scssEl propósito del archivo es facilitar el control general sobre el estilo de la aplicación. Por ejemplo, el color del botón, el estilo del borde y uni.scssun lote de ajustes preestablecidos de variables scss están preestablecidos en el archivo.
unpackageEs el directorio de empaquetado, donde se encuentran los archivos de empaquetado de cada plataforma.
pagesDirectorio de almacenamiento de todas las páginas
staticDirectorio de recursos estáticos, como imágenes, etc.
componentsDirectorio de almacenamiento de componentes
Para lograr la compatibilidad multiterminal, considerando factores como la velocidad de compilación y el rendimiento de ejecución, uni-appse acuerdan las siguientes especificaciones de desarrollo:
- Los archivos de página siguen la especificación Vue Single File Component (SFC)
- La etiqueta del componente está cerca de la especificación del subprograma, consulte la especificación del componente uni-app para obtener más información.
- La capacidad de la interfaz (API JS) está cerca de la especificación del subprograma WeChat, pero el prefijo debe
wxreemplazarseuni, consulte la especificación de la interfaz uni-app para obtener más información. - El enlace de datos y el procesamiento de eventos son los mismos que
Vue.jsla especificación , pero complementan el ciclo de vida de la aplicación y la página. - Para ser compatible con la operación de múltiples terminales, se recomienda utilizar un diseño flexible para el desarrollo
Configuración global y configuración de página
Configuración global a través de globalStyle
Se utiliza para configurar la barra de estado, la barra de navegación, el título, el color de fondo de la ventana, etc. de la aplicación. documentación detallada
| Atributos | tipo | valores predeterminados | describir |
|---|---|---|---|
| navegaciónBarFondoColor | Color hexadecimal | #F7F7F7 | Color de fondo de la barra de navegación (igual que el color de fondo de la barra de estado) |
| estilo de texto de la barra de navegación | Cadena | blanco | Color del título de la barra de navegación y color de primer plano de la barra de estado, solo admite blanco y negro |
| navegaciónBarTitleText | Cadena | Contenido del texto del título de la barra de navegación | |
| color de fondo | Color hexadecimal | #ffffff | color de fondo de la ventana |
| estilo de texto de fondo | Cadena | oscuro | Tire hacia abajo del estilo de carga, solo soporte oscuro/claro |
| habilitarPullDownRefresh | booleano | FALSO | Ya sea para habilitar la actualización desplegable, consulte el ciclo de vida de la página para obtener más detalles . |
| onReachBottomDistance | Número | 50 | La distancia desde la parte inferior de la página cuando se activa el evento de extracción de la parte inferior de la página, la unidad solo admite px, consulte el ciclo de vida de la página para obtener más detalles. |
Crear una nueva página de mensajes
Haga clic con el botón derecho en las páginas para crear un nuevo directorio de mensajes, haga clic con el botón derecho para crear un nuevo archivo .vue en el directorio de mensajes y seleccione la plantilla básica
<template>
<view>
这是信息页面
</view>
</template>
<script>
</script>
<style>
</style>
Configurar páginas a través de páginas
| Atributos | tipo | valores predeterminados | describir |
|---|---|---|---|
| camino | Cadena | Configurar la ruta de la página | |
| estilo | Objeto | Configure el rendimiento de la ventana de página, los elementos de configuración se refieren a pageStyle |
El primer elemento de la matriz de páginas representa la página de inicio de la aplicación.
"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
Modifique el título y el color de fondo de la barra de navegación de la página a través del estilo y configure el estilo único de la actualización desplegable h5
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path":"pages/message/message",
"style": {
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"disableScroll": true,
"h5": {
"pullToRefresh": {
"color": "#007AFF"
}
}
}
}
]
configurar barra de pestañas
Si la aplicación es una aplicación de varias pestañas, puede especificar el rendimiento de la barra de pestañas y la página correspondiente que se muestra cuando se cambia la pestaña a través del elemento de configuración tabBar.
Consejos
- Cuando la posición se establece en la parte superior, el icono no se mostrará
- La lista en tabBar es una matriz, y solo se pueden configurar un mínimo de 2 y un máximo de 5 pestañas, y las pestañas se ordenan en el orden de la matriz.
Descripción de propiedad:
| Atributos | tipo | requerido | valores predeterminados | describir | Explicación de las diferencias de plataforma |
|---|---|---|---|---|---|
| color | Color hexadecimal | Sí | El color predeterminado del texto en la pestaña. | ||
| color seleccionado | Color hexadecimal | Sí | El color del texto en la pestaña cuando se selecciona | ||
| color de fondo | Color hexadecimal | Sí | color de fondo de la pestaña | ||
| estilo de borde | Cadena | No | negro | El color del borde superior de la barra de pestañas, solo se admite blanco y negro | La aplicación 2.3.4+ admite otros valores de color |
| lista | Formación | Sí | La lista de pestañas, consulte la descripción del atributo de lista para obtener detalles, al menos 2 y como máximo 5 pestañas | ||
| posición | Cadena | No | abajo | Valores opcionales abajo, arriba | El valor superior solo es compatible con los applets de WeChat |
Entre ellos, la lista recibe una matriz, cada elemento de la matriz es un objeto y los valores de sus atributos son los siguientes:
| Atributos | tipo | requerido | ilustrar |
|---|---|---|---|
| páginaRuta | Cadena | Sí | Ruta de la página, debe definirse primero en las páginas |
| texto | Cadena | Sí | Texto del botón en la pestaña, opcional en plataformas 5+APP y H5. Por ejemplo, se puede colocar un ícono + sin texto en el medio |
| iconoRuta | Cadena | No | Ruta de la imagen, el tamaño del ícono está limitado a 40 kb, el tamaño recomendado es 81 px * 81 px, cuando la posición es superior, este parámetro no es válido, no admite imágenes de red, no admite íconos de fuente |
| seleccionadoIconPath | Cadena | No | La ruta de la imagen cuando se selecciona, el tamaño del ícono está limitado a 40kb, el tamaño recomendado es 81px * 81px, cuando la posición es superior, este parámetro no es válido |
Código de caso:
"tabBar": {
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}
configuración del modo de inicio de condición
La configuración del modo de inicio tiene efecto solo durante el período de desarrollo y se utiliza para simular el escenario de acceso directo a la página, como: después de que se reenvía el subprograma, el usuario hace clic en la página abierta.
Descripción de propiedad:
| Atributos | tipo | ¿Es obligatorio? | describir |
|---|---|---|---|
| actual | Número | Sí | El modo actualmente activo, el valor de índice del nodo de lista |
| lista | Formación | Sí | Lista de modos de arranque |
descripción de la lista:
| Atributos | tipo | ¿Es obligatorio? | describir |
|---|---|---|---|
| nombre | Cadena | Sí | nombre del modo de arranque |
| camino | Cadena | Sí | ruta de la página de inicio |
| consulta | Cadena | No | Parámetros de inicio, que se pueden obtener en la función onLoad de la página |
Uso básico de los componentes.
uni-app proporciona componentes básicos enriquecidos para los desarrolladores. Los desarrolladores pueden combinar varios componentes para construir sus propias aplicaciones como bloques de construcción.
Los componentes de uni-app, al HTMLigual que las funciones divde , py spanotras etiquetas en , se utilizan para construir la infraestructura de la página.
Uso del componente de texto de texto
001 - propiedades del componente de texto
| Atributos | tipo | valores predeterminados | requerido | ilustrar |
|---|---|---|---|---|
| seleccionable | booleano | FALSO | No | Si el texto es opcional |
| espacio | cadena | . | No | Mostrar espacios continuos, parámetros opcionales: ensp, emsp,nbsp |
| descodificar | booleano | FALSO | No | Ya sea para decodificar |
textLos componentes son equivalentes a las etiquetas en línea, que se muestran en la misma línea- Los nodos que no sean de texto no se pueden presionar prolongadamente para seleccionar
002 - Ejemplos de código
<view>
<!-- 长按文本是否可选 -->
<text selectable='true'>来了老弟</text>
</view>
<view>
<!-- 显示连续空格的方式 -->
<view>
<text space='ensp'>来了 老弟</text>
</view>
<view>
<text space='emsp'>来了 老弟</text>
</view>
<view>
<text space='nbsp'>来了 老弟</text>
</view>
</view>
<view>
<text>skyblue</text>
</view>
<view>
<!-- 是否解码 -->
<text decode='true'> < > & '    </text>
</view>
Uso del componente de contenedor de vista de vista
Ver contenedor de vista, similar a div en HTML
001 - Propiedades del componente
[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-UZcbySfw-1644290214509)(./images/2view.png)]
002 - Ejemplos de código
<view class="box2" hover-class="box2_active">
<view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
</view>
</view>
Uso del componente botón botón
001 - Propiedades del componente
| Nombre del Atributo | tipo | valores predeterminados | ilustrar |
|---|---|---|---|
| tamaño | Cadena | por defecto | tamaño del botón |
| tipo | Cadena | por defecto | El tipo de estilo del botón. |
| plano | booleano | FALSO | Si el botón está ahuecado y el color de fondo es transparente |
| desactivado | booleano | FALSO | botón |
| cargando | booleano | FALSO | Si el nombre tiene un icono de carga t |
buttonEl componente ocupa una línea de forma predeterminada.sizeCuandominise pueden mostrar varios componentes en una línea.
002 - código de caso
<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>
El uso de componentes de imagen.
imagen
imagen.
| Nombre del Atributo | tipo | valores predeterminados | ilustrar | Explicación de las diferencias de plataforma |
|---|---|---|---|---|
| origen | Cadena | Dirección de recurso de imagen | ||
| modo | Cadena | 'scaleToFill' | Modos de zoom y recorte de imagen |
Consejos
<image>El ancho predeterminado del componente es 300 px y la altura es 225 px;srcSolo admite ruta relativa, ruta absoluta, admite código base64;- Si la estructura de la página es compleja y hay demasiados estilos css, el uso de la imagen puede hacer que el estilo surta efecto lentamente y habrá una situación de "parpadeo".
image{will-change: transform}Este problema se puede optimizar configurándolo en este momento.
Estilos en uni-app
-
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
-
使用
@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束 -
支持基本常用的选择器class、id、element等
-
在
uni-app中不能使用*选择器。 -
page相当于body节点 -
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
-
uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：-
字体文件小于 40kb，
uni-app会自动将其转化为 base64 格式； -
字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
-
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
@font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }
-
-
如何使用scss或者less
uni-app中的数据绑定
在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可
export default {
data () {
return {
msg: 'hello-uni'
}
}
}
插值表达式的使用
-
利用插值表达式渲染基本数据
<view>{ {msg}}</view> -
在插值表达式中使用三元运算
<view>{ { flag ? '我是真的':'我是假的' }}</view> -
基本运算
<view>{ {1+1}}</view>
v-bind动态绑定属性
在data中定义了一张图片，我们希望把这张图片渲染到页面上
export default {
data () {
return {
img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
}
}
}
利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成:
<image :src="img"></image>
v-for的使用
data中定以一个数组，最终将数组渲染到页面上
data () {
return {
arr: [
{
name: '刘能', age: 29 },
{
name: '赵四', age: 39 },
{
name: '宋小宝', age: 49 },
{
name: '小沈阳', age: 59 }
]
}
}
利用v-for进行循环
<view v-for="(item,i) in arr" :key="i">名字：{
{
item.name}}---年龄：{
{
item.age}}</view>
uni中的事件
事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
<button @click="tapHandle">点我啊</button>
事件函数定义在methods中
methods: {
tapHandle () {
console.log('真的点我了')
}
}
事件传参
-
默认如果没有传递参数，事件函数第一个形参为事件对象
// template <button @click="tapHandle">点我啊</button> // script methods: { tapHandle (e) { console.log(e) } } -
如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
// template <button @click="tapHandle(1)">点我啊</button> // script methods: { tapHandle (num) { console.log(num) } } -
如果获取事件对象也想传递参数
// template <button @click="tapHandle(1,$event)">点我啊</button> // script methods: { tapHandle (num,e) { console.log(num,e) } }
uni的生命周期
应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
页面的生命周期
uni-app 支持如下页面生命周期函数：
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | ||
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成。 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 |
下拉刷新
开启下拉刷新
在uni-app中有两种方式开启下拉刷新
- 需要在
pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh - 通过调用uni.startPullDownRefresh方法来开启下拉刷新
通过配置文件开启
创建list页面进行演示
<template>
<view>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
}
}
</script>
<style>
</style>
通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
{
"path":"pages/list/list",
"style":{
"enablePullDownRefresh": true
}
}
通过API开启
uni.startPullDownRefresh()
监听下拉刷新
通过onPullDownRefresh可以监听到下拉刷新的动作
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log('触发下拉刷新了')
}
}
关闭下拉刷新
uni.stopPullDownRefresh()
停止当前页面下拉刷新。
案例演示
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>
上拉加载
通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px
通过onReachBottom监听到触底的行为
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{
item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>
<style>
view{
height: 100px;
line-height: 100px;
}
</style>
网络请求
在uni中可以调用uni.request方法进行请求网络请求
需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。
发送get请求
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>
发送post请求
数据缓存
uni.setStorage
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
代码演示
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
代码演示
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>
<style>
</style>
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
代码演示
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
uni.removeStorage
从本地缓存中异步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>
uni.removeStorageSync
从本地缓存中同步移除指定 key。
代码演示
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
上传图片、预览图片
上传图片
uni.chooseImage方法从本地相册选择图片或使用相机拍照。
案例代码
<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>
预览图片
结构
<view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
预览图片的方法
previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
条件注释实现跨段兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。
平台标识
| 值 | 平台 | 参考文档 |
|---|---|---|
| APP-PLUS | 5+App | HTML5+ 规范 |
| H5 | H5 | |
| MP-WEIXIN | 微信小程序 | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |
| MP-BAIDU | 百度小程序 | 百度小程序 |
| MP-TOUTIAO | 头条小程序 | 头条小程序 |
| MP-QQ | QQ小程序 | （目前仅cli版支持） |
| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 |
组件的条件注释
代码演示
<!-- #ifdef H5 -->
<view>
h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
app会显示
</view>
<!-- #endif -->
api的条件注释
代码演示
onLoad () {
//#ifdef MP-WEIXIN
console.log('微信小程序')
//#endif
//#ifdef H5
console.log('h5页面')
//#endif
}
样式的条件注释
代码演示
/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
uni中的导航跳转
利用navigator进行跳转
navigator详细文档：文档地址
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
跳转到tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
利用编程式导航进行跳转
导航跳转文档
利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<button type="primary" @click="goAbout">跳转到关于页面</button>
通过navigateTo方法进行跳转到普通页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
通过switchTab跳转到tabbar页面
跳转到tabbar页面
<button type="primary" @click="goMessage">跳转到message页面</button>
通过switchTab方法进行跳转
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
redirectTo进行跳转
关闭当前页面，跳转到应用内的某个页面。
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
通过onUnload测试当前组件确实卸载
onUnload () {
console.log('组件卸载了')
}
导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
接收参数的页面
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
uni-app中组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
-
创建login组件，在component中创建login目录，然后新建login.vue文件
<template> <view> 这是一个自定义组件 </view> </template> <script> </script> <style> </style> -
在其他组件中导入该组件并注册
import login from "@/components/test/test.vue" -
注册组件
components: { test} -
使用组件
<test></test>
组件的生命周期函数
| beforeCreate | 在实例初始化之后被调用。详见 | ||
|---|---|---|---|
| created | 在实例创建完成后被立即调用。详见 | ||
| beforeMount | 在挂载开始之前被调用。详见 | ||
| mounted | 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 |
||
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 | 仅H5平台支持 | |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 | 仅H5平台支持 | |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。详见 | ||
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 |
组件的通讯
父组件给子组件传值
通过props来接受外界传递到组件内部的值
<template>
<view>
这是一个自定义组件 {
{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
其他组件在使用login组件的时候传递值
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
子组件给父组件传值
通过$emit触发事件进行传递参数
<template>
<view>
这是一个自定义组件 {
{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
父组件定义自定义事件并接收参数
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {
test}
}
</script>
兄弟组件通讯
uni-ui的使用
1、进入Grid宫格组件
2、使用HBuilderX导入该组件
3、导入该组件
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
4、注册组件
components: {uniGrid,uniGridItem}
5、使用组件
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>