Presenta principalmente cómo compilar el código del applet, cómo realizar el simulador de applet y cómo depurar el applet con las herramientas de desarrollo de WeChat.
1. Introducción
Aunque los applets no son muy diferentes de las páginas web tradicionales a nivel de lenguaje de desarrollo: el lenguaje de secuencias de comandos JavaScript se usa para escribir códigos lógicos, WXML similar a HTML se usa para describir la estructura de la página y WXSS similar a CSS se usa para describir la estilos de nodos, pero debido a El mecanismo operativo de representación de subprogramas y la separación lógica es diferente al de las páginas web tradicionales, por lo que no se pueden usar las herramientas tradicionales de desarrollo y depuración de páginas web, por lo que usamos el IDE integral para la ecología del desarrollo de subprogramas : Herramientas para desarrolladores de WeChat . Los desarrolladores pueden utilizar las herramientas de desarrollo de WeChat para completar funciones como el desarrollo de código, la compilación y el funcionamiento, la depuración lógica y de la interfaz, la vista previa del dispositivo real y el envío de versiones de lanzamiento de programas pequeños.
Figura 1 Herramientas para desarrolladores de WeChat
La herramienta para desarrolladores de WeChat se basa en nw.js, usa node.js, chromium y la API del sistema para implementar el módulo subyacente, usa React, Redux y otros marcos técnicos front-end para construir la capa de interacción del usuario y realiza el mismo conjunto de El código se puede usar en las plataformas Mac y Windows.
Figura 2 El marco subyacente de las herramientas para desarrolladores de WeChat
compilación de 2 códigos
Ni las herramientas de desarrollo de WeChat ni el cliente de WeChat pueden ejecutar directamente el código fuente del subprograma, por lo que debemos compilar el código fuente del subprograma . El proceso de compilación de código incluye el preprocesamiento local , la compilación local y la compilación del servidor. Para obtener una vista previa rápida, el código ejecutado por el emulador de la herramienta de desarrollo de WeChat solo se preprocesa y compila localmente, sin compilación del servidor, mientras que el código ejecutado por el cliente de WeChat es compilado adicionalmente por el servidor.
1 Compilar WXML
WXML (WeiXin Markup Language) es un conjunto de lenguajes de etiquetado diseñado por el marco de applet, que se utiliza para construir la estructura de la página. El entorno de ejecución de la capa de representación del subprograma es un WebView, y el WebView no puede comprender directamente las etiquetas WXML, por lo que debe compilarse. La herramienta para desarrolladores de WeChat tiene un compilador WXML binario
incorporado . Este compilador acepta una lista de archivos de código WXML y genera código JavaScript después del procesamiento. Este código es la función de generación de estructura de cada página .
Figura 3 Proceso de compilación WXML
El proceso de compilación convierte todo el código WXML en una función de JavaScript que se inyecta previamente en WebView . Después de determinar la ruta de la página en tiempo de ejecución, pase la ruta como parámetro a esta función para obtener la función de generación de la estructura de la página La función de generación de la estructura de la página acepta los datos de la página, genera un JSON que describe la estructura de la página y finalmente genera el correspondiente a través el sistema de componentes del applet HTML .
Listado de Código 1 Cómo usar la función de generación de estructura de página
//$gwx 是WXML编译后得到的函数
//根据页面路径获取页面结构生成函数
var generateFun = $gwx('name.wxml')
//页面结构生成函数接受页面数据，得到描述页面结构的JSON
var virtualTree = generateFun({
name: 'miniprogram'
})
/** virtualTree == {
tag: 'view'，
children: [{
tag: 'view',
children: ['miniprogram']
}]
}**/
//小程序组件系统在虚拟树对比后将结果渲染到页面上
virtualDom.render(virtualTree)
Al cargar el código, la herramienta para desarrolladores de WeChat envía directamente el archivo de código WXML local al segundo plano, y el segundo plano realiza la compilación WXML. El compilador WXML en segundo plano y el compilador WXML integrado local de la herramienta para desarrolladores son generados por el mismo conjunto de código.
2 Compilar WXSS
WXSS (WeiXin Style Sheets) es un lenguaje de estilo utilizado para determinar cómo deben mostrarse los componentes WXML. Para adaptarse a la gran cantidad de desarrolladores front-end, WXSS tiene la mayoría de las características de CSS. Al mismo tiempo, para ser más adecuado para el desarrollo de applets de WeChat, WXSS ha ampliado y modificado CSS. En comparación con CSS, WebView no entiende directamente algunas características de la extensión WXSS, incluida la unidad de tamaño rpx y la sintaxis de importación de estilo. La herramienta para desarrolladores de WeChat tiene un compilador WXSS
binario incorporado.Este compilador acepta una lista de archivos WXSS , analiza la relación de referencia entre archivos, preprocesa rpx al mismo tiempo y genera una matriz de información de estilo , como se muestra en la Figura 4. Cada archivo WXSS corresponde a un elemento de esta matriz.
Figura 4 Proceso de compilación de WXSS
En tiempo de ejecución, de acuerdo con el ancho de pantalla actual, calcule a cuántas unidades de píxeles corresponde 1rpx y luego convierta la matriz de información de estilo en el estilo final y agréguelo a la página.
Debido al problema de compatibilidad de estilos en el cliente de WeChat, para comodidad de los desarrolladores, la herramienta de desarrollo de WeChat proporciona la función de finalización automática de estilos al cargar código, utiliza PostCSS para preprocesar archivos WXSS y agrega automáticamente prefijos de estilo.
3 Compilando JavaScript
El cliente de WeChat solo necesita cargar un archivo JS (lo llamamos app-service.js ) cuando ejecuta la capa lógica del subprograma , y el marco del subprograma permite a los desarrolladores escribir código JavaScript en diferentes archivos, por lo que al cargar el código previamente, la herramienta para desarrolladores de WeChat haría un preprocesamiento en el archivo JS del desarrollador, incluida la conversión de ES6 a ES5 y la compresión de código (los desarrolladores pueden optar por desactivar la operación de preprocesamiento), y envolvería el contenido de cada archivo JS en el proceso de compilación del servidor. y luego se fusionó con app-service.js en un orden determinado . Entre ellos, se requiere active require para la página JS y app.js.
Figura 5 Proceso de compilación de JavaScript
3. Simulador
El simulador de miniprograma simula la lógica y el rendimiento de la interfaz del miniprograma en el cliente de WeChat, lo cual es conveniente para que los desarrolladores vean el efecto del código en tiempo real. Debido a las diferencias del sistema y algunos procesos de interacción exclusivos del cliente de WeChat, no se puede simular una pequeña cantidad de API en el simulador, pero la mayoría de las API se pueden mostrar en el estado correcto en el simulador. Al mismo tiempo, la herramienta para desarrolladores de WeChat proporciona una variedad de tamaños de modelo y funciones de tamaño de modelo personalizado, lo que es conveniente para que los desarrolladores adapten el modelo del estilo de interfaz.
Figura 6 Mini Simulador de programa
2 Simulación de capa lógica
En el cliente WeChat de iOS, el código JavaScript del subprograma se ejecuta en JavaScriptCore, y en el cliente WeChat de Android, X5 JSCore analiza el código JavaScript del subprograma. En las herramientas de desarrollo de WeChat, usamos un Webivew oculto para simular el entorno operativo lógico del subprograma .
Figura 7 Diagrama simplificado del modelo de entorno operativo del applet del cliente de WeChat
Figura 8 Diagrama simplificado del modelo de entorno operativo del subprograma de herramientas para desarrolladores de WeChat
En las herramientas para desarrolladores de WeChat, WebView es una <webview />pestaña . A diferencia de <iframe />las pestañas, <webview/>las pestañas se ejecutan en hilos separados. El enlace a cargar
para simular la capa lógica del applet es<webview/>
http://127.0.0.1:9973/appservice/appservice
Configuramos un servidor HTTP local en la capa inferior de la herramienta de desarrollo para manejar las solicitudes de red del Mini Program Simulator. en:
./__asdebug/asdebug.js: es un script inyectado por las herramientas de desarrollo.
./__dev__/WAService.js: Es la biblioteca básica de la capa lógica del applet.
./util.js、./app.js、./index.js: Código JS del desarrollador.
Cuando WebView solicita el código JS del desarrollador, la herramienta del desarrollador lee el código JS y realiza el preprocesamiento necesario, devuelve el resultado del procesamiento y luego lo analiza y lo ejecuta WebView. Aunque el código JS no se fusiona en la herramienta de desarrollo, todavía se analiza y ejecuta en el mismo orden de carga .
Figura 9 contenido del servicio de aplicaciones
WebView es un entorno de navegador y JsCore es un analizador de secuencias de comandos puro. El objeto BOM en el navegador no se puede usar en JSCore. La herramienta de desarrollo ha hecho un trabajo muy inteligente, envolviendo el código del desarrollador en el dominio definido En este momento, el navegador El objeto BOM es localmente variable, por lo que se pueden encontrar problemas en la etapa de desarrollo.
Figura 10 Variable local del objeto BOM
Simulación de 3 capas de renderizado
La herramienta para desarrolladores de WeChat utiliza la <webview />etiqueta para cargar la página de la capa de representación, y cada vista web de la capa de representación se carga
http://127.0.0.1:9973/pageframe/pageframe.html
Cuando el servidor local HTTP integrado en la capa inferior de la herramienta para desarrolladores recibe esta solicitud, compilará el archivo WXML y el archivo WXSS, y luego usará el resultado compilado como el paquete de retorno de la solicitud HTTP. Después de determinar la ruta para cargar la página, como la página de índice, la herramienta de desarrollo inyectará dinámicamente el siguiente script:
// 改变当前webview 的路径，确保之后的图片网络请求能得到正确的相对路径
history.pushState('', '', 'pageframe/index')
// 创建自定义事件，将页面结构生成函数派发出去，由小程序渲染层基础库处理
document.dispatchEvent(new CustomEvent("generateFuncReady", {
detail: {
generateFunc: $gwx('./index.wxml')
}
}))
// 注入对应页面的样式，这段函数由WXSS编译器生成
setCssToHead()
4 Simulación de Cliente
El cliente de WeChat proporciona una gran cantidad de API para enriquecer las funciones de los Mini Programas. En la herramienta para desarrolladores de WeChat, mediante el uso de BOM (Browser Object Model) y la capacidad de acceder a los recursos del sistema mediante node.js , mientras se simula la interfaz de usuario y el proceso de interacción del cliente, la mayoría de las API se pueden ejecutar con normalidad.
Con BOM, como wx.request usa simulación XMLHttpRequest, wx.connectSocket usa WebSocket, wx.startRecord usa MediaRecorder, wx.playBackgroundAudio usa <audio/>etiquetas ,
con node.js, como usar fs para implementar wx.saveFile, wx.setStorage, wx .chooseImage, etc. Funciones API.
Realice wx.navigateTo, wx.showToast, wx.openSetting, wx.addCard, etc. mediante una interfaz de usuario simulada y un proceso de interacción.
5 Simulación de comunicación
La capa lógica, la capa de representación y la implementación de la simulación del cliente en la herramienta de desarrollo de WeChat se han descrito anteriormente. Además, necesitamos una solución de comunicación efectiva para hacer que la capa lógica, la capa de representación y el cliente del subprograma solo a través del intercambio de datos entre estas tres partes se pueden conectar las tres partes en un todo orgánico.
La herramienta de desarrollo de WeChat tiene un módulo subyacente de centro de mensajes que mantiene un servidor WebSocket. El WebView de la capa lógica del subprograma y el WebView de la página de la capa de representación establecen una conexión larga con la capa subyacente de la herramienta de desarrollo a través de WebSocket y usan el campo de protocolo de WebSocket para distinguir la fuente de Socket.
Listado de Código 2 Módulo de mensajes en la capa lógica
// <webview/>的userAgent是可定制的
// 通过userAgent中获取开发者工具WebSocket服务器监听的端口
var port = window.navigator.userAgent.match(/port\/(\d*)/)[1]
// 通过指定 protocol == 'APPSERVICE' 告知开发者工具这个链接是来自逻辑层
var ws = new WebSocket(`ws://127.0.0.1:${port}`, 'APPSERVICE')
ws.onmessage = (evt) => {
let msg = JSON.parse(evt.data)
// …处理来自开发者工具的信息
}
// 调用API接口 wx.navigateBack
ws.send(JSON.stringify({
command: 'APPSERVICE_INVOKE'，
data: {
api: 'navigateBack',
args: {}
}
}))