La parte principal de un pequeño programa consta de tres archivos, que deben colocarse en el directorio raíz del proyecto, de la siguiente manera:
| documento | debe | efecto |
|---|---|---|
| aplicación.js | Sí | lógica del subprograma |
| aplicación.json | Sí | Configuración de anuncio de mini programa |
| app.wxss | No | Mini hoja de estilo de anuncio de programa |
3. Estructura del proyecto de programa pequeño
Una pequeña página de programa consta de cuatro archivos, a saber:
| Tipo de archivo | debe | efecto |
|---|---|---|
| js | Sí | lógica de página |
| wxml | Sí | estructura de la página |
| json | No | configuración de página |
| wxss | No | hoja de estilo de página |
》》》》》》》》》》》》》》
Primero cree un archivo app.json en el directorio raíz del proyecto Demo, cuyo contenido es el siguiente
{
"pages":[
"pages/index/index"
]
}
Luego cree un nuevo directorio de páginas en el directorio raíz del proyecto de demostración, cree un nuevo directorio de índice en el directorio de páginas y luego cree dos archivos index.wxml e index.js en el directorio de índice.
El contenido de index.wxml es:
<view>
<view style="text-align:center;padding:200rpx">
<text>{
{motto}}</text>
</view>
</view>
El contenido de index.js es:
Page({
data: {
motto: 'Hello World',
},
onLoad() {
}
})
Después de completar los pasos anteriores, la estructura de la herramienta para desarrolladores es la siguiente:
Haga clic en el comando "compilar" de Mini Program Developer Tools y las herramientas de desarrollo compilarán el contenido del proyecto de demostración y mostrarán el resultado de Hello World en la interfaz del emulador de WeChat Developer Tools.
4.4 Establecer la configuración local para la página actual del applet (index.wxml como ejemplo: modificar el fondo y el color de la fuente)
1. Seleccione el archivo index.json en el directorio de índice en las páginas para modificar la configuración
- ¡El código completo es el siguiente! Se puede copiar y pegar directamente
{ "usingComponents": {}, "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "第一个小程序项目", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }
4.3 Agregar una nueva página al applet
1. Ingrese app.json y especifique la ruta del archivo de página generado en la matriz de primeras páginas para crearlo automáticamente
¡Nota! La página que desea mostrar primero se puede organizar en orden, la ruta de la primera página es la primera página que se muestra
4.5 Establecer la barra de mop para el applet (configuración global)
1. Después de seleccionar app.json para ingresar, agregue el código en las primeras llaves del archivo para editarlo y separe varios nodos con comas.
