wechat mini program wiki
1.0.0
WeChat, la principal aplicación de mensajería de China, lanzó algo bastante radical: miniprogramas. Aplicaciones integradas que no requieren descarga ni instalación. ¡Abre, usa, comparte y listo!
Existe un gran debate – y muchos clickbaits – sobre qué tan prácticas son estas aplicaciones... De hecho, el marco proporcionado a los desarrolladores está sólo en una etapa inicial, todavía es limitado y, sinceramente, un poco frustrante. Sin embargo, Tencent está invirtiendo recursos sin precedentes en la adopción de este canal, generando impulso y abriendo oportunidades a los pioneros. Creemos que estos piratas informáticos pueden encontrar resultados rápidos si se atreven a intentarlo.
¿Tiene ideas de servicios que le gustaría implementar en WeChat lo antes posible? ¿Tiene conocimientos básicos de Javascript y quiere experimentar con este marco? ¿Te perdiste en la traducción de Google del documento? ¿Necesita un pequeño impulso para descifrar lo que es posible o no? Hola y bienvenido.
Encontrar el documento oficial no es fácil. De hecho, se requieren muchas pruebas y errores, algo de investigación sobre el código fuente abierto y muchas suposiciones para lograr algo. Te has estado golpeando la cabeza contra la pared. Lo entendemos.
Nuestra misión es ayudar a los emprendedores creativos a crear excelentes productos tecnológicos. Le ayudaremos a dar los pequeños pasos.
El contenido a continuación no es una traducción de la documentación y seguramente quedará obsoleto rápidamente. Es simplemente nuestra contribución para ayudar a cualquiera a comenzar y crear rápidamente un genial miniprograma WeChat. Hazlo ahora.
¿Estás trabajando en un miniprograma? Comuníquese con nosotros si desea compartir su trabajo, conocer a nuestro equipo o pedir ayuda.
Si desea contribuir, puede enviar una solicitud de extracción aquí o llamarnos a shanghai(at)lewagon.com para recibir sugerencias.
Esta pieza original fue escrita por ex alumnos de Le Wagon: Adrien Pelegri (Lote #30) con el apoyo de Thibault Genaitay (Driver China) y Stéphane Delgado (Lote #61).
El proceso de registro es realmente complicado, especialmente si no tienes ninguna experiencia con el fantástico mundo administrativo chino. El proceso de verificación de WeChat será largo. Mantén la calma.
Desde el registro del miniprograma WeChat hasta el lanzamiento del desarrollo, básicamente debes seguir estos pasos:
Aquí hay una lista de materiales que necesitará para registrar un miniprograma como empresa:
Le recomendamos seguir este completo manual en inglés sobre cómo registrarse y crear un proyecto de miniprograma: artículo mediano o consultar esta documentación oficial de WeChat (Última actualización: 02/08/2017).
Un IDE (entorno de desarrollo integrado) es un conjunto de herramientas de programación para escribir una aplicación. Consta de un editor de código, un compilador y un depurador, accesibles a través de una única interfaz gráfica de usuario.
Descargue el IDE de WeChat aquí: Mac, Windows 64, Windows 32
Aquí hay un tutorial rápido para dominar el IDE de WeChat y aprovecharlo al máximo.
Un editor de código con el árbol de tus archivos al costado y un simulador a la izquierda, que muestra la vista previa de tu aplicación. 
Aquí hay una lista completa de botones para realizar tareas cuando estás en desarrollo:
1. Perfil: haga clic en él para cerrar sesión en el IDE. 2. Edición de código 3. Depurar / Inspeccionar: ver más abajo. 4. Información del proyecto: ver más abajo. 5. Compilador: puede resultar útil para compilar la aplicación cuando la actualización automática de la vista no funciona. 
6. Valor de escena 7. Caché 8. Apagar: sal del proyecto en el que estás y avanza hacia otro. 9. Ocultar el simulador 10. Dispositivos: Proporciona una lista de dispositivos para probar la capacidad de respuesta del miniprograma. 11. Puedes trabajar en: wifi, 4G, 3G, 2G. 12. Ocultar arborescencia 13. Administrar tus archivos: busca, agrega y elimina una carpeta o un archivo.
Depurador/Inspector: esta herramienta es una parte importante del IDE, se parece al viejo Chrome DevTools . 
1. Barra superior Red: este panel sirve para depurar problemas de solicitudes y sockets o el rendimiento de carga de la página. Almacenamiento: permite acceder a todos los datos que tienes en tu caché. AppData: se utiliza para mostrar los datos del proyecto actual. Puede editar directamente los datos en el panel y obtener una vista previa de ellos. Wxml: le permite inspeccionar y editar sobre la marcha todos los elementos de su página. Sensor: puede simular la ubicación y el rendimiento del dispositivo móvil para depurar la detección de gravedad.
2. Panel de fuentes El panel de fuentes muestra los archivos de script del proyecto actual.
3. Consola La consola le permitirá saber qué errores tiene en su código al registrar información de diagnóstico e interactuar con javascript en la página como su console.log() que ha colocado y más.
Información del proyecto: esta página es donde encontrará los detalles del proyecto actual como su AppID, información del directorio y más. Al hacer clic en la opción de vista previa, podrá probar el miniprograma directamente en su teléfono después de escanear un código QR.
Nota: Mientras prueba su miniprograma en su teléfono, puede habilitar la herramienta de depuración directamente en su dispositivo.
Esta sección presentará la estructura del "inicio rápido" proporcionado por WeChat (repetitivo) y los fundamentos que necesita para cumplir con este marco.
Descargue WeChat quickstart.zip.
Arborescencia de inicio rápido:
.
├── aplicación.js
├── aplicación.json
├── aplicación.wxss
├── páginas
│ ├── índice
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── índice.wxml
│ │ └── índice.wxss
│ └── registros
│ ├── registros.js
│ ├── registros.json
│ ├── registros.wxml
│ └── registros.wxss
└── utilidades
└── util.js
La página de índice de este modelo muestra una página de bienvenida con la información del perfil de usuario actual. Un clic en su avatar lo redirigirá a una nueva página que muestra los registros actuales del miniprograma.
Los miniprogramas de WeChat comienzan con archivos de "aplicación" (consulte la captura de pantalla a continuación). Estos archivos son el directorio raíz del miniprograma y, por lo tanto, la entrada de su miniprograma. (Aquí está la documentación oficial de WeChat).
app.js es el código de script, la lógica global de su miniprograma. Puede configurar y manipular las funciones del ciclo de vida de su MP, declarar variables globales o llamar a una API.
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json es la configuración global del miniprograma general. Puede configurar la ruta de la página MP (miniprograma), el estilo de la ventana MP, establecer el tiempo de espera de la red y la configuración de depuración.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}Nota: No se permiten comentarios en el archivo app.json .
app.wxss es la hoja de estilo global del miniprograma. Debes declarar reglas de estilo comunes aquí.
Las dos páginas del inicio rápido de WeChat son:
La carpeta Páginas es donde tienes o creas las páginas del miniprograma. Cada página que cree debe contener dos archivos:
Puede agregar dos archivos más en cada página que cree:
Archivo .json para configuración de página.
Archivo .wxss para la hoja de estilo de su interfaz.
Regla: Cada página de su miniprograma puede estar compuesta por cuatro extensiones de archivo diferentes (js ; json ; wxml ; wxss) pero debe tener el mismo nombre.
Más detalles: una página nueva siempre contendrá un archivo .js y un archivo .wxml como mínimo. La extensión de archivo .json se usa en caso de que desee anular la configuración de la ventana en esta página en particular. Agregue .wxss si desea agregar una hoja de estilo a su página.
Veamos qué sucede en cada página del proyecto de inicio rápido.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )Comentarios de fragmentos:
Page() más adelante para recopilar información del usuario.Page() y establece data: para vincular datos dinámicamente a la vista.Tapped redirige al usuario actual a su página de registros.onLoad obtiene información del usuario y actualiza los datos de userinfo . Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )Comentarios de fragmentos:
formatTime más adelante.Page() y establece data: .onLoad recupera los registros de usuario actuales del caché wx.getStorageSync('logs') . Luego, renderice los registros en formatTime que proporciona el requisito de util.js. Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}Nota:
En Utils se almacenan bibliotecas importadas que puede necesitar en otro lugar (en nuestro ejemplo, se requiere util.js en log.js). En el fragmento de código anterior, la función formatTime está definida en util.js para mostrar correctamente la fecha de sus registros.
Hasta ahora te darás cuenta de que tendrás dos capas en cada página:
Capa lógica (.js): procesa los datos y los envía a la capa de vista, mientras recibe eventos activados desde la capa de vista.
Capa de vista (.wxml/.wxss): muestra los datos procesados por la capa lógica en una vista y envía los eventos de la capa de vista a la capa lógica.
Podemos dividir el ciclo de vida de un miniprograma en dos ciclos, el ciclo de aplicación y el ciclo de página. El ciclo de vida App() es el punto de inicio y finalización del miniprograma, mientras que el ciclo de vida Page() se activa cuando los usuarios navegan por el miniprograma.
La función App() se utiliza para registrar un miniprograma. Toma un objeto como parámetro que especifica las funciones del ciclo de vida de un MP.
Comentarios:
onLaunch e inicializa el MP.onShow .onHide se activa cuando el usuario actual sale del miniprograma. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) El marco WeChat ofrece una función global llamada getApp() que es una instancia de App() .
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data La función getApp() puede ser útil por la sencilla razón de que no se puede definir la función App() dentro de una función Page() . Para acceder a la instancia de la aplicación, debe llamar a la función getApp() .
La función Page() se utiliza para registrar una página. Acepta un objeto como parámetro, que especifica los datos iniciales de la página, las funciones del ciclo de vida, el controlador de eventos, etc.
Comentarios:
onLoad .onShow .onShow llama onReady para representar la vista.onShow representa directamente una vista.onHide se activa cuando el miniprograma salta a otra página.onUnload se llama cuando sale de una página usando wx.redirectTo() y wx.navigateBack() . O cuando se reinicia la página actual, wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
Cuando se completa el ciclo de vida de la App() , la página se carga llamando onLoad por primera vez y solo la llamará una vez.
Cuando el miniprograma se ejecuta desde el fondo (ciclo de vida de la aplicación) al primer plano (ciclo de vida de la página), primero llama a la función App() onShow y luego llama a la función Page() onShow cuando cambia al primer plano.
Recomendaciones de WeChat:
App() no se puede reutilizar y debe registrarse una vez en app.js.onLaunch cuando la página getCurrentPages() aún no se haya generado.getApp() puede obtener una instancia de App() pero las funciones del ciclo de vida no intentan llamar a las funciones App() . La configuración de su miniprograma es simple y está diseñada para ahorrarle tiempo y frustración cuando tiene necesidades de personalización.
WeChat divide la configuración de app.json en cinco partes:
En esta parte desglosaremos este ejemplo completo de configuración de app.json .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} La función pages en app.json es definir todas las rutas de su miniprograma. La configuración de este elemento es obligatoria y requiere una serie de cadenas . Cada subcarpeta y archivos dentro de la carpeta de páginas principales corresponde a una ruta de enrutamiento .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} Consejo: cada vez que agrega una ruta a "pages" , el IDE creará automáticamente la carpeta y los archivos que corresponden a la ruta que acaba de crear.
El marco WeChat ofrece varias lógicas de enrutamiento:
Descripción del modo de enrutamiento:
Inicialización: una vez que se inicia el miniprograma, la primera página se carga mediante las funciones onLoad y onShow .
Abrir una página nueva: abrir una página nueva oculta la página actual y salta a otra usando wx.navigateTo . Detrás de escena, la primera página quedará oculta mediante la llamada de la función onHide y saltará a la otra página llamando a onLoad y onShow . 
Redirección de página: cierre la página actual llamando a onUnload y salte a una página dentro de la aplicación usando wx.redirectTo , a la que llama las funciones onLoad y onShow .
Retorno de página: onUnload la página actual, llama a la función onLoad y luego muestra la página de destino llamando onShow .
Recargando, wx.reLaunch : cierra todas las páginas y recarga la página actual. * No funciona en ciertos dispositivos Android.
Cambiar pestañas, wx.switchTab : salta de una página de tabBar a otra y cierra u oculta todas las demás páginas que no son de tabBar usando onUnload, onHide y onShow . Descubra todos los escenarios posibles para el cambio de pestañas.
Cambiar pestañas, restricciones de navegación:
Recomendaciones de WeChat:
navigateTo , redirectTo solo puede abrir una página que no sea TabBar. - switchTab solo puede abrir y mostrar la página tabBar. - reLaunch se puede utilizar para todas las páginas. getCurrentPages() : esta función se utiliza para obtener la instancia de la pila de páginas actual. Se proporciona como una matriz en el orden de la pila de páginas. El primer elemento de la matriz es la primera página y el último elemento la página actual.
tabBar como sugiere el nombre, es el elemento que configura la barra de pestañas superior o inferior. tabBar es una matriz que admite un mínimo de 2 y un máximo de 5 pestañas.
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}Indicación de atributos:
El uso de la clave list tabBar requiere un objeto en cada elemento de la matriz.
Los valores de los atributos List son los siguientes:
Descripción de los atributos de TabBar: 
Recomendaciones de WeChat:
tabBar en la parte superior no podía mostrar iconos.tabBar inferior es 40 kb, 81 px * 81 px.El elemento de ventana se utiliza para configurar el título del miniprograma y el estilo de ventana común.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}Descripción de los atributos de la ventana:
| Atributo | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
| barra de navegaciónColor de fondo | Color hexadecimal | #000000 | Color de fondo de la barra de navegación |
| barra de navegaciónEstiloTexto | Cadena | white | Color del título de la barra de navegación, white o black |
| barra de navegaciónTítuloTexto | Cadena | Título de la barra de navegación | |
| Estilo de navegación | Cadena | default | Estilo de la barra de navegación, default o custom . Utilice custom para personalizar el estilo de la barra de navegación. |
| fondoColor | Color hexadecimal | #ffffff | Color de fondo de la aplicación. Ej: el color de fondo que ve al actualizar, no afecta el color de los elementos <page> . |
| fondoTextStyle | Cadena | dark | Tire para actualizar el estilo del texto, dark o light |
| fondoColorarriba | Cadena | #ffffff | Color de fondo de la parte superior de la ventana. Sólo compatible con iOS |
| fondoColorInferior | Cadena | #ffffff | Color de fondo de la parte inferior de la ventana. Sólo compatible con iOS |
| habilitarPullDownRefresh | booleano | false | Habilite o deshabilite la extracción para actualizar toda la aplicación. |
| enReachBottomDistance | Número | 50 | Establezca la distancia desde la parte inferior de la página a la que se debe activar la devolución de llamada onReachBottom() . |
| orientación de la página | Cadena | portrait | Establecer soporte de rotación de pantalla. Soporta auto , portrait y landscape . |
La orientación predeterminada de la aplicación se puede configurar usando pageOrientation en la window del archivo de configuración app.json . Este atributo admite 3 valores:
auto para permitir que el mini programa funcione tanto en modo vertical como horizontal.portrait para forzar que el mini programa se muestre solo en modo verticallandscape para forzar que el mini programa se muestre solo en modo horizontal "enablePullDownRefresh": true debe configurarse en app.json global como se indica arriba y luego puede llamar onPullDownRefresh() en las páginas del miniprograma.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat ofrece la posibilidad de cambiar el título de la barra de navegación superior dentro de cada página.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )El tiempo de espera de la red se puede proporcionar en una variedad de solicitudes de red. Aquí está el enlace a la documentación de WeChat si desea ir más allá.
Aquí hay un enlace a la documentación de WeChat.
WXML es un lenguaje de marcado WeChat similar a HTML. Combina una biblioteca básica de componentes y un sistema de eventos para crear páginas dinámicas.
El sistema de eventos WeChat se comporta como eventos clásicos de Javascript que manejan respuestas lógicas a la capa de vista.
La siguiente tabla enumera las diferencias significativas que enfrentará en el desarrollo entre WXML y HTML:
Más explicaciones sobre <block> :
<block> no es un componente , es solo un elemento de empaquetado , no realizará ninguna representación en la página y solo aceptará propiedades de control .
Nota: Todos los componentes y atributos están en minúsculas.
El marco del miniprograma no permite a los desarrolladores utilizar el DOM para controlar sus elementos WXML. En su lugar, actualizará su capa de vista (archivo .wxml) mediante el método de enlace de datos:
Para cumplir con los requisitos de WeChat, el atributo data debe inicializarse en formato JSON dentro de la función Page() . La técnica de enlace de datos permite actualizar datos dinámicamente dentro de la capa de vista.
Una buena práctica es inicializar data en la parte superior de la función Page() .
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} Los data: que se pasan a la capa de vista se toman de los atributos de datos en la función Page() correspondiente.
Sintaxis de enlace de datos: el enlace de datos utiliza la sintaxis Moustache (llaves dobles) para envolver variables. Esta sintaxis es un análisis de motor de plantillas sin lógica. En resumen, ¡es muy conveniente y fácil de usar!
WeChat ofrece muchas posibilidades con respecto al uso de enlace de datos. Tiene la oportunidad de utilizar el enlace de datos en atributos de componentes, propiedades, operaciones de cadenas, operaciones aritméticas, rutas de datos y matrices.
La propiedad de control wx:for vincula una matriz de su capa lógica (archivo .js), la recorre y asigna los datos.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) De manera similar a <view wx:for> puede usar <block wx:for> para representar un bloque de varias líneas . (Ver bloque en la tabla WXML anterior).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >Para obtener más detalles sobre el código anterior, consulte este repositorio de Github.
Recursos adicionales:
Similar a wx:for , wx:if se usa para definir una declaración condicional y determinar si el bloque debe representarse o no.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) Si desea mostrar más de una etiqueta dentro de su bloque de declaración condicional, puede usar <block wx:if> .
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > Profundice más en la documentación wx:if WeChat.
Las plantillas permiten definir fragmentos de código que desea reutilizar varias veces en diferentes archivos de su miniprograma.
El elemento de plantilla WXML tiene su propio alcance y solo puede usar datos para pasar.
Primero, para declarar una plantilla es necesario definir su nombre.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> Más adelante, si desea llamar a una plantilla dentro del mismo archivo, utilice el atributo is y el nombre de la plantilla como valor para declarar la plantilla requerida. Y no olvide pasar datos a la plantilla usando el atributo data .
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) Para declarar una plantilla ya definida en un archivo nuevo, primero debe importarla.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />Más detalles sobre la documentación de WeChat aquí.
Además de las funciones de inicialización de datos y ciclo de vida, el marco permite definir funciones de manejo de eventos.
El elemento WXML (controlador de eventos) desencadena el evento y la capa lógica vincula el controlador de eventos para recibir un objeto de evento como parámetro.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : esta función actualiza los datos dentro de la capa lógica que luego se enviarán a la capa de vista. La función setData() recibe un objeto como parámetro y actualiza el valor clave utilizando this.data como ruta de datos.
Hay muchos tipos de eventos vinculantes, la mayoría de los componentes tienen su propia definición de evento vinculante.
Eventos de enlace de componentes:
bindsubmit para un formulario.bindinput para una entrada.bindscroll para una vista de desplazamiento. Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )Eventos vinculantes clásicos:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) Los dos eventos de enlace comunes utilizados son bind+event_type y catch+event_type . El evento catch es el que previene los eventos burbujeantes.
Concepto de evento burbujeante: para las personas que no utilizan JavaScript, el evento burbujeante se puede definir cuando ocurre un evento en un elemento anidado en otro elemento. Tanto el nodo principal como los elementos anidados se registran como controladores de eventos para ese evento en particular. El nodo principal del elemento anidado debe usar catch+event_type , lo que evitará que el evento se transmita a los elementos ancestros.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )Se utiliza principalmente cuando anida elementos y no desea mostrar el nodo principal del elemento que vincula.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )A continuación se ofrecen consejos prácticos para permitir el intercambio de miniprogramas. WeChat abre dos formas de compartir un miniprograma:
Posibilidad de habilitar el botón de avance dentro del menú desplegable que aparece haciendo clic en la esquina superior derecha ... de la página.
Crea un botón de avance dentro de la página de tu miniprograma. Hace que el proceso de compartir sea más fácil de usar.
En ambas variantes, el marco enviará automáticamente una mini tarjeta de programa con una captura de pantalla de su encabezado MP.
Para habilitar este botón necesitamos usar una función Page() llamada onShareAppMessage .
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,En esta función debe definir un título que se mostrará en la parte superior de la tarjeta de avance y la ruta de la página actual . Si olvida agregar un título, WeChat agregará uno de forma predeterminada (el nombre de su miniprograma).
Restricción: Lo único que puedes definir en este caso es el evento onShareAppMessage . El botón de avance será creado por el propio marco .
Esta característica permite a los desarrolladores crear un botón de avance específico dentro de la página utilizando la propiedad del botón open-type y su valor 'share' .
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > A diferencia del primer caso, tenemos que crear el controlador de eventos que activa la función onShareAppMessage . Esta función llama wx.showShareMenu y pasa withShareTicket como parámetro.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) Nota: Ambas variantes utilizan una función Page() , lo que implica que está compartiendo la página específica donde declara la función.
WeChat tiene como objetivo crear una experiencia de usuario amigable , eficiente y consistente . Para que esto suceda, el equipo de diseño oficial de WeChat proporciona un repositorio WeUI. Esta biblioteca front-end básica (WeUI) es coherente con la experiencia visual nativa de WeChat. WeUI puede entenderse como una biblioteca front-end de WeChat, similar a Bootstrap . Incluye un gran conjunto de componentes como botón, celda, cuadro de diálogo, progreso, brindis, artículo, hoja de acción, ícono y más.
Repositorios útiles de Github:
Descargue el repositorio WeUI localmente a través de npm :
npm install weui-wxss
El código descargado contiene el código fuente de WeUI y un miniprograma de muestra basado en WeUI.
Abramos el ejemplo del miniprograma WeUI en WeChat IDE:
Importe el estilo WeUI en su app.wxss para habilitar el uso del estilo WeUI en su miniprograma:
@import "style/weui.wxss" ;
Para obtener más detalles sobre las pautas de diseño de WeChat, puede encontrar aquí la documentación completa.
WXSS tiene casi todas las características que tiene CSS. La hoja de estilo definida en app.wxss son las reglas de estilo comunes identificadas en cada página. La hoja de estilo definida en una página en particular es un estilo local que actúa solo en la página actual y, por lo tanto, sobrescribe los mismos selectores utilizados en app.wxss . WXSS comparado con CSS tiene dos diferencias principales:
WXSS utiliza rpx (píxel sensible) como unidad. Permite ajustar los píxeles según el ancho de la pantalla. Puedes seguir usando la unidad px clásica (pero no la forma en que WeChat hace las cosas). (1rpx = 0.5px ; 1px = 2rpx)
Para importar una hoja de estilo saliente, utilice la declaración @import seguida de la ruta relativa y un ; al final del comunicado.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;El marco WeChat no puede admitir muchos selectores CSS estándar, como el selector en cascada.
Selectores soportados:
Recomendación de WeChat:
El marco WeChat proporciona a los desarrolladores un gran conjunto de componentes básicos; la lista exhaustiva de componentes se encuentra aquí.
<navigator> es su ancla en html. Se utiliza para enlazar de una página a otra. El atributo más importante del elemento del navegador es open-type .
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >Descripción de los atributos del navegador:
Descripción de los valores de tipo abierto:
El componente selector en la documentación de WeChat se divide en tres selectores, el selector clásico que es el predeterminado, el selector de hora y el selector de fecha .
El caso de uso siguiente se basa en un selector de fechas, pero la lógica sigue siendo la misma para otro selector.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )Atributos del selector de fecha:
Un interruptor es un interruptor visual con dos estados, encendido y apagado.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )Cambiar atributos:
Un brindis es un elemento no modal que se utiliza para mostrar componentes breves y de vencimiento automático para informar a los usuarios.
En el fragmento de código a continuación, falsificamos el envío de un formulario para mostrar cómo funciona y se muestra un brindis.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >En el fragmento de código anterior creamos un botón dinámico con el propósito de enviar un formulario . El botón está animado por una rueda giratoria de carga cuando haces clic en él.
Luego mostramos un brindis utilizando la API wx.showToast para informar a los usuarios.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )Un cuadro modal permite superponer un pequeño elemento sobre una página . El principal beneficio de los cuadros modales es que evitan la necesidad de utilizar ventanas emergentes convencionales o recargas de páginas.
Hay cinco categorías situacionales en las que se utilizan habitualmente cuadros modales:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )Parámetros modales:
El componente map es un componente nativo, tiene una larga lista de atributos, repasaremos los principales. Aquí está el enlace a la documentación de WeChat para obtener más detalles.
lista de atributos map :
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >Consulte la parte de la wiki sobre servicios basados en la ubicación si desea ver los servicios basados en la ubicación que WeChat ofrece a través de la API.
Recomendaciones de WeChat:
wx.getLocation necesita especificar type como gcj02 Esta sección tiene como objetivo explicar los diferentes pasos que debe seguir si desea conservar los datos de su aplicación y recuperar datos en una base de datos. Seleccionamos Leancloud.cn por la simplicidad de su instalación para principiantes.
Primero, un poco de contexto: el siguiente ejemplo se basa en un miniprograma destinado a recopilar comentarios a través de un formulario simple. Este miniprograma conserva los datos recopilados en Leancloud.cn. Explicaremos cómo recuperar y mostrar datos almacenados en la base de datos. Para ilustrar esta segunda sección (obtener datos), creamos una nueva página que muestra todas las reseñas almacenadas en Leancloud.
Aquí está el repositorio Github del proyecto utilizado para crear este tutorial.
Especificaciones:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >Cuando la estructura del formulario se crea como se indica arriba, a continuación debemos crear el evento que se activa con el envío del formulario.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) Almacenamiento local: en la función bindFormSubmit , asignamos las entradas del usuario a variables locales con el fin de probar si podemos recopilar las entradas del usuario del formulario localmente.
Antes de comenzar la instalación, si está en desarrollo, incluya en la lista blanca su nombre de dominio marcando la última casilla de verificación de la interfaz del proyecto dentro de su IDE de WeChat. Para necesidades de depuración específicas, puede seguir este tutorial de Leancloud.
Para comenzar con la configuración de Leancloud, primero cree una cuenta en Leancloud.
Ahora que está listo para la instalación e inicialización de Leancloud en su miniprograma, puede seguir su documentación que le permitirá realizar un proceso de dos pasos:
appId y appKey en su app.js. // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;Si está perdido, consulte el repositorio Github del proyecto.
En primer lugar, cree una nueva carpeta llamada modelo y agregue un archivo form.js a esta carpeta. Asigne un nombre a su archivo de acuerdo con el tipo de objeto que desea conservar, en este caso un formulario. Este paso no es necesario pero permite mantener sus archivos organizados.
Creemos el objeto: en el archivo form.js que acaba de crear, solicite av-weapp-min.js que instaló en util.js y asígnelo a una constante AV . Luego cree una instancia del objeto Form .
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; Ahora que ha creado una instancia del objeto Form , cree el objeto formulario para encapsular datos en la capa lógica (aquí form.js) y redirigir al usuario después de enviar el formulario.
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )Resumen del fragmento de código:
binFormSubmit agregamos permisos que permiten a Leancloud leer y escribir a través del objeto que creamos y queremos persistir.setTimeout que encapsula los datos en el nuevo objeto Form y redirige el usuario cuando se envía el formulario. Nota: setACL(acl) es una propiedad incorporada LeanCloud.
Hasta ahora, todo se hace dentro de su miniprograma, lo que queda por hacer es una proyección de los datos recopilados dentro de su tablero LeanCloud .
Form en este momento.Pruébelo para asegurarse de que los datos recopilados se persistan dentro de su tablero LeanCloud.
Primero déjame recordarte el fondo de esta sección. Queremos mostrar en una nueva página la lista de revisiones que hemos recopilado y persistido en LeanCloud . Supongo que has seguido la primera sección del tutorial (si te lo perdiste, ver arriba).
Especificaciones:
review .Así que creemos una nueva página de revisión y un botón que redirige para revisar la página . ( Consejo: simplemente agregue la ruta de ruta a su App.json , el marco creará la nueva carpeta de página y los archivos por sí solo).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >El siguiente paso es obtener datos almacenados en LeanCloud y los muestra .
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > Arriba creamos un bloque de representación de la lista usando wx:for esa pantalla cada revisión y nombre de la persona que crea la revisión.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )Informe de fragmento de código:
AV que contiene los datos almacenados.forms .En este caso de uso, acabamos de ver cómo almacenar datos que recopilamos localmente a LeanCloud y cómo obtener datos almacenados desde LeanCloud.
Le recomendamos que lea la documentación de LeanCloud o verifique el miniprograma LeanTodo creado por LeanCloud, Repositorio de GitHub.
Cuando esté en producción, debe configurar el nombre de dominio LeanCloud dentro de la plataforma WeChat. Sigue este tutorial de LeanCloud.
Toda la información del usuario a la que tiene acceso a través de wx.getUserInfo :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) WeChat "QuickStart" (WeChat Boilerplate) le brinda una función getUserInfo en el archivo App.js. Como su nombre indica, esta función está destinada a obtener información del usuario . Pasemos esta función paso a paso.
Descripción general:
getUserInfo tiene un parámetro CB , que también es una función.If de la función getUserInfo se pasará si userInfo de globalData no es nulo.userInfo es NULL, la función getUserInfo llama a la interfaz de inicio de sesión. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) Primer caso, el formulario userInfo globalData no es nulo
La declaración de condición IF tiene como objetivo determinar si el argumento CB pasó para obtener getUserInfo es un tipo de función y, si es así, pasará userInfo .
¿Cómo descubren si el parámetro CB es una función?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} Pasemos por esta función onLoad de index.js
onLoad llama a la función getUserInfo en la instancia de la aplicación .userInfo a la información actual del usuario.userInfo actualizado a globalData en el archivo App.js.Segundo caso, UserInfo es nulo
userInfo es la función NULL getUserInfo devuelve la instrucción else que llama a la interfaz de inicio de sesión.getUserInfo se llama y actúa como el bloque if que vimos arriba. Si el usuario actual ya está inicio de sesión, la información del usuario se asigna a globalData a través de la página index.js que llama a la función onLaod . Y luego se aplica la misma lógica.
Los miniprogramas de WeChat tienen un mecanismo de caché en su API. De hecho, cada mini-programa tiene su propio almacenamiento local de caché.
Recordatorio: el almacenamiento de caché se utiliza para almacenar datos que queremos acceder rápidamente. Reduce el tiempo de espera del usuario , ya que la solicitud se cumple con el caché local que está más cerca de los clientes en comparación con el servidor original utilizado para solicitar su DB.
El almacenamiento de caché ofrece dos tipos de métodos para almacenar datos en el caché:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage Build Parameters como un JSON, una clave para especificar la clave y los datos almacenados para especificar el valor clave para almacenar.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync La sintaxis es más simple, los parámetros se pasan directamente. Y puede obtener datos a través de la función de devolución de llamada entrante.
WeChat proporciona tres acciones principales en el caché:
wx.setStorage o wx.setStorageSync .wx.getStorage o wx.getStorageSync .wx.clearStorage o wx.clearStorageSync .wx.removeStorage o wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) Puede llamar a la interfaz de usuario del escáner de código de cliente utilizando la API wx.scanCode . Da acceso directo al escáner WeChat a través de un botón CTA con el objetivo de escanear un código QR.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}WeChat API proporciona un conjunto completo de servicios basados en la ubicación:
wx.chooseLocation para elegir la ubicación que desea mostrar.wx.getLocation para obtener la ubicación actual del usuario.wx.openLocation para mostrar la ubicación en su vista de mapa Buit-In .wx.createMapContext para personalizar su mapa. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} Arriba utilizamos el wx.getLocation para recuperar la posición actual del usuario al obtener su latitud y longitud.
wx.getLocation Detalles más: si un usuario deja el miniprograma pero muestra encima de su chat, el mini-programa puede continuar llamando wx.getLocation y, por lo tanto, obtener la ubicación del usuario continuamente.
Muestre la ubicación actual del usuario en el mapa incorporado de WeChat: wx.openLocation API Call, habilita la apertura de la vista de mapa incorporada de WeChat para mostrar la ubicación que obtuvo de la función listenerBtnGetLocation que creamos anteriormente.
Nota: Llama de la API wx.openLocation , redirige al usuario a una nueva ventana de mapa.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}WeChat Image API ofrece cuatro posibilidades:
wx.chooseImage para elegir una imagen de su álbum o cámara.wx.previewImage para obtener una vista previa de la imagen antes de la carga en la aplicación.wx.getImageInfo para obtener información de imagen (altura, ancho, ruta, src).wx.saveImageToPhotosAlbum para guardar la imagen del mini-programa a su álbum. En el siguiente ejemplo, creamos una función llamada listenerBtnChooseImage con el objetivo de llamar al álbum o cámara de usuarios utilizando wx.chooseImage . Luego estamos utilizando wx.getImageInfo para obtener información de imagen.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )Ahora que tenemos una imagen en la página, guardemos la imagen del miniprograma al álbum de usuarios actual al tocar la imagen.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )WeChat Network API ofrece solicitudes comunes de HTTPS, WebSocket, carga y descarga archivos.
wx.request para realizar una solicitud HTTPS estándar.wx.uploadFile para cargar un archivo al servidor designado.wx.downloadFile para descargar un archivo del servidor designado. 
En el siguiente ejemplo, tenemos una función y un controlador de eventos: addNewPost y onPullDownRefresh respectivamente, como dice su nombre, debería poder agregar una nueva publicación y obtener publicaciones utilizando una llamada wx.request .
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )Ahora que hemos publicado, vamos a obtenerlo y mostrarlo en la capa de vista. Por simplicidad, aprovecharemos OnpuldownRefresh para recargar nuevas publicaciones.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) A lo largo de nuestra ruta de creación de mini-programas, encontramos problemas y preguntas, queremos compartir con usted. Si tuvo algunos problemas que desea compartir, comuníquese con nosotros.
WeChat solo permite la API que tiene una licencia ICP, por lo que puede olvidarse de la mayoría de las API con las que está familiarizado en los países occidentales.
Aquí hay un directorio de API disponibles en China, échale un vistazo.
background-image: propiedad Los resurgidos de imagen no se pueden obtener a través de la imagen de fondo CSS background-image: url(../../images/banner.png); . Sé que es terrible, pero tenemos que lidiar con eso.
Hay dos formas de evitar esta frustración:
Puede usar la background-image: pero no puede usar una ruta realista , debe codificar su imagen en Base64 y luego pasarla a la background-image: url(base64 image); . Aquí hay una herramienta para codificar imágenes en Base64.
O puede usar la etiqueta <image> y tratar las imágenes con el atributo de etiqueta <image> como mode . WeChat tiene 13 modos , 9 son modo de corte y 4 son el modo Zoom . Aquí hay un enlace a la documentación.
RPX significa píxel receptivo , que es la unidad de miniprogramas WeChat. Según la definición oficial, rpx se basa en el ancho de pantalla adaptativa.
De hecho, la unidad RPX se basa en la unidad rem que significa "Root EM" . ¿Por qué no la unidad em ?
La unidad em es relativa al tamaño de la fuente del padre , lo que causa un problema compuesto . La unidad rem es relativa al elemento raíz que contera el problema de compuesto (servicio de dimensionamiento de fuente).
Sin embargo, para volver a la unidad rpx , las ventajas RPX son:
¿Estás trabajando en un miniprograma? Comuníquese con nosotros si desea compartir su trabajo, conozca a nuestra tripulación, ¡solicite ayuda!
Si desea contribuir, puede enviar una solicitud de extracción aquí o darnos un grito en Shanghai (AT) Lewagon.com para sugerencias.
