prefacio
¿Qué es la herramienta de gestión de desarrollo en la nube de WeChat?
Proporciona un conjunto de herramientas de administración en segundo plano para el desarrollo en la nube y herramientas de desarrollo de código bajo. Los desarrolladores pueden conectarse a bases de datos comerciales basadas en herramientas de código bajo, arrastrar y soltar componentes para generar interfaces de usuario front-end y personalizar varias aplicaciones de administración.
Algunos estudiantes aquí definitivamente preguntarán cuál es la diferencia entre él y el CMS de administración de contenido de desarrollo en la nube .
Puede entenderse como una gestión de contenido más flexible y personalizable, que es más fácil y flexible de usar cuando se combina con la microconstrucción.
Si no conoce la microconstrucción, puede leer el tutorial de microconstrucción de la plataforma de código bajo que escribí antes.
experimentar
En la actualidad, la herramienta de administración de desarrollo en la nube de WeChat aún se encuentra en pruebas internas. Si necesita solicitar permisos de prueba internos, haga clic aquí para solicitar la entrada
Abre la página de inicio
Cuando abrimos con éxito los permisos
- Descargue/actualice la última versión de las herramientas para desarrolladores de WeChat
- Ingrese a la consola IDE de desarrollo en la nube
3. Seleccione "Herramientas de administración" en "Más"
4. Después de abrir, se le preguntará si desea abrir el indicador de complemento de código bajo de microconstrucción, seleccione "Permitir"
experiencia de plantilla
A partir de este paso, ha ingresado oficialmente a la herramienta de administración. Lo primero que puede ver es la página de la plantilla. Actualmente, se han incorporado plantillas de uso común. Debe hacer clic en "Ver/Instalar herramientas" para la plantilla.
"Esto me hace sentir que esto es como un mercado de aplicaciones en un sistema de teléfono móvil. Puedes instalar lo que necesites. Siempre que haya suficientes plantillas, los desarrolladores pueden mejorar mucho la eficiencia y los costos de desarrollo pueden mejorar considerablemente". Si este mercado de plantillas puede ayudar a los desarrolladores a acceder y lanzar, de manera similar a cómo los desarrolladores de aplicaciones pueden publicar libremente el mercado de aplicaciones y también pueden hacer plantillas pagas, entonces todavía hay mucho espacio para la imaginación.
Primero elijo una imagen de carrusel para administrar y probar el efecto.
Consejo: la primera carga será lenta, debe esperar pacientemente
Después de que la instalación sea exitosa, puede obtener la dirección de fondo de administración y la contraseña de la cuenta de administrador
Copie el enlace e ingrese la contraseña de la cuenta para ingresar a la administración en segundo plano
Hay un banner simple en el fondo de gestión. Los menús de datos de casos de fondo de gestión
son: gestión de imágenes de carrusel, gestión de imágenes de carrusel
Si necesita personalizar el carrusel, debe cargar imágenes ahora en la administración de imágenes
Luego vaya a la administración de mapas de carrusel para agregar
Entonces, ¿cómo obtiene el applet los datos? Podemos volver a la consola IDE de desarrollo en la nube y ver que hay una tabla adicional cloudbase-sample-banner en la base de datos, que contiene tres datos
Applet para obtener el código de datos
wx.cloud
.database()
.collection("cloudbase-sample-banner")
.where({
status: "online",
})
.get({
success: (res) => {
this.setData({
banner: res.data,
});
},
});
Copiar
editar plantilla
Entonces, ¿qué pasa si la plantilla de imagen de carrusel no puede satisfacer nuestras necesidades?
Por ejemplo: se debe hacer clic en el mapa del carrusel para saltar y mostrar los artículos de la cuenta oficial. En este momento, se debe agregar el campo de ruta del artículo.
Según los requisitos anteriores, modifiquemos. Primero, regrese a la página de inicio de la herramienta de gestión
Haga clic en la plantilla de imagen del carrusel para ver los detalles y seleccione la "Herramienta de edición" en la parte inferior
Aquí puede realizar "diseño de página" en la página de administración
La visualización de datos en todas las páginas es, por supuesto, inseparable de los datos. El segundo menú es "Fuente de datos".
Los dos menús restantes son: material y configuración de la aplicación Estos dos menús son relativamente simples y no se presentarán demasiado.
Para agregar un nuevo campo, debe buscar "Agregar carrusel" en "Fuente de datos" y hacer clic en "Editar"
Agregue un parámetro de entrada, el parámetro de ruta representa la ruta del artículo (la operación de editar información de carrusel es similar)
Luego modifique el código y agregue la ruta del atributo al lugar donde se obtienen y agregan los parámetros
Finalmente, haga clic en "Prueba de método" para agregar un dato para ver el efecto
Puede ver que los datos se agregaron correctamente a través de la página de administración en segundo plano o la base de datos IDE de desarrollo en la nube
El método de adición se ha transformado, y el siguiente paso es modificar el método de consulta, seleccionar "Lista de carrusel de consulta" y luego agregar un subconjunto en "Parámetros de salida". Debido a que los datos de consulta son múltiples, es una matriz, y lo que desea consultar y mostrar es el objeto de datos en el interior. (La operación de consultar la información del mapa del carrusel es similar, la diferencia es agregar parámetros en lugar de subconjuntos)
Qué campo se agrega es qué tipo de campo se muestra
¡La parte de la fuente de datos está lista!
El siguiente paso es modificar la página de administración de fondo "Agregar" y "Consulta", cambiar al menú "Diseño de página" y
hacer clic en "Agregar carrusel" para ver su estructura de diseño Un contenedor de formulario contiene muchos componentes
Se debe ingresar la ruta de nuestro artículo, por lo que podemos arrastrar un componente de entrada de una sola línea desde la parte superior hasta el diseño.
Luego modifique el título de visualización y los campos de enlace.
Cuando terminemos de editar, podemos hacer clic en "Vista previa" en la esquina superior derecha y luego hacer clic en "Vista previa en vivo"
De esta manera, se puede abrir una ventana separada para la prueba funcional.Después de completar la adición y la modificación, modificaremos la "Visualización de lista", seleccionaremos el componente "Tabla de datos" y agregaremos la ruta en "Gestión de columnas"
Efecto de visualización de lista
Una vez completada la modificación, debe hacer clic en "Publicar" en la esquina superior derecha para sincronizar el fondo de la versión en línea.
plantilla personalizada
Otra situación es que la plantilla actual no puede satisfacer las necesidades comerciales. Por ejemplo, la siguiente plantilla de "administración de bases de datos en la nube" solo puede mostrar json para fines generales, y la consulta no puede ser confusa, por lo que debe personalizarse en este momento.
A continuación, haremos que se muestre una lista de actividades por nosotros mismos, y luego haremos una consulta difusa.Se puede decir que este requisito es la operación más utilizada.
datos de acceso
Agregamos una página de lista de actividad de consulta basada en la plantilla "Administración de base de datos en la nube", primero cambie a "Fuente de datos" y haga clic en el signo + para seleccionar "Código personalizado"
Ingrese un nombre e ID y haga clic en Crear
añadir método
Código de consulta; se pueden encontrar otras operaciones en la documentación del SDK del nodo de la base de la nube
const cloudbase = require("@cloudbase/node-sdk");
const envId = "<云开发环境ID>";
const collectionName = "<云数据库集合名>";
const app = cloudbase.init({
env: envId,
});
const db = app.database();
module.exports = async (event, context) => {
let { pageNo, pageSize } = event;
if (pageNo < 1) pageNo = 1;
// 查询条件先固定为空，即查询集合内的所有数据
const query = db.collection(collectionName).where({});
const recordsRes = await query
.skip((pageNo - 1) * pageSize)
.limit(pageSize)
.get();
const totalRes = await query.count();
return {
records: recordsRes.data,
total: totalRes.total,
};
};
Copiar
Configuración de parámetros de entrada: tamaño de página, número de página
Configuración de parámetros de salida: use "prueba de método" para ejecutar la prueba y luego use la asignación de parámetros de salida
Visualización de datos
Cambie a "Diseño de página" y haga clic en el signo + en la esquina superior derecha
Arrastre y suelte un componente de la tabla de datos en el diseño
Establecer la fuente de datos de la tabla de datos
Se muestran los datos de la lista, pero encontraremos que el campo de tiempo se repite y el encabezado es el nombre del campo, que es posible que los usuarios no puedan entender.
Podemos eliminar campos innecesarios en la gestión de columnas de atributos.
También puede modificar el título del atributo, el efecto es el siguiente:
sugerencia
1. Las plantillas deben ser más ricas para cumplir con más escenarios de desarrolladores.
2. El pensamiento empresarial de plantillas independientes no es lo suficientemente completo, demasiado simple para ser directo.
3. Las operaciones de plantillas personalizadas son demasiado complicadas y deben simplificarse, como: automáticamente generar códigos básicos de adiciones, eliminaciones, consultas y modificaciones
Tutoriales relacionados
Tutorial oficial de la herramienta de administración de desarrollo en la nube
Desarrollo en la nube Node.js SDK API
Lista de componentes de microconstrucción