Directorio de artículos
Estructura del directorio de WeChat
了解微信小程序项目的目录以及一些文件用途
En el applet, html, js y css están todos extendidos y restringidos , y sus sufijos de archivo se han definido recientemente.
-
El archivo principal, que consta de tres archivos, debe colocarse en el directorio raíz del proyecto , de la siguiente manera:
- función de app.js: lógica de applet
必填项
- Función app.json: configuración pública del mini programa
必填项
- Función app.wxss: hoja de estilo pública del subprograma
非 必填项
- función de app.js: lógica de applet
-
La página consta de cuatro archivos, a saber:
Tipo de archivo | efecto | ¿Es obligatorio? |
---|---|---|
js |
Lógica de página (el applet de WeChat no tiene objetos de ventana y documento) | Sí |
wxml |
Estructura de la página (Lenguaje de marcado WeiXin, no sintaxis HTML) | Sí |
wxss |
Hoja de estilo de página (WeiXin Style Sheets expande la unidad de tamaño rpx, píxel de respuesta exclusivo de WeChat ) | No |
json |
configuración de página | No |
Nota: Para facilitar que los desarrolladores reduzcan los elementos de configuración, los cuatro archivos en la página de descripción deben tener la misma ruta y nombre de archivo.
Instrucciones de configuración
Elementos de configuración de app.json
app.json
El archivo se usa para configurar el subprograma WeChat globalmente, determinar la ruta del archivo de la página, el rendimiento de la ventana, configurar el tiempo de espera de la red, configurar la pestaña, etc.
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
El archivo en el directorio raíz del subprograma app.json
se usa para configurar el subprograma WeChat globalmente. El contenido del archivo es un objeto JSON con los siguientes atributos:
elemento de configuración
Atributos | tipo | requerido | describir | versión mínima |
---|---|---|---|---|
ruta de la página de entrada | cadena | No | El applet inicia la página de inicio por defecto | |
paginas | cadena[] | Sí | Lista de rutas de página | |
ventana | Objeto | No | Comportamiento de ventana predeterminado global | |
barra de pestañas | Objeto | No | tab Comportamiento de la barra inferior |
|
redTiempo de espera | Objeto | No | tiempo de espera de la red | |
depurar | booleano | No | Ya sea para habilitar el modo de depuración, el valor predeterminado está desactivado | |
paginasfuncionales | booleano | No | Ya sea para habilitar la página de función de complemento, el valor predeterminado está desactivado | 2.1.0 |
subpaquetes | Objeto[] | No | Configuración de la estructura de subcontratación | 1.7.3 |
trabajadores | cadena | No | Worker El directorio donde se coloca el código. |
1.9.90 |
Modos de fondo requeridos | cadena[] | No | Capacidades que deben usarse en segundo plano, como "reproducción de música" | |
información privada requerida | cadena[] | No | La interfaz de privacidad relacionada con la ubicación llamada | |
complementos | Objeto | No | complementos utilizados | 1.9.6 |
regla de precarga | Objeto | No | Reglas de predescarga de subpaquetes | 2.3.0 |
redimensionable | booleano | No | Si la miniaplicación de PC admite que el usuario cambie el tamaño de la ventana arbitrariamente (incluida la maximización de la ventana); si la miniaplicación de iPad admite la rotación de pantalla. desactivado por defecto | 2.3.0 |
usandoComponentes | Objeto | No | Configuración de componentes personalizados globales | Herramientas para desarrolladores 1.02.1810190 |
permiso | Objeto | No | Ajustes relacionados con los permisos de la interfaz del applet | Cliente WeChat 7.0.0 |
mapa del sitioUbicación | cadena | Sí | Indique la ubicación de sitemap.json | |
estilo | cadena | No | Especifica usar el estilo weui actualizado | 2.8.0 |
useExtendedLib | Objeto | No | Especifique la biblioteca de extensiones a la que se debe hacer referencia | 2.2.1 |
entradaDeclarar | Objeto | No | Abrir mensajes de WeChat con applets | Cliente WeChat 7.0.9 |
modo oscuro | booleano | No | El applet es compatible con DarkMode | 2.11.0 |
ubicación del tema | cadena | No | Indique la ubicación de theme.json, se requiere que el modo oscuro sea verdadero | Herramientas para desarrolladores 1.03.2004271 |
lazyCodeLoading | cadena | No | Configure la inyección de código de componente personalizado bajo demanda | 2.11.1 |
única página | Objeto | No | Configuración relacionada con el modo de página única | 2.12.0 |
materiales soportados | Objeto | No | Abra la configuración relevante del subprograma de material de chat. | 2.14.3 |
servicioProveedorTicket | cadena | No | Notas personalizadas del proveedor de servicios | |
incrustadoAppIdList | cadena[] | No | applet de media pantalla appId | 2.20.1 |
Media página | Objeto | No | Configuración de escena de media pantalla de transmisión en vivo de número de video | 2.18.0 |
opciones de depuración | Objeto | No | Configuración relacionada con la depuración | 2.22.1 |
enablePassiveEvent | Object或boolean | 否 | touch 事件监听是否为 passive | 2.24.1 |
resolveAlias | Object | 否 | 自定义模块映射规则 | |
renderer | string | 否 | 全局默认的渲染后端 | 2.30.4 |
rendererOptions | Object | 否 | 渲染后端选项 | 2.31.1 |
componentFramework | string | 否 | 组件框架,详见相关文档 | 2.30.4 |
miniApp | Object | 否 | 多端模式场景接入身份管理服务时开启小程序授权页相关配置,详见相关文档 | |
static | Object | 否 | 正常情况下默认所有资源文件都被打包发布到所有平台,可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档 |
window配置项
可以借助UE编辑器来随便找个颜色
window用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
|
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white |
|
navigationBarTitleText | string | 导航栏标题文字内容 | ||
navigationStyle | string | default | 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。 |
iOS/Android 微信客户端 6.6.0,Windows 微信客户端不支持 |
homeButton | boolean | default | 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键 | 微信客户端 8.0.24 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light |
|
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px。 详见 Page.onReachBottom | |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 |
2.4.0 (auto) / 2.5.0 (landscape) |
restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
initialRenderingCache | string | 页面初始渲染缓存配置,支持 static / dynamic |
2.11.1 | |
visualEffectInBackground | string | none | 切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none |
2.15.0 |
handleWebviewPreload | string | static | 控制预加载下个页面的时机。支持 static / manual / auto |
2.15.0 |
-
注 1:HexColor(十六进制颜色值),如"#ff00ff"
-
注 2:关于
navigationStyle
- iOS/Android 客户端 7.0.0 以下版本,
navigationStyle
只在app.json
中生效。 - iOS/Android 客户端 6.7.2 版本开始,
navigationStyle: custom
对 web-view 组件无效 - 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
- Windows 客户端 3.0 及以上版本,为了给用户提供更符合桌面软件的使用体验,统一了小程序窗口的导航栏,
navigationStyle: custom
不再生效
- iOS/Android 客户端 7.0.0 以下版本,
restartStrategy
基础库 2.8.0 开始支持,低版本需做兼容处理。
重新启动策略配置
可选值 | 含义 |
---|---|
homePage | (默认值)如果从这个页面退出小程序,下次将从首页冷启动 |
homePageAndLatestPage | 如果从这个页面退出小程序,下次冷启动后立刻加载这个页面,页面的参数保持不变(不可用于 tab 页) |
如:
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar配置项
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置 项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性 | 类型 | 必填 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | ||
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色,仅支持十六进制颜色 | ||
backgroundColor | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | ||
borderStyle | string | 否 | black | tabbar 上边框的颜色, 仅支持 black / white |
|
list | Array | 是 | La lista de pestañas, vea list la descripción del atributo para más detalles, al menos 2 y como máximo 5 pestañas |
||
posición | cadena | No | abajo | La posición de tabBar, solo admite bottom /top |
|
costumbre | booleano | No | FALSO | Personalizar tabBar, ver detalles | 2.5.0 |
Entre ellos, list acepta una matriz, y solo se pueden configurar un mínimo de 2 pestañas y un máximo de 5 pestañas . Las pestañas están ordenadas en el orden de la matriz, cada elemento es un objeto y sus valores de propiedad son los siguientes:
Atributos | tipo | requerido | ilustrar |
---|---|---|---|
páginaRuta | cadena | Sí | Ruta de la página, debe definirse primero en las páginas |
texto | cadena | Sí | texto del botón en la pestaña |
iconoRuta | cadena | No | Ruta de la imagen, el tamaño del ícono está limitado a 40 kb, el tamaño recomendado es 81 px * 81 px, las imágenes de red no son compatibles. Cuando position es top , el icono no se muestra. |
seleccionadoIconPath | cadena | No | La ruta de la imagen cuando se selecciona, el tamaño del icono está limitado a 40 kb, el tamaño recomendado es 81 px * 81 px y las imágenes de red no son compatibles. Cuando position es top , el icono no se muestra. |
ejemplo
crear una página propia
pages
Ahora creamos un nuevo directorio demo
y un demo
nuevo index.wxml
archivo bajo
app.json
Otros archivos se generarán automáticamente cuando la configuración se guarde en
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/demo/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#80ff80",
"navigationBarTitleText": "我的第一个微信小程序",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text":"首页"
},
{
"pagePath": "pages/logs/logs",
"text":"日志"
},
{
"pagePath": "pages/demo/index",
"text":"设置"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
Encontrará que el texto de la barra de pestañas a continuación no está centrado. De hecho, este es un problema con el editor. Es normal probar en una máquina real.
Depuración de máquinas reales
En la herramienta para desarrolladores, haga clic en [Depuración de dispositivos reales], espere a que se cargue el código QR y escanee el código QR con WeChat en su teléfono móvil.
La fuente en la parte inferior del teléfono sigue siendo muy bonita.
terminar la depuración
Siguiente capítulo Componentes comunes de los miniprogramas de WeChat: ver los componentes del contenedor