Este artículo le ofrece algunos problemas relacionados con los miniprogramas WeChat . Principalmente presenta contenido básico, incluidos componentes personalizados, aislamiento de estilos, datos, métodos y atributos, etc., echémosle un vistazo juntos. Espero que sea de ayuda. Todos son útiles. .
1. Componentes personalizados
1.1 Crear componentes
-
En el directorio raíz del proyecto, haga clic derecho y cree componentes -> carpeta de prueba
-
En los componentes recién creados -> carpeta de prueba, haga clic derecho y haga clic en Nuevo componente
-
Escriba el nombre del componente y presione Enter, automáticamente se generarán cuatro archivos correspondientes al componente, siendo los sufijos .js, .json, .wxml y .wxss.
1.2 Componentes de referencia
-
Referencia local: el componente solo se puede utilizar dentro de la página a la que se hace referencia actualmente
-
Referencia global: el componente se puede utilizar en todas las páginas del subprograma
1.3, componentes de referencia locales
La forma de hacer referencia a los componentes en el archivo de configuración .json de la página se denomina referencia local. El código de muestra es el siguiente:
# 在页面的 .json 文件中，引入组件
{
"usingComponents": {
"my-test": "/components/test/test"
}
}
# 在页面的 .wxml 文件中，使用组件
<my-test></my-test>1.4 Componentes de referencia global
La forma de hacer referencia a componentes en el archivo de configuración global app.json se denomina referencia global. El código de muestra es el siguiente:
# 在 app.json 文件中，引入组件
{
"usingComponents": {
"my-test": "/components/test/test"
}
}
1.5 Referencia global versus referencia local
Según la frecuencia de uso y el alcance del componente, elija el método de referencia adecuado:
-
Si un componente se utiliza con frecuencia en varias páginas, se recomienda hacer referencia a él globalmente.
-
El uso de un determinado componente solo se usa en una página específica, se recomienda hacer una referencia parcial
1.6 La diferencia entre componentes y páginas.
En la superficie, los componentes y las páginas se componen de cuatro archivos: .js, .json, .wxml y .wxss. Sin embargo, existen diferencias significativas entre los archivos .js y .json para componentes y páginas:
-
El atributo "componente": verdadero debe declararse en el archivo .json del componente
-
La función Component() se llama en el archivo .js del componente
-
La función del controlador de eventos del componente debe definirse en el nodo de métodos.
2. Aislamiento de estilo
2.1 Aislamiento de estilo de componente
De forma predeterminada, el estilo de un componente personalizado solo tiene efecto en el componente actual y no afectará la estructura de la interfaz de usuario fuera del componente.
Evitar que los estilos externos afecten los estilos internos de los componentes
Evitar que los estilos de componentes destruyan estilos externos
2.2 Notas sobre el aislamiento del estilo de los componentes
Los estilos globales en app.wxss no son válidos para componentes
Solo los selectores de clase tendrán efecto de aislamiento de estilo, los selectores de identificación, los selectores de atributos y los selectores de etiquetas no se ven afectados por el aislamiento de estilo.
Se recomienda utilizar selectores de clases en componentes y páginas que hagan referencia a componentes. No utilice selectores de identificación, atributos y etiquetas.
2.3 Modificar las opciones de aislamiento de estilo del componente.
De forma predeterminada, la función de aislamiento de estilo de los componentes personalizados puede evitar que los estilos internos y externos del componente interfieran entre sí. Pero a veces queremos poder controlar el estilo dentro del componente desde el exterior. En este punto, puede modificar la opción de aislamiento de estilo del componente a través de stylesolation, el uso es el siguiente:
# 在组件的 .js 文件中新增如下配置
Component({
options: {
stylelsolation: 'isolated'
}
})
# 或在组件的 .json 文件中新增如下配置
{
"stylelsolation": "isolated"
}
2.4 Valores opcionales de stylesolation
| Valores opcionales | Valor predeterminado | Descripción |
| aislado | Sí | Indica que el aislamiento de estilo está habilitado | Indica que el aislamiento de estilo está habilitado. Dentro y fuera del componente personalizado, los estilos especificados usando la clase no se afectarán entre sí |
| apply-shared | No | Indica que el estilo wxss de la página afectará al componente personalizado, pero el estilo especificado en el componente personalizado wxss no afectará a la página |
| compartido | No | significa que el estilo wxss de la página afectará al componente personalizado, y el estilo especificado en el componente personalizado wxss también afectará a la página y a otros componentes personalizados que estén configurados como aplicados compartidos o compartidos |
3. Datos, métodos y propiedades.
3.1, datos de datos
En el componente subprograma, se utiliza para la representación de plantillas de componentes y datos privados, que deben definirse en el nodo de datos. El ejemplo es el siguiente:
Component({
<!-- 组件的初始数据 -->
data: {
count: 0
}
})
3.2, datos de métodos
En el componente del subprograma, las funciones de manejo de eventos y los métodos personalizados deben definirse en el nodo de métodos. El código de muestra es el siguiente:
Component({
<!-- 组件的方法列表 -->
methods: {
<!-- 事件处理函数 -->
addCount() {
this.setData({count: this.data.count + 1});
<!-- 通过 this 直接调用自定义方法 -->
this._showCount()
},
<!-- 自定义方法建议以 _ 开头 -->
_showCount() {
wx.showToast({
title: 'count值为：' + this.data.count,
icon: 'none'
})
}
}
})
3.3 propiedades
En el componente del mini programa, las propiedades son las propiedades externas del componente y se utilizan para recibir datos pasados al componente desde el mundo exterior. El código de muestra es el siguiente:
Component({
<!-- 属性定义 -->
properties: {
<!-- 完整定义属性的方式 -->
max: {
type: Number,
value: 10
},
<!-- 简化定义属性的方式 -->
max: Number
}
})
3.4 La diferencia entre datos y propiedades
En los componentes del mini programa, las propiedades y los datos se utilizan de la misma manera: son legibles y escribibles, pero:
-
data prefiere almacenar datos privados del componente
-
Las propiedades tienden más a almacenar datos pasados al componente desde el mundo exterior.
Component({
methods: {
showInfo() {
<!-- 结果为 true，证明 data 数据和 properties 属性本质上是一样的，都是可读可写的 -->
console.log(this.data === this.properties)
}
}
})
3.5 Utilice setData para modificar el valor de las propiedades.
Dado que no existe una diferencia esencial entre datos y propiedades, el valor de la propiedad de propiedades también se puede usar para la representación de la página, o se puede usar setData para reasignar las propiedades en propiedades. El código de muestra es el siguiente:
# 在组建的 .wxml 文件中使用 properties 属性的值
<view>max属性的值为：{
{max}}</view>
Component({
properties: { max: Number },
methods: {
addCount() {
this.setData({ max: this.properties.max + 1 })
}
}
})
4. Oyente de datos
4.1 ¿Qué es un oyente de datos?
Los oyentes de datos se utilizan para escuchar y responder a cambios en cualquier propiedad y campo de datos para realizar operaciones específicas. Su función es similar a la del oyente de vigilancia en vue. En el componente del subprograma, el formato de sintaxis básica del detector de datos es el siguiente:
Component({
observers: {
'字段A, 字段B': function(字段A的心智, 字段B的新值) {
}
}
})4.2 Uso básico del oyente de datos
Component({
data: { n1: 0, n2: 0, sum: 0 },
methods: {
addN1() { sthis.setData({ n1: this.data.n1 + 1 })},
addN2() { sthis.setData({ n2: this.data.n2 + 1 })}
},
observers: {
'n1, n2': function(n1, n2) {
this.setData({sum: n1 + n2})
}
}
})4.3 Monitorear cambios en las propiedades del objeto
# 数据监听器支持监听对象中单个或多个属性的变化，示例代码如下：
Component({
observers: {
'对象.属性A, 对象.属性B': function(属性A的新值, 属性B的心智){}
}
})
# 监听对象中所有属性的变化
Component({
observers: {
'obj.**': function(obj){}
}
})
5. Campos de datos puros
5.1 ¿Qué es un campo de datos puro?
Los campos de datos puros se refieren a aquellos campos de datos que no se utilizan para la representación de la interfaz.
Escenarios de aplicación: por ejemplo, en algunos casos, los campos de ciertos datos no se mostrarán en la interfaz ni se pasarán a otros componentes, sino que solo se usarán dentro del componente actual. Los campos de datos con esta característica son adecuados para configurarlos como campos de datos de almacenamiento.
Beneficios: los campos de datos puros ayudan a mejorar el rendimiento de las actualizaciones de la página
5.2 Normas de uso
En el nodo de opciones del constructor de componentes, especifique pureDataPattern como expresión regular. Los campos cuyos nombres de campo coincidan con esta expresión regular se convertirán en campos de datos puros. El código de muestra es el siguiente:
Component({
options: {
<!-- 指定所有 _ 开头的数据字段为纯数据字段 -->
pureDataPattern: /^_/
},
data: {
a: true, // 普通数据字段
_b: true // 纯数据字段
}
})
6. Ciclo de vida de los componentes
6.1 Todas las funciones del ciclo de vida de los componentes
6.2 Principales funciones del ciclo de vida de los componentes
Entre los componentes del miniprograma, hay tres funciones del ciclo de vida más importantes: creado, adjunto y desconectado. Sus respectivas características son las siguientes:
-
Cuando se acaba de crear la instancia del componente, se activará la función de ciclo de vida creada.
No se puede llamar a setData en este momento
Por lo general, en esta función de ciclo de vida, solo debe usarse para agregar algunos campos de atributos personalizados al componente.
-
Una vez que el componente se inicializa por completo y se ingresa al árbol de nodos de la página, se activará la función de ciclo de vida adjunta.
En este punto, estos datos se han inicializado.
Este ciclo de vida es muy útil, la mayor parte del trabajo de inicialización se puede realizar en este momento.
-
Una vez que el componente abandona el árbol de nodos de la página, se activará la función de ciclo de vida desconectado.
Al salir de una página, se activará la función de ciclo de vida independiente de cada componente personalizado de la página.
Este es un buen momento para hacer algunos trabajos de limpieza.
6.3, nodo de por vida
En el componente del subprograma, la función del ciclo de vida se puede definir directamente en el parámetro de primer nivel del constructor del componente y se puede declarar en el campo de vida útil (esta es la forma recomendada y tiene la máxima prioridad). El código de muestra es el siguiente:
Component({
<!-- 推荐用法 -->
lifetimes: {
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
},
<!-- 以下是旧的定义方式 -->
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
})
6.4 ¿Cuál es el ciclo de vida de la página donde se encuentra el componente?
A veces, el comportamiento de un componente personalizado depende de cambios en el estado de la página, en este caso es necesario utilizar el ciclo de vida de la página donde se encuentra el componente.
6.5, nodo pageLifetimes
# 组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中
Component({
pageLifetimes: {
show: function() {}, // 页面被展示
hide: function() {}, // 页面被隐藏
resize: function(size) {} // 页面尺寸变化
}
})
7. Ranura
7.1 ¿Qué es una tragamonedas?
En la estructura wxml de un componente personalizado, se puede proporcionar un nodo de ranura (ranura) para alojar la estructura wxml proporcionada por el usuario del componente.
7.2 Ranura única
En el miniprograma, de forma predeterminada, solo se permite utilizar una ranura en cada componente personalizado. Este límite en el número se denomina ranura única.
<!-- 组件的封装者 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<!-- 对于不准确的内容，可以使用 slot 进行展位 -->
<slot></slot>
</view>
<!-- 组件的使用者 -->
<component>
<view>这里是插入到组件slot中的内容</view>
</component>
7.3 Habilitar múltiples ranuras
En el componente personalizado del miniprograma, si necesita utilizar varias ranuras, puede habilitarlas en el archivo .js del componente de la siguiente manera: el código de muestra es el siguiente:
Component({
options: {
multipleSlots: true // 在组件定义时，启用多个 slot 支持
}
})
7.4 Definir múltiples espacios
Puede utilizar varias etiquetas de ranura en el archivo .wxml del componente para distinguir diferentes ranuras con diferentes nombres. El código de muestra es el siguiente:
<!-- 组件模板 -->
<view class="wrapper">
<!-- name 为 before 的第一个 slot 插槽 -->
<slot name="before"></slot>
<view>这是一段固定的文本内容</view>
<!-- name 为 after 的第二个 slot 插槽 -->
<slot name="after"></slot>
</view>
7.5 Uso de múltiples ranuras
Cuando utilice un componente personalizado con varias ranuras, deberá utilizar el atributo de ranura para insertar nodos en diferentes ranuras. El código de muestra es el siguiente:
<!-- 引用组件的页面模板 -->
<component>
<!-- 这部分内容将被放置在组件 <slot name="before"></slot> 的位置上 -->
<view slot="before">这里是插入到组件 slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"></slot> 的位置上 -->
<view slot="after">这里是插入到组件 slot name="after"中的内容</view>
</component>
8. Comunicación entre los componentes padre e hijo.
8.1.3 formas de comunicación entre los componentes padre e hijo
enlace de atributos
Lo utilizan los componentes principales para establecer datos en propiedades específicas de los componentes secundarios. Solo se pueden configurar datos compatibles con JSON.
enlace de evento
Se utiliza para que los componentes secundarios pasen datos a los componentes principales. Se puede pasar cualquier dato
Obtener instancia de componente
El componente principal también puede obtener el objeto de instancia del componente secundario a través de this.selectComponent()
De esta manera, puede acceder directamente a cualquier dato y método del subcomponente.
8.2 Vinculación de atributos
El enlace de propiedad se utiliza para transferir valores de padre a hijo y solo puede pasar tipos de datos ordinarios y no puede pasar métodos a componentes secundarios. El código de muestra del componente principal es el siguiente:
<!-- 父组件的 data 节点 -->
data: {
count: 0
}
<!-- 父组件的 wxml 结构 -->
<my-child count="{
{count}}"></my-child>
<!-- 子组件的 properties 节点 -->
properties: {
count: Number
}
<!-- 子组件的 wxml -->
<view>子组件种，count值为：{
{count}}</view>8.3, enlace de eventos
El enlace de eventos se utiliza para transferir valores del hijo al padre y se puede pasar cualquier tipo de datos. Los pasos de uso son los siguientes:
En el js del componente principal, defina una función, que se pasará al componente secundario en forma de evento personalizado.
<!-- 在父组件定义 syncCount 方法，将来传递给子组件，供子组件进行调用 -->
syncCount() {
console.log('syncCount')
}En el wxml del componente principal, pase la referencia de función definida en el paso 1 al componente secundario en forma de evento personalizado.
<!-- 使用bind:自定义事件名称（推荐：结构清晰） -->
<my-test count="{
{count}}" bind:sync="syncCount"></my-test>
<!-- 使用bind后面直接协商自定义事件名称-->
<my-test count="{
{count}}" bindsync="syncCount"></my-test>En el js del componente secundario, envíe datos al componente principal llamando a this.triggerEvent('nombre de evento personalizado', {objeto de parámetro})
<!-- 子组件的 wxml 结构 -->
<text>子组件中，count：{
{count}}</text>
<button type="primary" bindtap="addCount">+1</button>
# 子组件的 js 代码
methods: {
addCount() {
this.setData({
count: this.properties.count + 1
})
this.triggerEvent('sync', { value: this.properties.count })
}
}En el js del componente principal, los datos pasados por el componente secundario se obtienen a través de e.detail
syncCount(e) {
this.setData({
count: e.detail.value
})
}
8.4 Obtener instancia de componente
Puede llamar a this.selectComponent('id o selector de clase') en el componente principal para obtener el objeto de instancia del componente secundario, accediendo así directamente a cualquier dato y método del componente secundario.
<my-component count="{
{count}}" bind:sync="syncCount" class="test" id="test"></my-component>
<button bindtap="getChild">获取子组件实例</button>
<!-- 按钮的 tap 事件处理函数 -->
getChild() {
<!-- 可以传递 id选择器，也可以传递 class 选择器 -->
const child = this.selectComponent('.test')
<!-- 调用子组件的 setData 方法 -->
child.setData({ count: child.properties.count + 1 })
<!-- 调用子组件的 addCount 方法 -->
child.addCount()
}
9 、 comportamientos
9.1, ¿qué son los comportamientos?
Los comportamientos son características utilizadas en mini programas para compartir código entre componentes, similares a los mixins en Vue.js.
9.2 Cómo funcionan los comportamientos
Cada comportamiento puede contener un conjunto de propiedades, datos, funciones y métodos del ciclo de vida. Cuando un componente hace referencia a él, sus atributos, propiedades y métodos se fusionan en el componente.
Cada componente puede referirse a múltiples comportamientos y los comportamientos también pueden referirse a otros comportamientos.
9.3 Crear comportamiento
Llame al método Behavior(Object object) para crear un objeto de instancia de comportamiento compartido para que lo utilicen todos los componentes.
# 调用 Behavior() 方法，创建实例对象
# 并使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
# 属性节点
properties: {},
# 私有数据节点
data: {},
# 事件处理函数和自定义方法节点
methods: {}
})
9.4 Comportamiento de importación y uso
En el componente, utilice el método require() para importar el comportamiento requerido. Después del montaje, puede acceder a los datos o métodos en el comportamiento. El código de muestra es el siguiente:
# 使用 require() 导入需要自定义 behavior 模块
const myBehavior = require('my-behavior')
Component({
<!-- 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中即可生效 -->
behaviors: [myBehavior]
})9.5 Todos los nodos disponibles en comportamiento
10. Utilice paquetes npm
10.1 Soporte y limitaciones de npm por miniprogramas
Actualmente, los miniprogramas ya admiten el uso de npm para instalar paquetes de terceros, mejorando así la eficiencia del desarrollo de miniprogramas. Sin embargo, existen tres limitaciones al usar paquetes npm en programas pequeños:
-
Los paquetes que dependen de las bibliotecas integradas de Node.js no son compatibles
-
Los paquetes que dependen de objetos integrados en el navegador no son compatibles
-
Los paquetes que dependen de complementos de C++ no son compatibles
10.2, Promesa de API
-
Desventajas de las API asincrónicas basadas en funciones de devolución de llamada
De forma predeterminada, las API asincrónicas proporcionadas oficialmente por el miniprograma se implementan en función de funciones de devolución de llamada. Por ejemplo, la API para solicitudes de red debe llamarse de la siguiente manera:
wx.request({
method: '',
url: '',
data: {},
success: () => {}
})
Desventajas: es fácil causar el problema del infierno de devolución de llamada y la legibilidad y mantenibilidad del código son deficientes.
-
¿Qué es la promesa API?
API Promise se refiere a actualizar la API asincrónica basada en función de devolución de llamada proporcionada oficialmente a una API asincrónica basada en Promesa mediante una configuración adicional, mejorando así la legibilidad y mantenibilidad del código y evitando el problema del infierno de devolución de llamada.
-
Implementar la promesa de API
En miniprogramas, la implementación de API Promise se basa principalmente en el paquete npm de terceros minprogram-api-promise. Sus pasos de instalación y uso son los siguientes:
npm install --save minprogram-api-promise
# 在小程序入口文件中（app.js），只需要调用一次 promisifyAll() 方法
import { promisifyAll } from 'minprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)Llame a la API asíncrona después de la Promesa
# 页面的 .wxml 结构
<button bindtap="getInfo">vant按钮</button>
# 在页面的 .js 文件中，定义对应的 tap 事件处理函数
async getInfo() {
const { data: res } = await wx.p.request({
method: 'GET',
url: '',
data: {}
})
}
11. Intercambio global de datos
11.1 ¿Qué es el intercambio global de datos?
El intercambio de datos global (también llamado: gestión estatal) es para resolver el problema del intercambio de datos entre componentes.
Las soluciones de intercambio de datos más utilizadas en el desarrollo incluyen: Vuex, Redux, MobX, etc.
11.2 Esquema global de intercambio de datos en miniprogramas
En miniprogramas, mobx-miniprogram se puede utilizar junto con mobx-miniprogram-bindings para lograr el intercambio global de datos. en:
-
mobx-miniprogram se utiliza para crear objetos de instancia de Store
-
mobx-miniprogram-bindings se utiliza para vincular datos o métodos compartidos en la Tienda a componentes o páginas para su uso.
Instalar paquetes relacionados con MobX
# 在项目运行如下的命令，安装MobX相关的包
npm install --save mobx-miniprogram mobx-miniprogram-bindings
Nota: Después de instalar los paquetes relacionados con MobX, recuerde eliminar el directorio miniprogram_npm y reconstruir npm.
Crear una instancia de la Tienda MobX
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
//计算属性
get sum() {
return this.numA + this.numB
},
// actions 方法，用来修改 store 中的数据
updateNumA: action(function(step) {
this.numA += step
}),
updateNumB: action(function(step) {
this.numB += step
}),
})Vincular miembros de la Tienda a la página
# 页面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'
Page({
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA', 'numB', 'sum'],
actions: ['updateNumA']
})
},
<!-- 生命周期函数--监听页面卸载 -->
onUnload() {
this.storeBindings.destroyBindings()
}
})Utilice miembros de la Tienda en su página
# 页面的 .wxml
<view>{
{numA}} + {
{numB}} = {
{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{
{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{
{-1}}">numA - 1</van-button>
<!-- 按钮 tap 事件的处理函数 -->
btnHandler(e) {
this.updateNumA(e.target.dataset.step)
}Vincular miembros de la Tienda a componentes
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: {
numA: () => store.numA,
numB: (store) => store.numB,
sum: 'sum'
},
actions: {
updateNumA: 'updateNumA'
}
}
})Usar miembros de la Tienda en componentes
# 组件的 .wxml 结构
<view>{
{numA}} + {
{numB}} = {
{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{
{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{
{-1}}">numA - 1</van-button>
<!-- 按钮 tap 事件的处理函数 -->
btnHandler(e) {
this.updateNumA(e.target.dataset.step)
}