¿Qué es un applet?
"No es necesario descargar", "Al alcance de la mano", "Solo usar y listo", no es necesario descargar e instalar, no es necesario preocuparse por instalar demasiadas aplicaciones; en otras palabras, los miniprogramas son todo tipo de aplicaciones móviles que son parásitos en WeChat, no es necesario descargarlos, no ocupa más memoria del teléfono móvil, puede cerrarlo cuando se agote, no es necesario eliminarlo.
Ventajas de los miniprogramas
- Plataforma cerrada, fácil de empezar
- Operación multiplataforma
- Fácil de usar
Página del mini programa
- js: lógica de la página
- json: configuración de página
- wxml: estructura de la página == HTML
- wxss: estilo de página == CSS
Unidad de mini programa
- Departamento en cuestión
- pt resolución lógica (unidad visual, relacionada con el tamaño de la pantalla)
- px resolución física (píxeles)
- ppi: píxeles por pulgada
- Relación de conversión de unidades de mini programa
- 1px = 1rpx = 0.5pt en iphone6 (rpx se convertirá en diferentes dispositivos, pero px no);
Configuración de la barra de navegación
- dentro de app.json
{
"window": {
"navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色，
"navigationBarTextStyle": "black",//导航栏标题颜色
"navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
"backgroundColor": "#eeeeee", //tab 的背景色，仅支持十六进制颜色
"backgroundTextStyle": "light"//下拉 loading 的样式，仅支持 dark / light
}
}
//页面添加导航栏
"pages":[
//哪个放在第一位就默认先显示哪个
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
{
//首页在第一位 排序会把首页放在第一位
"pagePath": "pages/index/index",
"text": "首页"
}，
"list": [
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
Aplicación de plantilla
- wxml
<template name='a'>
<view>
12
我的摸板
</view>
</template>
<view>
azzzaaaaa
</view>
在templates 里面创建一个a.wxml 在引入到 自己需要的文件中
<import src="../templates/a.wxml"></import>
<template is="a"></template>
<!-- 摸板之外的显示 -->
<include src="../templates/a.wxml"></include>
Crea una nueva pagina
- App.json
agrega un usuario a las páginas y encontrará que habrá un archivo de usuario adicional en la carpeta izquierda, que incluye (user.js, user.wxml, user.wxss, user.json)
Solicitud de datos de red
wx.request({
url: 'https://jsonplaceholder.typicode.com/todos/2',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
Salto de ruta
- wx.switchTap: vaya a la página tabBar y cierre todas las demás páginas que no sean tabBar
- wx.navigateTo: Mantén la página actual y salta a una página en la aplicación. Pero no puede saltar a la página de la barra de pestañas. Utilice wx.navigateBack para volver a la página original. La pila de páginas del subprograma tiene hasta diez niveles.
- wx.redirectTo: cierra la página actual y salta a una página de la aplicación. Pero no está permitido saltar a la página de la barra de pestañas.
- wx.reLaunch: cierra todas las páginas y abre una página en la aplicación
Componente personalizado
- Cree un componente personalizado
Busque los componentes de la carpeta y cree un nombre de carpeta, haga clic derecho y haga clic en Componente, y luego escriba un nombre a voluntad, automáticamente generará json, wxss, wxml, js - Utilice componentes personalizados
para completar los archivos requeridos
需要显示的wxml文件夹 中的json文件
{
"usingComponents": {
"my-component": "/components/my-componnets/index" //
} | |
} | |
名字 可随意起 路径
需要显示wxml文件
<view>
<my-component></my-component>
</view>
Transferencia de parámetros de componentes
Los métodos básicos de comunicación entre componentes son los siguientes.
- Enlace de datos WXML: se utiliza para establecer datos del componente principal en la propiedad especificada del componente secundario
- Evento: se utiliza para que el componente secundario pase datos al componente principal, puede pasar cualquier dato.
- Si los dos métodos anteriores no son suficientes para satisfacer las necesidades, el componente principal también puede obtener el objeto de instancia del componente secundario a través del método this.selectComponent, de modo que pueda acceder directamente a los datos y métodos del componente.
Enlace de datos WXML
显示的wxml
<view>
<my-component myname='aaa'></my-component>
</view>
组件wxml文件
<text>my-componnets/index.wxml</text>
{
{
myname}}
组件js文件
/*
* 组件的属性列表
*/
properties: {
myname: {
type: "string",
value: "默认值"
observer: (newValue, oldValue）=> {
console.log(newValue, oldValue)
}
}
},
evento
显示的wxml
<view>
<my-component myname='aaa' bind:myevent = 'myevent'></my-component>
//监听 myevent事件
</view>
显示wxml文件夹的js
Page({
myevent(e) {
console.log(e。detail) //参数
},
}
组件wxml
<button bindtap="changValue">点击</button>
子组件js
methods: {
changValue() {
this.triggerEvent("myevent", "参数")
}
}
ranura de ranura
- Ranura anónima
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
- Tragamonedas con nombre
- El componente js
puede contener nodos de ranura en el wxml del componente, que se utiliza para llevar la estructura wxml proporcionada por el usuario del componente.
De forma predeterminada, solo puede haber una ranura en el wxml de un componente. Cuando necesite usar múltiples ranuras, puede declarar habilitarlo en el componente js.
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
/* ... */ },
methods: {
/* ... */ }
})
- En este momento, se pueden usar múltiples ranuras en el wxml de este componente, distinguidas por diferentes nombres.
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<slot name="after"></slot>
</view>
- Cuando esté en uso, use el atributo de ranura para insertar nodos en diferentes ranuras.
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view