1. Lenguaje de
desarrollo El lenguaje de desarrollo principal del
applet de WeChat es javascript, los archivos wxml + wxss se utilizan para describir la interfaz, los
archivos app.json + app.wxss se utilizan para configurar el proyecto;
2. ¿Qué son wxml y wxss?
Para Android, la descripción de la página se define básicamente en xml, como por ejemplo:
<FrameLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textViewHello"
android:textSize="20sp"
android:textColor="#f00"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</FrameLayout>Estructura de la página: un FrameLayout con un id de diseño, que contiene un TextView con un id de textViewHello.
Estilo de página: los atributos respectivos de FrameLayout y TextView: ancho, alto, TextView y tamaño de fuente, color, contenido del texto, etc.
El método wxml + wxss utilizado por el subprograma WeChat:
some.wxml:
<view class="userinfo">
<image class="userinfo-avatar" />
<text class="userinfo-nickname">张三</text>
</view>some.wxss:
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-nickname {
width: 128rpx;
color: #aaa;
}Obviamente, se puede ver que: wxml es responsable de la visualización de la estructura de la página y wxss es responsable de la definición del estilo de la página.
Esta separación de estructura y estilo es en realidad una continuación del hábito del desarrollo web (html + css).
Hay al menos dos beneficios de hacerlo:
uno es hacer que la división de responsabilidades del código sea más clara y la estructura clara.
El segundo es evitar muchos códigos duplicados. (Cuando escribe archivos xml de Android, ¿a menudo encuentra muchos atributos repetidos que deben separarse en un estilo? Esta es básicamente la idea de una hoja de estilo)
3 、 app.js
app.js es básicamente equivalente a la clase Application en Android. Hay principalmente una función App () en el archivo para inicializar el applet.
Proporciona algunas funciones de devolución de llamada sobre todo el ciclo de vida del subprograma: onLaunch, onShow, onHide, onError, etc. Por ejemplo, si el desarrollador tiene algunas operaciones que deben ejecutarse cuando se inicia el subprograma, pueden ejecutarlo en la función onLaunch.
[Comparado con Android] Nuestra operación de inicialización en la función onCreate de la aplicación.
Proporciona un globalData para almacenar datos públicos durante el uso del applet.
[Comparado con Android] A veces también colocamos algunos datos en una Aplicación personalizada para que las utilicen diferentes páginas.
El subprograma proporciona un método getApp () global para obtener la instancia de la aplicación del subprograma.
[Comparado con Android] Piense en el método getApplication () ~ :-D
4 、 app.json
La función de app.json es muy similar al archivo AndroidMainifest.xml en Android; ambos son archivos de configuración estáticos.
- Declare y establezca la ruta de cada página: la página debe declararse aquí antes de que pueda usarse.
- Configure el estilo de la página (color de la barra de navegación, fuente del texto, etc.)
- Configure la barra de pestañas en la parte inferior
- Establezca el tiempo de espera general, ya sea en modo de depuración, etc.
[En comparación con Android] La actividad también debe declararse en el archivo AndroidMainifest.xml, y el tema de la aplicación también se puede configurar aquí.
5 、 app.wxss
app.wxss define el estilo global; el estilo definido se aplicará a cada página. Por ejemplo, agregue app.wxss:
text {
padding:5px;
}Puede agregar un relleno de 5px a todos los controles de texto.
Por supuesto, el xxPage.wxss de la propia página puede definir un estilo local para anular el estilo global.
[Comparado con Android] No existe una configuración global similar a app.wxss en Android. Necesitamos definir los atributos de cada control en cada layout.xml. Incluso si podemos usar archivos de estilo para extraer algunos estilos uniformes, aún necesitamos Configure los atributos de cada Vista para usar este estilo; desde esta perspectiva, usar wxss es más ventajoso.
6, carpeta util
Hay un archivo util.js en la carpeta utils bajo el directorio raíz, que se llama como está, y es similar a la existencia de algunas clases de herramientas en Java.
La carpeta utils es en realidad una estructura no esencial, y la razón por la que aparece en el proyecto oficial HelloWorld es como un representante, lo que indica que los desarrolladores pueden personalizar nuevas carpetas y estructuras aquí. Como plataforma desarrollada con js, los subprogramas de WeChat pueden usar muchas bibliotecas js de terceros. Para estas bibliotecas de terceros y otros recursos de imágenes, se pueden colocar en una carpeta personalizada.
7, carpeta de páginas
La carpeta de páginas contiene dos subdirectorios: índice y registros. La estructura de los dos directorios es básicamente la misma y ambos contienen cuatro archivos con el mismo nombre principal: xx.js, xx.wxml, xx.json, xx.wxss Estos pocos archivos.
Una estructura tan típica muestra que es una página de un pequeño programa. Las funciones de los cuatro archivos son:
- xx.js: La lógica principal de la página [equivalente a xx.Actividad de Android]
- wxml: la estructura de la página [equivalente a la estructura del archivo de diseño de Android activity_xx.xml]
- wxss: estilo de página [equivalente a la parte de estilo del archivo de diseño de Android activity_xx.xml]
- json: la configuración de la página es similar al app.json mencionado anteriormente, pero solo se pueden configurar las propiedades relacionadas con la ventana, que anularán la configuración
del mismo nombre en app.json . En Android, xx.Activity y el archivo de diseño
activity_xx.xml no están en el mismo directorio, debe usar setContentView para asociarlos.
Sin embargo, en el subprograma de WeChat, no es necesario realizar este trabajo manualmente. WeChat exige que cuatro archivos relacionados con una página se deben nombrar de forma coherente y se deben colocar en la misma carpeta.
8. La lógica empresarial de Android está escrita en archivos Java y los programas pequeños están escritos en js; el mismo ciclo de vida de la página similar a Android, los programas pequeños también tienen un ciclo de vida:
onLoad: function(options) {
// 页面初始化
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
// 页面显示
},
onHide: function() {
// 页面推到后台
},
onUnload: function() {
// 页面关闭
},Los programas pequeños no son como Android que puede monitorear la clave de retorno de la página, por lo que puede manejar el negocio cuando la página regresa en onUnload.
9. Similar a la clase Application en Android, app.js en el subprograma es equivalente a la entrada global. Si el desarrollador tiene una operación que debe realizarse cuando se inicia el subprograma, se puede ejecutar en el método onLaunch.
app.js también proporciona un globalData, que se utiliza para almacenar datos públicos durante todo el uso del applet.
En otras páginas, puede usar el método getApp () para obtener la instancia de la aplicación del subprograma para usar los datos públicos globales.
10. Si es necesario almacenar algunos datos simples, similar a SharedPreferences en Android, el subprograma puede usar wx.setStorageSync ("clave", valor); para almacenar; wx.getStorageSync ("clave"); para recuperar;
11. La transferencia de datos entre páginas solo puede realizarse a través del enrutamiento en el subprograma, que son los datos que se transferirán en el empalme de enlace de salto:
transferencia de datos:
//let obj = JSON.stringify(obj);
wx.navigateTo({
url: '/pages/index/index?id=' + id,
})aceptar:
onLoad: function(options) {
// let obj = JSON.parse(options.obj);
let id = options.id；
}Si desea pasar un objeto, puede usar JSON.stringify (obj); para convertir los datos en una cadena antes de pasarlos, y usar JSON.parse (obj); para volver a convertir a un objeto al recibir;
12. Actualización de datos; después de procesar los datos, usaremos this.setData ({...}) para actualizar la fuente de datos, pero muchos principiantes cometerán un error, vea el siguiente código de error:
wx.request({
url: "request_url",
success: function (res) {
this.setData({...})
}
});De acuerdo con el programa anterior, se informará un error y luego mire el código correcto:
let that = this;
wx.request({
url: "request_url",
success: function (res) {
that.setData({...})
}
});La diferencia entre los dos es que hay una variable adicional y se le asigna un valor en el método onLoad () para que sea igual a esto. De hecho, para decirlo claramente es un problema de alcance; de hecho, también lo hemos encontrado en Android, es decir, al saltar para establecer esto en el evento de clic, escribiremos el nombre de la clase, similar a: Intent intent = new Intent (MainActivity.this , TestActivity.class) ;.
13: Intercepción de eventos: hay muchos procesos de interceptación de eventos en Android; los applets no son una excepción. Mire el siguiente diseño de programa pequeño:
<view bindtap="onclick">
<image bindtap='tapclick'></image>
</view>Como se indicó anteriormente, configuré el evento bindtap click para las vistas secundaria y principal. En este momento, cuando haga clic hacia abajo, encontrará que ambos eventos se ejecutan. Esto se denomina propagación de eventos en el subprograma; si se hace clic en la imagen, no se hace clic en la vista. atributo catchtap; modificar de la siguiente manera:
<view bindtap="onclick">
<image catchtap='tapclick'></image>
</view>Resumió algo de información en Internet, ¡espero que sea de ayuda para todos!