subprograma WeChat
Etiqueta
<view></view> // div
<scroll-view scroll-x></scroll-view> // 可滑动的视图标签
// scroll-x里面元素的滑动方向
<image></image> // img
<input type="text" ></input> // input
archivo app.json
app.json es el subprograma actual 全局配置, incluidas todas las rutas de página, la apariencia de la ventana, el rendimiento de la interfaz, la pestaña inferior, etc. del subprograma.
configuración app.json en el proyecto
① pagesSe utiliza para registrar la ruta de todas las páginas del subprograma actual;
La ruta interior es la primera ruta por defecto es la página de inicio
② window: Defina globalmente el color de fondo, el color del texto, etc. de todas las páginas del applet;
③ style: Defina globalmente la versión de estilo utilizada por los componentes del subprograma
④ sitemapLocation: se utiliza para indicar la ubicación de sitemap.json
¿Qué es WXML?
WXML (WeXin Markup Language) es un conjunto de diseño de marco de programa pequeño 标签语言，用来构建小程序页面的结构, y su función es similar a HTML en el desarrollo web.
La diferencia entre WXML y HTML
① El nombre de la etiqueta es diferente
HTML (div,span,img,a)
WXML (vista, texto, imagen, navegador)
② Diferentes nodos de atributos
<a href="#">超链接</a>
<navigator url=""></navigator>
③ Proporciona una sintaxis de plantilla similar a la de Vue
Enlace de datos, renderizado de listas, renderizado condicional
La diferencia entre WXSS y CSS
① Unidad de dimensión rpx agregada
En css, la conversión de unidades de píxeles debe realizarse manualmente, como rem
WXSS admite la nueva unidad de tamaño rpx en la capa inferior, y el subprograma la convertirá automáticamente en pantallas de diferentes tamaños
② Proporciona estilos globales y estilos locales
app.wxss en el directorio raíz del proyecto actuará en todas las páginas del subprograma
El estilo .wxss de una página parcial solo es válido para la página actual
③ WXSS solo admite algunos selectores CSS
.clase y #ids
elemento
Selector de unión, selector de descendientes
Selectores de pseudo-clase como ::after y ::before
Clasificación de archivos applet.js
Los archivos js del applet se dividen en tres categorías, a saber:
① app.js
Sí 整个小程序项目的入口文件, App()函数todo el applet se inicia con
② El archivo .js de la página
Sí 页面的入口文件, Page()函数cree y ejecute la página llamando
③ Archivos .js ordinarios
Sí 普通的功能模块文件, se usa para envolver 公共的函数或属性para uso de página
componentes
Clasificación de los componentes del applet
Los componentes del applet también son proporcionados por el entorno host.
① Ver contenedor, ② Contenido básico, ③ Componente de formulario, ④ Componente de navegación, ⑤ Componente de medios, ⑥ Componente de mapa, ⑦ Componente de lienzo, ⑧ Capacidad de desarrollo, ⑨ Acceso sin barreras
Componentes de clase de contenedor de vista de uso común
1, ver
① Área de visualización normal;
② Similar a div en HTML, es un elemento a nivel de bloque;
③ Comúnmente utilizado para lograr el efecto de diseño de la página
2, vista de desplazamiento
① Área de vista desplazable;
② Comúnmente utilizado para lograr el efecto de lista de desplazamiento
3, swiper 和 swiper-item
① Componente de contenedor de carrusel y componente de elemento de carrusel
| Atributos | tipo | valores predeterminados | ilustrar |
|---|---|---|---|
| puntos indicadores | booleano | FALSO | Ya sea para mostrar los puntos indicadores del panel |
| indicador-color | color | rgba(0,0,0,.3) | color del punto de referencia |
| indicatoe-active-color | color | #000000 | El color del punto de referencia actualmente seleccionado |
| auto-reproducción | booleano | FALSO | Ya sea para cambiar automáticamente |
| intervalo | número | 5000 | Intervalo de tiempo de conmutación automática |
| circular | booleano | FALSO | Ya sea para usar deslizamiento conjunto |
Componentes de contenido básico de uso común
1, texto
① Componente de texto
② Similar a la etiqueta span en HTML, es un elemento en línea
Mantenga presionado el efecto de copia para usar selectablelos atributos de la etiqueta de texto
```
2, texto enriquecido
① Texto enriquecido zujian
② Admite la representación de cadenas HTML en estructuras WXML
nodes El nodo de atributo del componente de texto enriquecido , que HTMLrepresenta la cadena como la estructura de interfaz de usuario correspondiente
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
Otros componentes comunes
1, botón
① Componente de botón
② La función es más rica que el botón de botón en HTML
③ Varias funciones proporcionadas por WeChat (servicio al cliente, reenvío, obtención de autorización de usuario, obtención de información de usuario, etc.) se pueden llamar a través del atributo de tipo abierto
| Atributos | valor de atributo |
|---|---|
| tipo (tipo de botón) | primario (botón de color principal), advertir (botón de advertencia) |
| tamaño (tamaño del botón) | mini (botón de tamaño pequeño) |
| liso (botón hueco) | verdadero |
2, imagen
① Componente de imagen
② El componente de la imagen tiene un ancho predeterminado de aproximadamente 300 px y una altura de aproximadamente 240 px
| valor de modo | ilustrar |
|---|---|
| escalar para llenar | (Predeterminado) modo de escala, 不保持纵横比缩放图片, para que el ancho y el alto de la imagen se estiren por completo para填满image元素 |
| aspectoFit | modo de escala, 保持纵横比缩放图片，使图片的长边能完全显示出来. Es decir, se muestra la imagen completa. |
| relleno de aspecto | modo de escala, 保持纵横比缩放图片，只保证图片的短边能完全显示出来. Es decir, la imagen generalmente solo está completa en la dirección horizontal o vertical, y la intercepción ocurrirá en la otra dirección. |
| anchoFijar | Modo de escala, 宽度不变，高度自动变化mantiene la relación de aspecto de la imagen original sin cambios |
| altura Fijar | Modo de escala, 高度不变，宽度自动变化mantiene la relación de aspecto de la imagen original sin cambios |
3, navegador
① Componentes de navegación de página
② Similar a un enlace en HTML
Mini entorno de alojamiento de programas-API
Tres categorías de Mini Program API
1. Monitoreo de eventos
① Características: onempezar con监听某些事件的触发
Ejemplo: escucha de eventos de cambio de tamaño de ventana
wx.onWindowResize(function callback);
2. API síncrona
Características:
① SyncLas API que terminan en son API sincrónicas
② El resultado de la ejecución de la API sincrónica se puede obtener directamente a través del valor de retorno de la función. Si se produce el error de ejecución, se lanzará una excepción.
Ejemplo: escribir contenido en el almacenamiento local
wx.setStorageSync("key","value");
3. API asíncrona
Características: similar a las funciones en jQuery $.ajax(options), debe recibir los resultados de la llamada a través de éxito, falla y finalización
Ejemplo: envíe una solicitud de red y reciba datos a través de la función de devolución de llamada exitosa
wx.request()
Caché de datosAlmacenamiento
Características:
① Almacene los datos en la clave especificada en el caché local;
②El ciclo de vida es consistente con el propio applet, a menos que el usuario elimine activamente o se borre automáticamente después de un cierto período de tiempo, de lo contrario, los datos siempre existirán;
③El límite de almacenamiento de datos es de 10 MB
La diferencia entre síncrono y asíncrono:
① El método de sincronización bloqueará la tarea actual hasta que regrese el método de sincronización;
②Los métodos asincrónicos no bloquearán la tarea actual
Almacenamiento de datos
asincrónico:wx.setStorage()
Sincronizar:wx.setStorageSync()
recuperar datos
Características:
asincrónico:wx.getStorage()
Sincronizar;wx.getStorageSync()
Vaciar el caché
asincrónico:wx.clearStorage()
Sincronizar:wx.clearStorageSync()
Eliminar caché especificado
asincrónico:wx.removeStorage()
Sincronizar:wx.removeStorageSync()
función del ciclo de vida
Siete funciones del ciclo de vida de los applets:
1. página del monitor onLoad que carga la función onLoad: una página solo se llamará una vez, y el parámetro de consulta llamado por la página actual se puede obtener en onLoad. Ejemplo: onLoad:función(opciones){}
2. onReady monitorea la función onReady cuando se completa la representación inicial de la página: una página solo se llamará una vez, lo que indica que la página se ha preparado y puede interactuar con la capa de vista. Ejemplo: onReady:función(){}
3. onShow La página de seguimiento muestra la función onShow: se llamará una vez cada vez que se abra la página. Ejemplo: onShow:función(){}
4. La página del monitor OnHide oculta la función onHide: se llamará cuando se cambie la pestaña de navegación o la pestaña inferior. Ejemplo: onHide:función(){}
5. página del monitor onUnload cargando la función onUnload: se llama cuando se redirige a o navega hacia atrás. Ejemplo: onDescargar:función(){}
6. onlaunch monitor applet inicialización función onlaunch: cuando se inicializa el applet, onLaunch se activará (solo una vez globalmente) Ejemplo: onLaunch:function () {},
7. onError función de monitoreo de errores onError: cuando ocurre un error de script en el applet o falla la llamada a la API, onError se activará con información de error. Ejemplo: onError:function () {}
Sintaxis de plantilla WXML
representación condicional
1.wx:si
Úselo wx:id="{
{condition}}"para determinar si el código necesita ser renderizado
<view wx:if="{
{condition}}">true</view>
También puede usar wx:elify wx:elsepara agregar otro juicio
<view wx:if="{
{type === 1 }}">男</view>
<view wx:if="{
{type === 2 }}">女</view>
<view wx:else>保密</view>
2. Usa wx:if en combinación
Si lo desea 一次性控制多个组件展示与隐藏, puede usar una <block></block>etiqueta para envolver varios componentes y usar el atributo de control wx:if en la etiqueta.
3.oculto
En el applet, use directamente hidden="{
{condition}}"也能控制元素的显示与隐藏:
<view hidden="{
{condition}}">条件为true隐藏，条件为false显示</view>
4.wx: contraste entre if y hidden
correr de manera diferente
① wx:if se 动态创建和移除元素usa para controlar la visualización y ocultación de elementos;
② hidden utiliza 切换样式el método (display:none/block;) para controlar la visualización y ocultación de elementos.
usar
Cuando ① 频繁切换, se recomienda usar oculto
② 控制条件复杂, se recomienda usar wx:if con wx:elif, wx:else para cambiar entre mostrar y ocultar
renderizado de lista
1.wx:para
A través de wx:for, la estructura del componente repetido se puede representar en un bucle de acuerdo con la matriz especificada
<view wx:for="{
{arr}}">
索引是：{
{index}}当前项是：{
{item}}
</view>
2. Especifique el índice y el nombre de la variable del elemento actual
① Utilice nombres de variables que wx:for-indexse puedan especificar当前循环项的索引
② Use nombres de variables que wx:for-itemse puedan especificar当前项
<view wx:for="{
{arr}}" wx:for-index="i" wx:for-item="temp">
索引是：{
{i}} 当前项是：{
{temp}}
</view>
3. El uso de wx:key
De manera similar a la representación de listas de Vue :key, también se recomienda especificar un valor de clave único para los elementos de la lista representada cuando el subprograma implementa la representación de listas 提高渲染的效率.
// data 数据
data:{
list:[
{
id:1,name:'张三'
},
{
id:2,name:'王五'
},
{
id:3,name:'李四'
}
]
}
// wxml结构
<view wx:for="{
{list}}" wx:key="id">{
{item.name}}</>