Tabla de contenido
Ventajas del desarrollo en la nube
- Evite el complicado proceso de desarrollo del servidor
- Puede confiar en la potente biblioteca de API del equipo de WeChat
- Conveniente para la gestión de datos de usuario
- Propicio para un desarrollo rápido, bajo precio para programas de tráfico reducido o incluso gratis
Herramientas y preparativos para el desarrollo en la nube
Registre las
herramientas de desarrollo del programa Mini WeChat : Descargue la URL de las herramientas del desarrollador del programa Mini
Documento técnico: Documento oficial de desarrollo en la nube
Nota
El ID del subprograma (AppID) es la única indicación del desarrollador del programa, y solo el APPID correspondiente puede hacer que el programa se ejecute y pruebe
1. Servicio de desarrollo de nube abierta
Haga clic en el icono "Desarrollo en la nube" de WeChat Developer Tools, haga clic en "Abrir" en el cuadro emergente y, después de aceptar el acuerdo, aparecerá un cuadro de diálogo para crear un entorno. En este momento, se le pedirá que ingrese el nombre del entorno y el ID del entorno, así como la cuota del entorno básico actual para el desarrollo de la nube (la cuota básica es gratuita y suficiente para su uso).
2. Busque el ID de entorno del desarrollo en la nube.
Haga clic en el icono de configuración en la ventana de la consola de desarrollo en la nube y busque el nombre del entorno y el ID del entorno en la pestaña de la variable de entorno.
Cuando se activa el servicio de desarrollo en la nube, podemos ver el nombre de su entorno en el nombre de la carpeta cloudfunctions del código fuente del subprograma. Si el nombre de la carpeta cloudfunctions no es el nombre del entorno, sino "entorno no especificado", puede hacer clic derecho en la carpeta, seleccionar "Más configuraciones" y luego hacer clic en el pequeño icono "Configuración", seleccionar el entorno y confirmar.
3. Especifique el entorno de desarrollo en la nube del subprograma.
Abra app.js en el miniprograma de la carpeta del código fuente en las herramientas de desarrollo y busque el siguiente código:
wx.cloud.init({
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
env: 'my-env-id',
traceUser: true,
})
在 env: 'my-env-id'处改成你的环境 ID，如 env: 'xly-snoop'
4. Descarga Nodejs
NodeJS es el entorno de ejecución para ejecutar JavaScript en el servidor, y el entorno de servidor utilizado por el desarrollo en la nube es NodeJS. npm es el administrador de paquetes de Node. A través de npm, podemos instalar fácilmente los paquetes de dependencia necesarios para el desarrollo en la nube.
npm es un administrador de paquetes (módulo) indispensable para el desarrollo front-end. Su función principal es administrar paquetes de paquetes, incluida la instalación, desinstalación, actualización, visualización, búsqueda, publicación, etc. Otros lenguajes de programación también tienen administradores de paquetes similares, como pip de Python, compositor de PHP, maven de Java. Podemos pensar en el administrador de paquetes como el centro de administración de software de Windows o el centro de aplicaciones de los teléfonos móviles, pero usan una interfaz visual y el administrador de paquetes usa la línea de comandos Línea de comandos.
Enlace de descarga: enlace de descarga de Nodejs
Puede descargar e instalar el paquete de instalación de NodeJS correspondiente de acuerdo con el sistema operativo de la computadora (no modifique el directorio de instalación durante la instalación, y puede instalarlo directamente a continuación). Abra la terminal de la computadora (símbolo del sistema cmd para computadora con Windows, terminal Terminal para computadora Mac), luego escriba línea por línea y presione Entrar para ejecutar el siguiente código:
node --version
npm --version
Si muestra v10.15.0 y 6.11.3 (tal vez su número de versión sea diferente), significa que su entorno Nodejs se ha instalado correctamente.
Aprenda a programar con cuidado, no cometa errores en una letra, una palabra y un signo de puntuación. Tenga en cuenta que cuando ingresa el comando anterior, hay un espacio después del nodo y npm, y son dos guiones cortos -.
5. Implementar y cargar funciones en la nube
Hay una pequeña nube en el ícono de la carpeta cloudfuntions, que indica que este es el directorio raíz de la función en la nube. Expanda las funciones de la nube, podemos ver que hay carpetas de inicio de sesión, openapi, callback, echo, estos son los directorios de funciones de la nube. La carpeta del miniprograma contiene el archivo de página del miniprograma.
Las funciones de la nube se colocan en las funciones de la nube, mientras que el miniprograma se coloca en la página del mini programa. Esto no es estático, lo que significa que también puede modificar los nombres de estas carpetas, dependiendo de lo siguiente en el archivo de configuración del proyecto project.config.json Elementos de configuración:
"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",
Pero es mejor que mantenga la carpeta donde se coloca la página del subprograma y la carpeta donde se coloca la función de nube en una relación horizontal y ambas están en el directorio raíz del proyecto, que es fácil de administrar.
Use el botón derecho del mouse en uno de los directorios de funciones en la nube, como iniciar sesión, y seleccione abrir en el terminal desde el menú contextual. Después de abrir, ingrese el siguiente código en el terminal y presione Enter para ejecutar:
npm install
Si dice "npm no es un comando interno o externo", debe cerrar el terminal iniciado por la herramienta de desarrollo WeChat, pero volver a abrir una ventana de terminal e ingresar cd / D en su directorio de funciones en la nube para ingresar al directorio de funciones en la nube, como como cd / DC: \ download \ tcb-project \ cloudfunctions \ login ingrese el directorio de funciones en la nube de inicio de sesión y luego ejecute el comando npm install.
En este momento, se descargarán los módulos dependientes de la función de nube. Una vez completada la descarga, haga clic con el botón derecho en el directorio de la función de nube de inicio de sesión y haga clic en "Crear e implementar: todos los archivos". En este momento, la función de nube local será subido a la nube Una vez que la carga se haya realizado correctamente, inicie sesión en la función de nube El icono de directorio cambiará a una pequeña nube.
Haga clic en el icono de "desarrollo en la nube" en la barra de herramientas de las herramientas de desarrollador para abrir la consola de desarrollo en la nube, haga clic en el icono de la función en la nube en la consola de desarrollo en la nube y podrá ver nuestra función en la nube de "inicio de sesión" cargada en la lista de funciones en la nube.
Sube todas las funciones de la nube
A continuación, seguimos este proceso para implementar y cargar todas las demás funciones de la nube (como openapi), es decir, para realizar los mismos pasos que el anterior, resumidos a continuación:
Haga clic con el botón derecho en el directorio de funciones en la nube, seleccione abrir en la terminal e ingrese el comando npm install para descargar los archivos dependientes;
Luego, haga clic con el botón derecho en el directorio de funciones en la nube y haga clic en "Crear e implementar: todos los archivos"
Compruebe si la función de nube se ha implementado correctamente en la lista de funciones de nube de consola de desarrollo de nube-función de nube.
Las funciones de la nube, como inicio de sesión, openapi, echo y devolución de llamada se utilizarán más adelante. Asegúrese de implementar y cargar correctamente. De lo contrario, obtendrá un error cuando se reúna.
Obtenga acceso a la función openid y en la nube
Después de implementar y cargar con éxito el inicio de sesión de la función en la nube, podemos hacer clic para obtener openid en el simulador y el teléfono móvil (debe volver a hacer clic en el icono de vista previa y escanear el código QR).
6. Obtenga openid y llame a la función de nube
openid es el identificador único del usuario del applet, es decir, cada usuario del applet tiene un openid único. Haga clic en "haga clic para obtener openid", si "la identificación de usuario se obtuvo correctamente" y se muestra una cadena de letras + números en la página de la guía de administración de usuarios, significa que su función de inicio de sesión en la nube se implementó y cargó correctamente. Si la obtención de openid falla, debe resolver la implementación y la carga de la función de inicio de sesión en la nube antes de continuar con los siguientes pasos.
Interpretación de llamadas a funciones en la nube
La página de inicio del subprograma es "pages / index / index", que se puede ver en los elementos de configuración de app.json o en la ruta de la página en la esquina inferior izquierda del simulador. Hay este código en index.wxml:
Haga clic para obtener openidbutton>
es decir, cuando haga clic en el botón "haga clic para obtener openid", se activará el controlador de eventos onGetOpenid vinculado a bindtap. Puede ver el controlador de eventos onGetOpenid en index.js (busque el controlador de eventos onGetOpenid en el índice .js comprensión comparativa) La interfaz wx.cloud.callFunction () se llama (documentos técnicos abiertos para comprensión comparativa)
Documento técnico: llamada a la función de nube wx.cloud.callFunction
El método para llamar a una función en la nube es muy simple. Solo necesita completar el nombre de la función en la nube (aquí está el inicio de sesión) y los parámetros que deben pasarse (aquí no hay parámetros de carga), y luego puede llamar . Agregue el siguiente código en la función de devolución de llamada exitosa para imprimir el objeto res:
console.log('调用login云函数返回的res',res)
Recuerde guardar el código después de agregarlo. Si la modificación del archivo no se guarda, habrá un pequeño punto verde en la página de la pestaña. Puede usar las teclas de acceso directo (presione al mismo tiempo) Ctrl y S para guardar (Command y S para computadoras Mac).
Después de compilar, haga clic en el botón "haga clic para obtener openid" para ver el objeto res completo. El objeto res tiene tres parámetros:
-
requestID: ID de ejecución de la función en la nube, que se puede utilizar para buscar registros en la consola de desarrollo en la nube y abrir la consola de desarrollo en la nube - Función en la nube - Registro. Aquí puede filtrar y ver el registro de llamadas de la función en la nube (incluido el resultado devuelto ) basado en el nombre de la función de la nube y el requestID);
-
result: El resultado devuelto por la función de nube. El resultado devuelto por la función de nube de inicio de sesión contiene los objetos appid y event. Podemos acceder a ellos a través de res.result.appid y res.result.event;
-
errMsg: muestra si la función de nube se ha llamado correctamente. Después de que la
función de procesamiento de eventos onGetOpenid llama correctamente a la función de nube, se hacen tres cosas:
Use console.log para imprimir openid, puede hacer clic en el botón para activar la función de nube y ver el resultado de la impresión en la consola;
Asigne el appid obtenido al objeto global globalData en el archivo app.js;
vaya a la página userConsole;
La página userConsole simplemente saca el openid de globalData y lo muestra en la página a través de setData.
Experiencia inicial de desarrollo en la nube
Nueva función en la nube
Haga clic con el botón derecho en el directorio raíz de la función en la nube de la función en la nube y seleccione la nueva función en la nube Node.js en la ventana emergente. Por ejemplo, ingrese la suma y presione Entrar para confirmar. La herramienta de desarrollo WeChat creará la función suma de la nube directorio localmente (su computadora). La función en la nube correspondiente se creará en el entorno en línea (es decir, se implementará automáticamente, puede verla en la lista de funciones en la nube de la consola de desarrollo en la nube)
Abra index.js en el directorio de funciones de nube de suma, agregue sum: event.a + event.b, a la función de retorno (el contenido adicional se puede eliminar), y luego recuerde seleccionar la carga incremental de la función de nube: (archivo de actualización) , Actualice la función de suma de la nube.
return {
sum:event.a+event.b,
}
A y b son variables, pero a diferencia de la anterior, no declaramos a y b en el lado del servidor, esto se debe a que podemos declarar variables en el lado del programa pequeño.
Haga clic en "Crear rápidamente una nueva función en la nube" en el simulador de la herramienta del desarrollador, saltará a la página addFunction, abra addFunction.wxml, vemos que la función de la nube de prueba está vinculada a la función de procesamiento de eventos testFunction.
<view class="list-item" bindtap="testFunction">
<text> 测试云函数</text>
</view>
Echemos un vistazo a testFunction en addFunction.js para ver cómo las variables ayb están relacionadas con las variables del lado del servidor, y cómo se representan los resultados en la página. testFunction llama a la función de nube sum a través de wx.cloud.callFunction, la diferencia es que hay a y b en los datos:
data: {
a: 1,
b: 2
},
Los datos rellenados son los parámetros que se pasan a la función de nube, es decir, los parámetros del subprograma se pasan primero a la función de nube, luego se procesa la función de nube y luego se devuelve el objeto res. Podemos imprimir el objeto res en la función de devolución de llamada exitosa:
console.log("sum云函数返回的对象",res)
Después de compilar, volvemos a hacer clic en la función de nube de prueba, y podemos ver el resultado impreso en la consola, y el resultado.resultado.sum es 3. Asigne directamente result.result.sum a result a través de setData para representar el número, entonces, ¿cuál es este result.result? ¿Qué es JSON.stringify ()?
result: JSON.stringify(res.result)
Podemos imprimir result.result y JSON.stringify (res.result)
console.log ("Qué es res.result", res.result) console.log
("Qué es JSON.stringify (res.result)", JSON.stringify (res.result))
res.result es un objeto y JSON .stringify (res.result) está en formato json. El método JSON.stringify () convierte un valor JavaScript (objeto o matriz) en una cadena JSON, porque si el objeto se representa directamente en la página, mostrará [object Objeto].
Transformación de proyectos tradicionales en proyectos de desarrollo en la nube
Por supuesto, también podemos transformar los proyectos que no usaron desarrollo en la nube en los capítulos anteriores para usar servicios en la nube. Primero, cree una nueva carpeta en el directorio raíz del subprograma, como funciones en la nube, y luego agregue la configuración de ruta de la aplicación. carpeta de funciones en la nube en project.config.json Sí,
"cloudfunctionRoot": "cloudfunctions/",
Luego cree una nueva carpeta de miniprograma y coloque todos los demás archivos del mini programa excepto project.config.json, como páginas, utils, imágenes, app.js, app.json, etc., en la carpeta del miniprograma, y luego coloque en project.config .json agregue la configuración miniprogramRoot:
"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",
Vale la pena mencionar que si la función en la nube se implementa y carga con éxito, siempre podemos llamarla. Siempre que el ID de aplicación y el ID de entorno de su subprograma no hayan cambiado, no importa cuántos proyectos de subprograma cree, puede llamar directamente al función de nube implementada. Por ejemplo, el inicio de sesión anterior, el eco, la devolución de llamada, la suma y otras funciones de la nube. Es decir, una vez que la función en la nube se implemente con éxito, siempre estará en el servidor en la nube, aunque elimine todas las funciones de la nube local del applet, no importa.
Cuando el directorio raíz de la función en la nube se crea y configura como la carpeta de funciones en la nube, no hay ninguna función en la nube en el directorio raíz de la función en la nube. Podemos hacer clic con el botón derecho en la carpeta de funciones en la nube del directorio raíz de la función en la nube para seleccionar la lista de funciones en la nube de sincronización y todas las Las funciones en la nube se pueden seleccionar La lista está listada (esto es solo una lista), y para modificar el contenido de la función en la nube, podemos hacer clic con el botón derecho en uno de los directorios de la función en la nube y elegir descargar la función en la nube.
Además, necesitamos utilizar la función de ciclo de vida en el lanzamiento de la aplicación.js del subprograma
wx.cloud.init()来初始化云开发能力：
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: '你的环境ID',
traceUser: true,
})
}
},
La capacidad global de desarrollo en la nube solo debe inicializarse una vez. El atributo traceUser aquí se establece en verdadero y el acceso del usuario se registrará en la gestión de usuarios. El registro de acceso se puede ver en el análisis de operaciones: acceso del usuario del desarrollo en la nube. consola.