Tabla de contenido
1. uni.setStorageSync o uni.getStorageSync
2. uni.setStorage y uni.getStorage
Ejemplo, uni.addInterceptor(CADENA, OBJETO)
6. Servidor en la nube (Dcloud)
| caché de datos | pedido |
| embalaje en la nube | ciclo vital |
| función de nube | Servidor en la nube (Dcloud) |
Prefacio:
uni-app es la primera opción para el desarrollo de programas pequeños. Tomé este curso este semestre, así que compartiré algunos contenidos de uni-app con ustedes.
uni-app es un marco de desarrollo basado en Vue.js, que se puede utilizar para crear rápidamente aplicaciones multiplataforma, incluidas múltiples plataformas como iOS, Android, H5 y applets.
1. Caché de datos
El caché de datos de uni-app se refiere al almacenamiento local de datos, de modo que los datos se pueden obtener directamente del local en la próxima visita, lo que mejora el rendimiento y la experiencia del usuario del programa. uni-app proporciona dos métodos de almacenamiento en caché de datos:
1. uni.setStorageSync o uni.getStorageSync
Los datos se pueden almacenar en localStorage a través de uni.setStorageSync y los datos se pueden leer desde localStorage a través de uni.getStorageSync.
Ejemplo:
// 存储数据
uni.setStorageSync('name', '张三');
// 读取数据
var name = uni.getStorageSync('name');
2. uni.setStorage y uni.getStorage
Los datos se pueden almacenar en el almacenamiento a través de uni.setStorage y los datos se pueden leer desde el almacenamiento a través de uni.getStorage.
Ejemplo:
// 存储数据
uni.setStorage({
key: 'age',
data: 20,
success: function () {
console.log('存储成功')
}
})
// 读取数据
uni.getStorage({
key: 'age',
success: function (res) {
console.log('读取成功', res.data)
}
})
Cabe señalar que el almacenamiento y la lectura del almacenamiento son asincrónicos, y el resultado debe obtenerse a través de la devolución de llamada exitosa. Además, tanto localStorage como el almacenamiento tienen ciertas limitaciones de capacidad de almacenamiento, que deben seleccionarse de acuerdo con la situación real.
二、uni.addInterceptor(STRING, OBJECT)
uni.addInterceptor(STRING, OBJECT) es una API UniApp. Esta función puede agregar un interceptor al interceptor global (interceptor). Acepta dos parámetros: string STRING y object OBJECT.
Entre ellos, STRING es la regla de coincidencia de la URL de la solicitud HTTP a interceptar, que se puede representar mediante una cadena o una expresión regular. Por ejemplo, puede usar la cadena "/api/*" para indicar que se interceptan todas las solicitudes de URL que comienzan con "/api/" o usar la expresión regular /\/api.*/ para indicar que se interceptan todas las solicitudes de URL que comienzan con "/api".
Y OBJECT es un objeto interceptor, que contiene una serie de métodos interceptores, como request, response etc. Estos métodos se llamarán automáticamente cuando se produzcan eventos, como antes de que se inicie la solicitud HTTP, cuando llegue la respuesta, etc., para realizar la intercepción y el procesamiento de la solicitud HTTP. Es posible modificar la solicitud o agregar algún procesamiento adicional en el interceptor antes de enviar la solicitud al servidor. Cuando el servidor devuelve una respuesta, el interceptor procesará la respuesta antes de que se apliquen los datos de respuesta.
A través de este método, podemos interceptar y procesar globalmente todas las solicitudes HTTP al realizar el desarrollo front-end, para lograr un procesamiento unificado de las solicitudes, simplificar el proceso de desarrollo y mejorar la calidad del código.
3. Función de nube
La función de nube de Uni-app es una solución de desarrollo de back-end con menos arquitectura de servidor que se ejecuta en la nube. Con la ayuda de uniCloud, puede realizar un proceso de desarrollo rápido, seguro, eficiente y elástico.
Las características principales de las funciones en la nube de Uni-app incluyen:
1. Admite el entorno operativo principal de Node.js, integra muchos paquetes npm y escribe y depura fácilmente el código back-end de JavaScript;
2. Las funciones en la nube se pueden crear e implementar rápidamente, y varios escenarios de aplicaciones, como interfaces API, tareas de sincronización y almacenamiento de datos, se pueden realizar a través de funciones en la nube;
3. Puede realizar la integración perfecta con el proyecto front-end Uni-app, llamar directamente a la interfaz de función de la nube, obtener el valor de retorno y mejorar la eficiencia del desarrollo;
4. Integra una variedad de medidas de seguridad, como anti-leeching, ataques anti-DDos, etc., para garantizar la seguridad de los datos y la confiabilidad del servicio de las funciones de la nube;
5. Puede elegir de manera flexible la ubicación geográfica, el entorno de red y los recursos informáticos para satisfacer las diferentes necesidades comerciales.
En general, la función en la nube de Uni-app es una solución en la nube adecuada para que los desarrolladores construyan rápidamente servicios de back-end eficientes, que pueden ayudar a los desarrolladores a completar el desarrollo y la implementación de la lógica comercial en un corto período de tiempo, mejorando la eficiencia y la seguridad del desarrollo.
Cuatro, solicitud
uni.request de uni-app es una interfaz API que se puede utilizar para enviar solicitudes HTTP. Utiliza objetos Promise para devolver resultados, admite el estilo de programación asíncrono basado en Promise y proporciona algunas opciones de configuración ricas y funciones de devolución de llamada.
uni.request admite el envío de diferentes tipos de solicitudes, como GET, POST, PUT, DELETE, etc. También admite la carga y descarga de archivos y la configuración de la información del encabezado de la solicitud. Al mismo tiempo, también admite la interceptación y cancelación de solicitudes de red y permite a los desarrolladores establecer tiempos de espera de solicitudes.
Además, uni.request también admite la visualización de animaciones de carga durante el proceso de solicitud y muestra mensajes de error cuando la solicitud falla. Es muy adecuado para las llamadas a la API web y las operaciones de interacción de datos en una sola aplicación.
Ejemplo:
uni.request({
url: 'https://api.example.com/users',
method: 'GET',
data: {
page: 1,
limit: 10
},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
console.log(res.data);
},
fail: function (err) {
console.error(err);
}
});En el ejemplo anterior, uni.requestel método recibe un objeto de configuración como parámetro, incluidas las siguientes opciones:
url: La dirección URL solicitada.method: El método de la solicitud, comoGET, ,POSTetc., el valor predeterminado esGET.data: Los datos a enviarGETse convertirán en una cadena de consulta en la solicitud.header: La información de encabezado solicitada.success: La función de devolución de llamada cuando la solicitud es exitosa, recibiendo los datos de respuesta como un parámetro.fail: La función de devolución de llamada cuando falla la solicitud, recibiendo el mensaje de error como parámetro.
Modifique la dirección URL, el método de solicitud, los datos de solicitud, el encabezado de solicitud, etc. en los ejemplos anteriores para satisfacer sus necesidades reales.
Cabe señalar que uni.requestel método es asíncrono, por lo que debe successmanejar los datos de respuesta en la función de devolución de llamada o failmanejar el error de solicitud en la función de devolución de llamada.
Además uni.request, uni-app también proporciona otros métodos de solicitud de red, como uni.uploadFilela carga y uni.downloadFiledescarga de archivos. Puede elegir un método adecuado para realizar solicitudes de red según sus necesidades.
5. Ciclo de vida
uni-app es un marco de desarrollo de aplicaciones multiplataforma basado en Vue.js, que se puede usar para desarrollar aplicaciones simultáneamente para múltiples plataformas como iOS, Android, H5 y applets. El ciclo de vida de uni-app es similar al de Vue.js, pero también tiene algunas funciones de enlace de ciclo de vida específicas. El siguiente es el ciclo de vida principal de uni-app:
1. `beforeCreate` (beforeCreate): después de inicializar la instancia, se llama antes de la observación de datos y la configuración de eventos.
export default {
beforeCreate() {
// 执行一些初始化逻辑操作
console.log('beforeCreate hook executed');
},
data() {
return {
message: 'Hello, world!'
};
},
methods: {
greet() {
console.log(this.message);
}
},
mounted() {
// 在mounted钩子函数中调用greet方法
this.greet();
}
};2. `created` (creado): La instancia se ha creado, la observación de datos y la configuración de eventos se han completado, pero aún no se han montado en el DOM.
export default {
created() {
// 执行一些初始化逻辑操作
console.log('created hook executed');
// 发起异步请求
fetchData().then(data => {
// 对获取到的数据进行操作
console.log(data);
});
},
data() {
return {
message: 'Hello, world!'
};
},
methods: {
greet() {
console.log(this.message);
}
},
mounted() {
// 在mounted钩子函数中调用greet方法
this.greet();
}
};3. `beforeMount` (beforeMount): Llamado antes de que se monte la instancia.
export default {
beforeMount() {
// 执行一些操作
console.log('beforeMount hook executed');
// 更新组件的数据
this.message = 'Hello, uni-app!';
},
data() {
return {
message: 'Hello, world!'
};
},
methods: {
greet() {
console.log(this.message);
}
},
mounted() {
// 在mounted钩子函数中调用greet方法
this.greet();
}
};4. `mounted` (montado): La instancia ha sido montada en el DOM, en este momento, puede acceder a los elementos DOM del componente.
export default {
mounted() {
// 操作组件的DOM
const element = this.$refs.myElement;
element.innerText = 'Hello, uni-app!';
// 发起异步请求
fetchData().then(data => {
// 对获取到的数据进行操作
console.log(data);
});
// 注册事件监听器
this.$refs.myElement.addEventListener('click', this.handleClick);
},
data() {
return {
message: 'Hello, world!'
};
},
methods: {
greet() {
console.log(this.message);
},
handleClick() {
console.log('Element clicked!');
}
}
};5. `beforeUpdate` (beforeUpdate): se llama antes de que se actualicen los datos, antes de que el DOM virtual se vuelva a renderizar y parchear.
export default {
data() {
return {
message: 'Hello, world!',
count: 0
};
},
beforeUpdate() {
// 执行一些操作
console.log('beforeUpdate hook executed');
// 访问更新前的数据
console.log('Count before update:', this.count);
},
methods: {
increment() {
this.count++;
}
}
};6. `updated` (actualizado): se llama después de que se actualizan los datos, después de que el DOM virtual se vuelve a renderizar y parchear.
export default {
updated() {
// 操作更新后的DOM
const element = this.$refs.myElement;
element.innerText = 'Hello, updated uni-app!';
// 做一些额外的数据处理
if (this.count >= 10) {
console.log('Count is greater than or equal to 10!');
}
// 发起异步请求
fetchData().then(data => {
// 对获取到的数据进行操作
console.log(data);
});
},
data() {
return {
message: 'Hello, world!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};7. `beforeDestroy` (beforeDestroy): Llamado antes de que se destruya la instancia. En este momento, la instancia todavía está completamente disponible.
export default {
beforeDestroy() {
// 清理定时器
clearInterval(this.timer);
// 移除事件监听器
this.$refs.myElement.removeEventListener('click', this.handleClick);
// 执行清理逻辑
cleanup();
},
mounted() {
// 创建定时器
this.timer = setInterval(() => {
console.log('Timer tick');
}, 1000);
// 注册事件监听器
this.$refs.myElement.addEventListener('click', this.handleClick);
},
methods: {
handleClick() {
console.log('Element clicked!');
},
cleanup() {
console.log('Cleaning up...');
}
}
};8. `destroyed` (destruido): se llama después de que se destruye la instancia. En este momento, el componente se ha destruido y los detectores de datos y eventos se han eliminado.
export default {
destroyed() {
// 清除资源
releaseResources();
// 发送销毁通知
this.$emit('component-destroyed');
},
mounted() {
// 做一些初始化操作
initialize();
}
};Además de las funciones de enlace de ciclo de vida comunes mencionadas anteriormente, uni-app también proporciona algunas funciones de enlace de ciclo de vida específicas de la plataforma:
- `onLaunch` (applet): Se activa cuando se inicializa la aplicación.
- `onShow` (applet): se activa cuando la aplicación se inicia o entra en primer plano desde el fondo.
- `onHide` (applet): se activa cuando la aplicación entra en segundo plano desde el primer plano.
- `onError` (applet): Se activa cuando ocurre un error en la aplicación.
- `onPageNotFound` (applet): Se activa cuando no se encuentra la página.
Estas funciones de enlace del ciclo de vida permiten a los desarrolladores ejecutar una lógica de código específica en diferentes etapas de la aplicación para lograr las funciones y operaciones correspondientes. Para conocer los métodos de uso detallados y las precauciones de las funciones de enlace del ciclo de vida, consulte la documentación oficial de uni-app.
6. Servidor en la nube (Dcloud)
6.1 Introducción a Dcloud
DCloud es una empresa que proporciona un marco de desarrollo multiplataforma de una aplicación y servicios en la nube, no un proveedor de servidor en la nube específico. DCloud proporciona un servicio de empaquetado en la nube basado en la herramienta de desarrollo HBuilderX. Los desarrolladores pueden usar este servicio para empaquetar rápidamente aplicaciones uni-app en programas pequeños, Apps y H5, y publicarlos en varias plataformas.
Cuando los desarrolladores utilicen el servicio de empaquetado en la nube de DCloud, DCloud proporcionará un entorno de construcción basado en la nube y recursos para empaquetar aplicaciones uni-app escritas por desarrolladores en archivos ejecutables o páginas web en varias plataformas. Los desarrolladores no necesitan configurar el entorno del servidor ellos mismos, solo necesitan cargar el código de la aplicación y configurar las opciones relacionadas, y DCloud lo compilará y empaquetará automáticamente.
Cabe señalar que el servicio en la nube DCloud está dirigido a desarrolladores de aplicaciones únicas para simplificar el proceso de publicación y empaquetado de aplicaciones, y proporciona algunas funciones y servicios adicionales, como actualizaciones automáticas, funciones en la nube y bases de datos en la nube, etc., para satisfacer las necesidades de los desarrolladores.
Sin embargo, si necesita crear su propio servidor en la nube para alojar la aplicación uni-app, puede elegir otros proveedores de servidores en la nube comunes (como Alibaba Cloud, Tencent Cloud, AWS, etc.) o implementarlo a través de su propio servidor. Estos proveedores de servidores en la nube pueden cumplir con los requisitos operativos básicos de las aplicaciones uni-app y proporcionar un cierto grado de flexibilidad y escalabilidad.
6.2 Servidor en la nube
Para servidores en la nube para aplicaciones uni-app, puede implementarlos en varios proveedores de servicios en la nube o en sus propios servidores privados. Aquí hay algunas opciones comunes de servidor en la nube:
1. Proveedores de servicios en la nube (Proveedores de servicios en la nube): como Alibaba Cloud, Tencent Cloud, AWS (Amazon Cloud Services), Google Cloud, etc. , que brindan varios servicios y recursos de computación en la nube, incluidas máquinas virtuales, contenedores, almacenamiento de objetos, bases de datos, etc. Puede elegir una instancia de servidor en la nube que se adapte a las necesidades de su aplicación y presupuesto para la implementación. Generalmente usa Alibaba Cloud y Tencent Cloud
2. Servicios de contenedores ligeros: como Docker, Kubernetes, etc., que brindan soluciones para la implementación y administración de aplicaciones en contenedores. El uso de servicios de contenedores puede lograr métodos de implementación más flexibles y eficientes, y se puede implementar en múltiples plataformas en la nube.
3. Servidores privados: si tiene sus propios recursos de servidor, puede optar por implementar la aplicación uni-app en su propio servidor. Puede usar tecnología de virtualización como KVM, VMware, etc. para crear una instancia de máquina virtual y configurar un entorno de servidor web en ella para alojar la aplicación uni-app.
Al elegir un servidor en la nube, debe tener en cuenta los siguientes factores:
- - Escalabilidad: asegúrese de que el proveedor del servidor en la nube pueda expandirse de manera elástica según las necesidades de la aplicación para adaptarse al crecimiento del tráfico u otros cambios.
- - Rendimiento: seleccione una instancia de servidor con buen rendimiento para garantizar la capacidad de respuesta de la aplicación y la experiencia del usuario.
- - Disponibilidad: elija un servidor en la nube que ofrezca alta disponibilidad para garantizar que sus aplicaciones continúen ejecutándose en caso de fallas o eventos inesperados.
- - Rentabilidad: evalúe las estructuras de precios y tarifas de las diferentes opciones de servidores en la nube y elija la que se ajuste a su presupuesto.
Además, al implementar la aplicación uni-app, también debe establecer el nombre de dominio y configurar el certificado SSL para lograr el acceso HTTPS para garantizar la seguridad del servidor y la protección de la transmisión de datos.
Debe elegir una solución de servidor en la nube adecuada en función de sus necesidades y presupuesto específicos. Durante el proceso de implementación, garantice la configuración y la administración de acuerdo con la documentación relevante y las mejores prácticas, y la optimización regular de la seguridad y el rendimiento.
Nota : El servidor Aliyun en Dcloud se puede usar de forma gratuita, pero no se puede actualizar, y habrá una tarifa por la actualización. No se recomienda que Xiaobai se actualice, ¡lo experimenté personalmente!
7. Empaquetado en la nube
El empaquetado en la nube uni-app es un servicio en la nube proporcionado por DCloud, que se utiliza para empaquetar rápidamente aplicaciones uni-app en pequeños programas, Apps, H5 y otras formas, y publicarlas en varias plataformas.
El uso del paquete en la nube uni-app puede traer las siguientes ventajas principales:
1. Empaquetado rápido: el servicio de empaquetado en la nube proporciona un proceso y recursos de empaquetado eficientes, lo que puede acortar en gran medida el tiempo de empaquetado y ahorrar tiempo y esfuerzo a los desarrolladores.
2. Adaptación de la plataforma: el servicio de empaquetado en la nube puede adaptarse y convertirse automáticamente de acuerdo con los requisitos de la plataforma de destino para garantizar que los efectos de ejecución y visualización de la aplicación en diferentes plataformas sean consistentes.
3. Publicación con un solo clic: el servicio de empaquetado en la nube proporciona una función de publicación con un solo clic, lo que permite a los desarrolladores publicar fácilmente aplicaciones en la plataforma de destino sin configuración manual ni depuración de entornos complejos.
4. Extensión de funciones: el servicio de empaquetado en la nube también proporciona algunas funciones y servicios adicionales, como actualización automática, función en la nube y base de datos en la nube, etc., para que los desarrolladores puedan crear y administrar aplicaciones de manera más conveniente.
El proceso básico para usar el paquete en la nube uni-app es el siguiente:
1. Inicie sesión en el sitio web oficial de DCloud e ingrese a la página del servicio de empaquetado en la nube uni-app.
2. Cree una nueva tarea de empaquetado, seleccione la plataforma de destino y configure las opciones relacionadas.
3. Cargue los archivos de código y recursos de la aplicación uni-app.
4. Configure el ícono de la aplicación, el nombre, el número de versión y otra información según sea necesario.
5. Inicie la tarea de empaquetado y espere a que se complete correctamente.
6. Una vez que se completa el paquete, puede descargar la aplicación empaquetada o publicarla directamente en cada plataforma.
Los servicios de empaquetado en la nube pueden simplificar en gran medida el proceso de empaquetado y publicación de aplicaciones uni-app, lo que permite a los desarrolladores llevar las aplicaciones al mercado de manera más rápida y eficiente sin prestar demasiada atención a las configuraciones y los detalles técnicos subyacentes.
Nota: Si el paquete en la nube implica funciones en la nube, sus cosas desaparecerán cuando caduquen las funciones en la nube y solo podrá ver el caparazón. Y el efecto de empaquetar en un subprograma de WeChat es diferente del que se muestra en una aplicación. El subprograma de WeChat puede ser compatible con todas sus funciones, pero es posible que otras plataformas no.
Resumir:
uni-app es un programa muy fácil de usar. Es muy fácil de usar. Recomiendo encarecidamente que todos aprendan a usarlo, y ahora que los programas pequeños son la corriente principal, nadie debería perder su base en esta área. Espero que mi artículo sea útil para todos, para que sus estudios y carreras puedan desarrollarse sin problemas.
fin