1. El código de programa que constituye la pequeña
A través del desarrollo de herramientas para crear rápidamente un proyecto wechatdemo. Proyecto generó el interior de los diferentes tipos de archivos:
.json de perfil
.wxml un archivo de plantilla, el equivalente a HTML plantillas
.wxss como un archivo de estilo, lo que equivale a la hoja de estilo CSS HTML
Js archivo de lógica guión de la JS, equivalente a HTML de la escritura js
Una descripción del programa general de la aplicación
Varias páginas que describen cada página
Un archivo de configuración IDE proyecto project.config.json
Una biblioteca común utils lógica del programa
2. Una pequeña parte del programa principal (llamado app) tres archivos, debe ser colocado en el directorio raíz del proyecto
papel Archivos necesarios
app.js lógica pequeño programa es
app.json applet de configuración común es
la hoja de estilo común subprograma app.wxss n
2.1 una descripción del programa general de la aplicación app.js archivo (proyecto applet de registro)
2. No se define en la App (función) en la llamada getapp (), puede utilizar esta aplicación para obtener la instancia.
3. No llame a getCurrentPages cuando onLaunch de (), y luego la página no se ha generado.
4. Por getapp () después de la adquisición de ejemplo, no trate de llamar a los métodos del ciclo de vida.
corresponde a la ApplicationContext, todo el contexto de applet son para uso, es decir todo el ámbito de servicio applet.
app.js capa de cuerpo programa se forma utilizando esta lógica de acceso, utilizando getapp () .js página en la capa de lógica. nombre de propiedad se puede acceder.
// app.js
Aplicación ({
onLaunch (opciones) {
// hacer algo inicial, cuando el lanzamiento.
},
OnShow (opciones) {
// hacer algo cuando espectáculo.
},
ona () {
// hacer algo cuando se esconden.
},
onError (msg) {
console.log (msg)
},
GlobalData: 'Estoy datos globales'
})
onLaunch (objeto Object)
applet se activa cuando se complete la inicialización, el disparador global sólo una vez. Los parámetros también se pueden utilizar wx.getLaunchOptionsSync get.
Parámetros: Consistente con wx.getLaunchOptionsSync
OnShow (objeto Object)
applet de iniciar o activar la visualización del fondo al primer plano. También puede utilizar wx.onAppShow vinculante escuchar.
Parámetros: Consistente con wx.onAppShow
onHide ()
del applet se activa desde el primer plano a un segundo plano. También puede utilizar wx.onAppHide unión escuchar.
onError (error de cadena)
applet se activa cuando se produjo un error de secuencia de comandos o un error de llamada a la API. También puede utilizar wx.onError unión escuchar.
Parámetros: Consistente con wx.onError
onPageNotFound (objeto Object)
fundación comenzó a apoyar la Biblioteca 01/09/90, bajo versión es compatible con el procesamiento por hacer.
página de subprograma para abrir cuando no hay gatillo. También puede utilizar wx.onPageNotFound unión escuchar. Nota Consulte wx.onPageNotFound.
Parámetros: Consistente con wx.onPageNotFound
portal de documentación de desarrollo de aplicaciones
2.2 una descripción del programa general de archivo de la aplicación app.json (proyecto applet de configuración)
Papel: Sendero de pequeño programa de micro-canales de configuración global, la decisión del archivo de paginación, vidriera, establecer el tiempo de espera de la red, configurar una de varias fichas y así sucesivamente.
Todas las opciones de configuración de las páginas y de la, ventana, barra de pestañas, NetworkTimeout, depuración
App.json lista de elementos de configuración:
Atributo Tipo Requerido Descripción
páginas Array cadena se establece Ruta a la
ventana Objeto No hay ningún conjunto de la página por defecto del desempeño ventana
TabBar Objeto No Ajustar la parte inferior de la pestaña rendimiento
networkTimeout Objeto Sin tiempo de espera de la red conjunto
de depuración de Boole Sin activar o desactivar el modo de depuración
"páginas": [
// Esta es la primera página que se muestra como Home
"Páginas / index / índice",
"páginas / logs / logs"
],
// applet para añadir / reducir la página, es necesario modificar el conjunto de páginas
"ventana": {
"BackgroundTextStyle": "luz",
"NavigationBarBackgroundColor": "#fff",
"NavigationBarTitleText": "demo"
"NavigationBarTextStyle": "negro"
},
Propiedad Tipo predeterminado Descripción Versión mínima
navigationBarBackgroundColor HexColor # 000000 color de la barra de navegación de fondo, como # 000000
navigationBarTextStyle cadena de color blanco de la barra de navegación del título, sólo es compatible con negro / blanco
cadena navigationBarTitleText WeChat texto de navegación barra de título
cadena de estilo de la barra de navegación por defecto navigationStyle, sólo es compatible con los siguientes valores: estilos por defecto por defecto; personalizada barra de navegación personalizada, dejando sólo el botón carta de micro-cápsulas esquina superior derecha del cliente 7.0.0
La ventana #ffffff backgroundColor HexColor color de fondo
carga de sólo soportes de oscuridad / luz de la secuencia estilo oscuro backgroundTextStyle desplegable
BackgroundColorTop color de fondo cadena #ffffff de la parte superior de la ventana, sólo el apoyo del canal de micro-cliente iOS 6.5.16
color de fondo cadena backgroundColorBottom #ffffff inferior de la ventana, sólo los canales de soporte iOS micro-cliente 6.5.16
Son enablePullDownRefresh Boolean false para abrir el desplegable actualizar la página actual. Ver Page.onPullDownRefresh
Distancia desde la parte inferior de la página, la unidad está px tirón en el caso de la página inferior onReachBottomDistance número 50 se activa. ver Page.onReachBottom
PageOrientation rotación de pantalla vertical cadena se proporciona a la zona de visualización de apoyo automático / vertical / horizontal en respuesta a un cambio Véase 2.4.0 (automático) / 2.5.0 (paisaje)
disableScroll booleano falso a verdadero conjunto, toda la página no puede desplazarse hacia arriba y hacia abajo. Válido sólo en el diseño de página, no se puede configurar en el app.json
usingComponents Referencia No página de configuración de componente personalizado 1.6.3
string predeterminado estilo de activar una nueva versión de estilos de componentes 2.10.2
ventana de configuración del portal
"barra de pestañas": {
"Color": "# 7A7E83",
"SelectedColor": "# 3cc51f",
"BorderStyle": "negro",
"BackgroundColor": "#ffffff",
"Lista": [
{
"PagePath": "Página / componente / index",
"IconPath": "image / icon_component.png",
"SelectedIconPath": "image / icon_component_HL.png",
"Texto": "组件"
},
{
"PagePath": "Página / weui / ejemplo / index",
"IconPath": "image / icon_component.png",
"SelectedIconPath": "image / icon_component_HL.png",
"Texto": "Extended componentes"
},
{
"PagePath": "Página / API / index",
"IconPath": "image / icon_API.png",
"SelectedIconPath": "image / icon_API_HL.png",
"Texto": "接口"
},
{
"PagePath": "Página / nube / index",
"IconPath": "image / icon_cloud.png",
"SelectedIconPath": "image / icon_cloud_HL.png",
"Texto": "Desarrollo de la nube"
}
]
},
Si el applet es una pestaña de aplicaciones múltiples (inferior o superior de la ventana del cliente tiene barra de pestañas para cambiar de página), el rendimiento de la barra de pestañas elemento especificado y la ficha correspondiente a la página de la entrega se puede configurar a través de barra de pestañas.
recibir una matriz de lista se puede configurar con un mínimo de 2 y un máximo de 5 Tab . array pestaña orden de clasificación, cada elemento es un objeto.
TabBar configurar el portal , el portal en detalle más que yo aquí. . .
3. Descripción pluralidad de páginas cada página (Catálogo de páginas cada página almacenada en el applet)
acción de archivo requerido
nombre página Js Esta lógica es la lógica de la página
nombre página .json esta página para configurar si
la estructura .wxml nombre de la página de esta página es
el nombre de la página .wxss esta hoja de estilo de página n
capa de lógica de js página 3.1 (página de registro)
La capa lógica de la página: su función principal es la "página de registro", cada directorio de la página de nombre / Js página
páginas utilizan el registro: el registro en función de proyecto app.js applet de Aplicación (Objeto) uso similar
Página (Objeto); Objeto {} representa los parámetros del objeto, los datos iniciales de la página designada funciones del ciclo de vida, controladores de eventos y similares.
//index.js
Página({
Datos: {
texto: "Se trata de datos de la página."
},
onLoad: function (opciones) {
Cuando se crea una ejecución de la página //
},
OnShow: function () {
// ejecuta cuando la página aparece en el primer plano
},
onReady: function () {
// La primera vez que la representación de la página se completa la ejecución
},
onHide: function () {
// Ejecutar la página desde el primer plano de fondo se convierte
},
onUnload: function () {
Destrucción // ejecuta cuando la página
},
onPullDownRefresh: function () {
// ejecutar el gatillo de actualización desplegable
},
onReachBottom: function () {
// ejecuta cuando la parte inferior página
},
onShareAppMessage: function () {
// página se ejecuta cuando los usuarios comparten
},
onPageScroll: function () {
Mientras que el balanceo // página
},
onResize: function () {
// ejecuta cuando los cambios de tamaño de página
},
onTabItemTap (elemento) {
// se ejecutará al hacer clic en la pestaña
console.log (item.index)
console.log (item.pagePath)
console.log (item.text)
},
// función de respuesta a incidentes
viewTap: function () {
this.setData ({
texto: 'Establecer algunos datos para actualizar la vista.'
}, La función () {
// esto es setData devolución de llamada
})
},
// datos gratuito
CustomData: {
hola: 'MINA'
}
})
3.2 página de configuración json (nombre de la página .json)
Cada página también se puede utilizar para configurar el rendimiento ventana de archivo .json esta página.
página de configuración es mucho más simple que la configuración global app.json, acaba de establecer la ventana de contenido de elementos de configuración app.json, elementos de configuración de la página se cubren la misma configuración app.json elementos en la ventana.
.json página se puede configurar los elementos de configuración únicamente relacionados con ventanas para determinar el rendimiento de la ventana de esta página, no hay necesidad de escribir la ventana clave.
Resumen: Cada .json página (configuración de la página), de hecho, en la ventana de elementos de configuración app.json hereda de sobreescritura
Aplicación: app.json configurado para permitir que el desplegable refrescar, pero algunas páginas no necesitan, a continuación, puede volver a escribir desactivado en el nombre de la página en .json. Otro ejemplo es el título de cada página, pero también tiene que ser reescrito.
{
"NavigationBarBackgroundColor": "# ffffff",
"NavigationBarTextStyle": "negro",
"NavigationBarTitleText": "funciones de interfaz micro-canal demo"
"BackgroundColor": "# eeeeee",
"BackgroundTextStyle": "luz"
}
Todo app.json los elementos de configuración de la ventana en el nombre de la página en .json todo sea de sobrescritos,
pero la configuración nombre página .json tiene sus propias características es app.json configuración global que no es pequeña.
Propiedad Tipo predeterminado Descripción
disableScroll Boolean false true entonces toda la página no puede desplazarse hacia arriba y hacia abajo;
sólo es válido en page.json, no se puede establecer esto en app.json en.
Ver capa (.wxml nombre de la página y el nombre de la página .wxss) 3.3 páginas
WXML (Weixin Markup Language) es un marco diseñado lenguaje de marcado, en combinación con el componente de base, el sistema de eventos se puede construir la estructura de la página.
Los datos de unión
<! - wxml -> < vista > {{mensaje}} </ vista >
// page.js
Página({
Datos: {
mensaje: 'Hola MINA!'
}
})
lista de renderización
<! - wxml -> < vista WX: a = "{{array}}" > {{elemento}} </ vista >
// page.js
Página({
Datos: {
array: [1, 2, 3, 4, 5]
}
})
condiciones de renderizado
<! - wxml -> < vista WX: Si = "{{vista == 'WEBVIEW'}}" > WEBVIEW </ vista > < vista WX: Elif = "{{vista == 'APP'}}" > APP </ vista > < vista WX: else = "{{vista == 'MINA'}}" > MINA </ vista >
// page.js
Página({
Datos: {
ver: 'MINA'
}
})
Las plantillas personalizadas
WXML proporcionar una plantilla (plantilla), entonces puede llamar en diferentes lugares de las plantillas definidas fragmento de código.
<- - páginas / artículo / item.wxml!>
< plantilla de nombre = "msgItem" > < vista > < texto > {{index}}: {{mensaje}} </ texto > < texto > Tiempo: {{ hora}} </ texto > </ ver > </ plantilla >
El uso de plantillas
Es el uso de la propiedad, el uso de una declaración de plantilla necesario plantilla y luego pasar los datos necesarios, tales como:
<! - páginas / index / index.wxml ->
< importación src = "../ artículo / item.wxml" /> < plantilla es = "" msgItem datos = "{{...}} tema" / >
<! - páginas / index / index.js ->
Página ({
Datos: {
articulo: {
índice: 0,
msg: 'esto es una plantilla',
tiempo: '09/15/2016'
}
}
})
Plantilla alcance
Plantilla tiene su propio alcance, sólo se pueden utilizar los datos, así como archivo de definición de plantilla de datos de entrada definidos en la <wxs /> módulo.
3.4 WXS
(Weixin Script) es un pequeño programa de lenguaje de script, combinado con WXML, se puede construir la estructura de la página.
WXS y JavaScript es un lenguaje diferente, tienen su propia sintaxis, y JavaScript no son consistentes.
4. Bajo el directorio raíz project.config.json
1) El archivo de configuración de proyecto o archivo de configuración llamado proyecto IDE
En las "micro-letras herramientas de desarrollo" para hacer cualquier configuración se escribe en el archivo.
2) Escenario:
Por lo general, cuando se utiliza una herramienta de desarrollo IDE, que va a hacer algo por su propia configuración de diseño personalizado,
Tal como la interfaz de color, la configuración del compilador, etc., al cambiar otro equipo para volver a instalar las herramientas, usted tiene que ser reconfigurado.
3) La solución: es este archivos de configuración del proyecto IDE project.config.json
Al volver a instalar la herramienta o el trabajo para el equipo, siempre y cuando se carga el mismo paquete de código del proyecto,
Herramientas de Desarrollo ayudarán a que regrese automáticamente a la configuración personalizada de las veces cuando se desarrolla el proyecto,
Que incluirá el editor de colores, el código se comprime automáticamente al cargar una serie de opciones, etc.
4). La idea
Una vez dicho esto, cada proyecto se puede personalizar conjunto de su configuración IDE favorito
5. Un programa de la biblioteca compartida lógica (util directorio)
Este directorio puede personalizar el nombre
función pública js archivos, cada página de las páginas utilizando la exposición a modo de module.exports
Cada página no necesita escribir código Js duplicado.