1. Muestra el efecto de carga.
Dirección del documento: wx.showLoading (objeto objeto) | Documentación abierta de WeChat
Mostrar el efecto de carga antes de la solicitud y ocultar la carga después de que finalice la solicitud
// 在请求模块中
wx.showLoading({
title: '加载中'
})
当请求完成后，关闭加载
wx.request({
success: ()=>{ // ... }
complete() {
setTimeout(() => {
// 这里延时一秒钟看到效果，关闭加载中效果
wx.hideLoading()
}, 1000)
}
})
2. El efecto de subir y bajar la aceleración
Lleva mucho tiempo bajar hasta el final, pero la solicitud se puede realizar todo el tiempo. Podemos establecer un estado de carga para controlar cuándo se puede cargar.
Cuando nuestro efecto de carga es verdadero, demuestra que la última carga no ha finalizado, por lo que no se cargará.
// js文件
data: {
colorList: [],
// 设置加载状态
isLoading: false
},
getColorList() {
// 请求开始 设置加载时状态为true
this.setData({
isLoading: true
})
wx.request({
// url ...
// success ...
complete: () => {
wx.hideLoading()
// 请求结束后关闭加载效果
this.setData({
isLoading: false
})
}
})
},3. Ciclo de vida de programas pequeños
Dirección del documento: Aplicación (objeto) | Documentación abierta de WeChat
1. Función del ciclo de vida de la página.
// 页面的 .js 文件
Page({
onLoad: function (option) { }, // 监听页面加载，个页面只调用1次function
onShow: function () { }, // 监听页面显示
onReady: function () { }, // 监听页面初次渲染完成，一个页面只调用1次
onHide: function () { }, // 监听页面隐藏
onUnload: function () { } // 监听页面卸载，一个页面只调用1次
})2. Función del ciclo de vida global del subprograma
// app.js 文件
App({
// 小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
onLaunch: function (options) { },
// 小程序启动，或从后台进入前台显示时触发。
onShow: function (options) { },
// 小程序从前台进入后台时触发。
onHide: function () { },
})4. WXS (WeChat versión Js)
Dirección del documento: WXS | Documentación abierta de WeChat
1. WXS no depende de la versión de la biblioteca básica en tiempo de ejecución y puede ejecutarse en todas las versiones de subprogramas.
2. WXS y JavaScript son lenguajes diferentes y tienen su propia sintaxis, que no es coherente con JavaScript y no se puede utilizar la sintaxis ES6, como: deconstrucción, const, let, función de flecha, etc.
3. Debido a la diferencia en el entorno operativo, WXS en applets en dispositivos iOS será de 2 a 20 veces más rápido que el código JavaScript. No hay diferencia en la eficiencia operativa entre los dos en el dispositivo Android.
4. No se puede utilizar como función de procesamiento de eventos, básicamente se utiliza como filtro.
1. Variables básicas y páginas de aplicación.
Coescritura en wxml
// 显示在页面上
<view>{
{m1.a}}</view>
<view>{
{m1.toUpper('aaa')}}</view>
// 声明模块名称
<wxs module="m1">
var str = 'abc'
// 必须导出
module.exports = {
a: str
}
// 声明函数
module.exports.toUpper = function(val){
return val.toUpperCase() // 转换为大写
}
</wxs>uso del módulo de importación
// .wxml
<view>{
{m2.name}}</view>
<view>{
{m2.toLower('BBB')}}</view>
// 引入并命名
<wxs module="m2" src="/utils/tools.wxs"></wxs>var name = '外部引入的wxs'
module.exports.name = name
module.exports.toLower = function (val) {
return val.toLowerCase() // 转换为小写
}5. Creación y uso de componentes.
1. Crear componentes
2. Registro y uso de componentes
Guía: cómo utilizar la dirección del documento: Componentes personalizados | Documentación abierta de WeChat
Dirección del documento de componentes del marco: Componente (objeto) | Documentación abierta de WeChat
registro global
Regístrate en app.json
"usingComponents": {
"com-b":"/pages/comb/comb"
}
registro parcial
Regístrese en el mismo nivel que la página en el archivo json en la página utilizada
"usingComponents": {
"com-a":"/pages/coma/coma"
}en la página de la aplicación
<com-a></com-a>
<com-b></com-b>3. Ámbito de actuación de WXSS
Aviso:
1. Cuando opere estilos de componentes, use solo el estilo de nombre de clase
2. El estilo del componente tiene líneas aisladas (alcance) de forma predeterminada, y el estilo de clase de la página no se puede aplicar al componente, el estilo del componente no se puede aplicar a la página de forma predeterminada
3. No utilice selectores de atributos, selectores de etiquetas ni selectores de identificación para manipular estilos en los componentes.
Ajustar manualmente el alcance de wxss
Agregue opciones al archivo js en el componente para configurar componentes personalizados | Documentación abierta de WeChat
Component({
// isolated: 页面与组件样式相互隔离(默认)
// apply-shared: 页面与组件的样式相互作用
// shared： 页面的样式会作用到组件，组件的样式不会作用到页面
options:{
styleIsolation:"isolated" // 默认
},
// ...
})4. Declarar eventos y datos
De acuerdo con la página, use objetos de datos para almacenar datos, pero el método debe declararse en el método.
// coma.js
data: {
msgComA: 'comA的私有数据'
},
methods: {
comaHandel(e){
console.log('e',e);
console.log(this.data.msgComA);
}
}5. Pasar datos a los componentes.
// 页面文件
<com-b str='传递的str数据' ></com-b>
// 组件js文件 类似于vue 的props
properties: {
str:String
},Se puede modificar a través de setData como los datos en datos.