1.1 Introducción a la composición del marco de applet
1.1.1 Crear una nueva página
Pasos para crear una nueva página:
-
En el directorio de páginas, haga clic derecho y seleccione "Nueva carpeta", por ejemplo: cree una carpeta de carrito
-
En la carpeta del carrito, haga clic derecho y seleccione "Nueva página" para generar el marco de la página (compuesto por cuatro archivos)
-
El directorio correspondiente en el archivo app.json se generará automáticamente y se colocará en el campo de páginas. Solo necesita ajustar manualmente el orden en que se muestran ciertas páginas. Si no se requiere ningún ajuste. El valor predeterminado está bien.
2.1.2 Parte superior de la página de configuración
Establecer en el campo de Windows en el archivo app.json:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},| Atributos | Tipos de | valores predeterminados | describir |
|---|---|---|---|
| estilo de texto de fondo | cuerda | oscuro | Estilo de carga desplegable, solo admite dark/light |
| navegaciónBarFondoColor | Color hexadecimal | #000000 | Color de fondo de la barra de navegación, como#000000 |
| navegaciónBarTitleText | cuerda | Contenido del texto del título de la barra de navegación | |
| estilo de texto de la barra de navegación | cuerda | blanco | Color del título de la barra de navegación, solo admite black/white |
Para obtener una descripción detallada de la configuración del subprograma/configuración de la página/elementos de configuración, consulte el sitio web oficial del subprograma:
Configuración de página | Documentación abierta de WeChat
2.1.3 Establecer la navegación inferior de la barra de pestañas
Si el subprograma es una aplicación de varias pestañas (hay una barra de pestañas en la parte inferior o superior de la ventana del cliente para cambiar de página), puede especificar el rendimiento de la barra de pestañas y la página correspondiente que se muestra cuando se cambia la pestaña a través del elemento de configuración tabBar.
Establecer en el campo tabBar en el archivo app.json:
"tabBar": {
"backgroundColor": "#181E2C",
"color" : "#fff",
"selectedColor" : "#de3120",
"list": [
{
"pagePath": "pages/index/index",
"text" : "点餐",
"iconPath" : "/images/footer_btn_1.png",
"selectedIconPath" : "/images/footer_btn_1_active.png"
},
{
"pagePath": "pages/cart/cart",
"text" : "购物车",
"iconPath" : "/images/footer_btn_2.png",
"selectedIconPath" : "/images/footer_btn_2_active.png"
},
{
"pagePath": "pages/user/user",
"text" : "我的",
"iconPath" : "/images/footer_btn_3.png",
"selectedIconPath" : "/images/footer_btn_3_active.png"
}
]
},Avance:
Marco--Configuración de página--Documento de configuración global--tabBar, participar, el sitio web oficial del applet:
Configuración global | Documentación abierta de WeChat
1.2 Explicación del ciclo de vida del applet y el ciclo de vida de la página
La función del ciclo de vida del applet:
La función de ciclo de vida del applet se llama en app.js, y la función App(Object) se usa para registrar un applet.
Acepta un parámetro de objeto, especificando la devolución de llamada del ciclo de vida de su subprograma
En general, existen funciones de devolución de llamada del ciclo de vida, como la inicialización del subprograma de monitoreo onLaunch, la visualización del subprograma de monitoreo onShow y la ocultación del subprograma de monitoreo onHide.
Cuando se inicie el applet, ejecute onLaunch>onshow primero y luego ejecute la página onload>onshow>onready
2.2.1 Ciclo de vida del miniprograma
-
Inicialización del applet del monitor onLaunch
-
Pantalla del subprograma onShow monitor
-
onHide supervisa la ocultación del subprograma
// app.js
App({
// 监听小程序初始化
onLaunch() {
console.log('onLaunch 监听小程序初始化')
},
onShow(){
console.log('onShow 监听小程序显示')
//你可以在生命周期函数中，去做一些 你想做的事情，例如：输出当前系统年份
let date = new Date()
console.log(date.getFullYear())
},
onHide(){
console.log('onHide 监听小程序隐藏')
},
globalData: {
userInfo: null
}
})Ver "Depurador" -- "Consola Consola", vista previa:
De la demostración anterior, podemos saber que la secuencia de llamada de la función de ciclo de vida del applet es: onLaunch>onShow>onHide
2.2.2 Ciclo de vida de la página
El ciclo de vida de cada página se establece en el archivo xxx.js de la página correspondiente. Si configuramos el ciclo de vida de la página de inicio actual en index.js en la carpeta de índice en las páginas:
En esta página, escribe las siguientes funciones del ciclo de vida.
-
cargar
-
en el programa
-
listo
-
en ocultar
-
en descarga
En el archivo index.js:
2.2.2.1 El papel de los datos
El papel de los datos: los datos iniciales de la página
Los datos en datos se pueden representar en la página.
2.2.2.2 El papel de las funciones del ciclo de vida de la página
El uso específico de las funciones del ciclo de vida de la página:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onLoad监听页面加载')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady监听页面初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onShow监听页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onHide监听页面隐藏')
},2.3 Unidad de tamaño adaptativo del mini programa rpx y estilo
2.3.1 unidad rpx
La unidad rpx es la unidad de tamaño de css en el applet de WeChat, y rpx se puede adaptar según el ancho de la pantalla. El ancho de pantalla especificado es 750rpx. Por ejemplo, en iPhone6, el ancho de la pantalla es de 375 px y hay 750 píxeles físicos, por lo que 750 rpx = 375 px = 750 píxeles físicos, 1 rpx = 0,5 px = 1 píxel físico.
| equipo | rpx a px (ancho de pantalla/750) | px a rpx (750/ancho de pantalla) |
|---|---|---|
| iphone 5 | 1rpx = 0.42px | 1 píxel = 2,34 rpx |
| iphone 6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1 px = 1,81 rpx |
El subprograma WeChat también admite la unidad de tamaño rem y la relación de conversión entre rem y rpx: rem: especifica que el ancho de la pantalla es 20 rem; 1 rem = (750/20) rpx. Nota: los diseñadores pueden usar iPhone6 como estándar para borradores visuales (borradores de diseño) al desarrollar miniprogramas de WeChat. Sugerencia: si el borrador del diseño usa un ancho de dispositivo de 750 px, es más fácil calcular 750 px, 1 rpx = 1 px. En este caso, el tamaño medido en el dibujo del diseño es tantos px como el número de rpx. En cuanto a cuántos rems en realidad necesita ser convertido en diferentes dispositivos Déjelo en manos del applet para convertirlo usted mismo.
2.3.2 Importación de estilos de miniprogramas
Utilice la declaración @import para importar la hoja de estilo externa. @import va seguido de la ruta relativa de la hoja de estilo externa que debe importarse. Use ; para indicar el final de la declaración.
(1) Importar la hoja de estilo externa a la página
common.wxss Hoja de estilo de contorno
/** common.wxss **/
.red{ color: rojo; }
hoja de estilo de página index.wxss
@import '../../common.wxss';
/**index.wxss**/
.userinfo{
font-size: 30px;
text-align: center;
width: 30%;
padding: 16px;
}(2) Importar estilos públicos es de la misma manera
2.3.3 Estilo global y estilo local del applet
Los estilos definidos en app.wxss son estilos globales que se aplican a todas las páginas. Los estilos definidos en el archivo wxss de la página son estilos locales, que solo se aplican a la página correspondiente y anulan el mismo selector en app.wxss.
2.3.4 Estilo en línea de mini programa
El componente del marco del subprograma admite el uso de atributos de estilo y clase para controlar el estilo del componente.
-
estilo: estilo recibe estilos dinámicos, que se analizarán en tiempo de ejecución. Intente evitar escribir estilos estáticos en estilo, para no afectar la velocidad de representación.
-
clase: el estilo estático se escribe en la clase de manera uniforme. Se utiliza para especificar una regla de estilo. Su valor de atributo es una colección de nombres de selector de clase (nombres de clase de estilo) en la regla de estilo. El nombre de la clase de estilo no necesita estar entre ., y los nombres de clases de estilo múltiples están separados por espacios.
2.3.5 Selectores CSS admitidos por el applet
Los selectores actualmente admitidos por WeChat Mini Programs son:
| Selector | Muestra | Descripción de la muestra |
|---|---|---|
| .clase | .introducción | Seleccione todos los componentes con class="intro" |
| #identificación | #primer nombre | Seleccione el componente con id="firstname" |
| elemento | vista | seleccione todos los componentes de la vista |
| elemento, elemento | Ver casilla de verificación | Seleccionar todos los componentes de vista de documento y todos los componentes de casilla de verificación |
| ::después | ver::después | Insertar contenido después del componente de vista |
| ::antes de | ver::antes | Insertar contenido antes del componente de vista |