Introducción y uso de la interacción de datos de fondo del subprograma WeChat y el archivo wxs

Prepárate entre bastidores

Uso compartido de código fuente en segundo plano. . . .

ssm-oa.rar - Lan Zuoyun

Uso compartido de código de prueba de front-end

oa-mini.rar - Lan Zuoyun

Encapsulación de solicitud de envío de front-end

Promesa

Las promesas son una solución a la programación asíncrona que son más lógicas y poderosas que las soluciones tradicionales: eventos y funciones de devolución de llamada. La comunidad lo propuso e implementó por primera vez. ES6 lo escribió en el lenguaje estándar, unificó el uso y proporcionó objetos de Promise de forma nativa.

La llamada Promesa es simplemente un contenedor que contiene el resultado de un evento (generalmente una operación asíncrona) que terminará en el futuro. Sintácticamente, una Promesa es un objeto del que se pueden obtener mensajes de una operación asíncrona. Promise proporciona una API unificada y varias operaciones asincrónicas se pueden procesar de la misma manera.

• Hay tres estados en la operación de promesa:
  • pendiente: esperando (en progreso) tan pronto como se crea la promesa, el pendiente está en progreso
  • cumplido: éxito (completado), llamar a resolver cambiará el estado de pendiente a cumplido, y se ejecutará en el futuro.
  • rechazado: falla (rechazo), llamar al rechazo cambiará el estado de pendiente a rechazado y ejecutará .catch en el futuro
• ten cuidado:
  • Una vez que cambie el estado de la promesa, el estado se congelará
  • Si llama a rechazar o resolver nuevamente, no tiene sentido modificar el estado

Dirección de interfaz de solicitud de registro

Crear configuración/api.js

 

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 
 module.exports = {
  IndexUrl: WxApiRoot + 'home/index', //首页数据接口
  SwiperImgs: WxApiRoot+'swiperImgs',
  MettingInfos: WxApiRoot+'meeting/list',
  AuthLoginByWeixin: WxApiRoot + 'auth/login_by_weixin', //微信登录
  UserIndex: WxApiRoot + 'user/index', //个人页面用户相关信息
  AuthLogout: WxApiRoot + 'auth/logout', //账号登出
  AuthBindPhone: WxApiRoot + 'auth/bindPhone' //绑定微信手机号
 };

solicitud de encapsulación

en /utils/util.js

/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
      },
      success: function (res) {
        if (res.statusCode == 200) {
            resolve(res.data);//会把进行中改变成已成功
        } else {
          reject(res.errMsg);//会把进行中改变成已失败
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  });
}

 

Enviar petición

Use el método en la función de ciclo de vida para ver los datos devueltos por el fondo después de cargar la página

 

 

loadMeetingInfos(){
    let that=this;
    // wx.request({
    //     url: api.MettingInfos,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           lists:res.data.lists
    //       })
    //     }
    //   })
    util.request(api.IndexUrl).then(res=>{
        console.log(res))
      this.setData({
        lists:res.data.infoList
      })
    }).catch(res=>{
        console.log('服器没有开启，使用模拟数据!')
    })
  }

Uso del módulo WXS

Dirección del documento oficial de WeChat

 

índice.wxml

<view class="container">
<view>{
   
   {common.msg}}</view>
<view>{
   
   {common.foo}}</view>
<view>{
   
   {foo.value}}</view>
</view>
<!-- module 当前 <wxs> 标签的模块名。必填字段。 -->
<!-- src 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 -->
<!-- 单标签 引入wxs文件-->
<wxs src="../wxs/common.wxs" module="common" />
<!-- 双标签 -->
<wxs module="foo">
var common = require('../wxs/common.wxs')
// 在.wxs模块中引用其他 wxs 文件模块， 可以使用 require 函数。
module.exports = {
value: common.inArray([1, 2, 3], 1)
}
// 方法一：单行注释
/*
方法二：多行注释
//
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
</wxs>

índice.wxss

.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
background-color: rgb(240, 240, 240);
}

común.wxs

var foo="'hello world' from common.wxs"
//inArray方法  判断数组中是否存在某元素
function inArray(arr,val){
return arr.indexOf(val)>-1
}
var msg="some msg"
//module 对象  每个 wxs 模块均有一个内置的 module 对象。
//属性  exports: 通过该属性，可以对外共享本模块的私有变量与函数。
module.exports={
foo:foo,
inArray:inArray
}
module.exports.msg=msg

 

Precauciones para el uso de WXS

Módulo WXS

El código WXS se puede escribir en etiquetas en el archivo wxml o en un archivo con una extensión .wxs.

módulo

• Cada archivo y etiqueta .wxs es un módulo separado.
• Cada módulo tiene su propio alcance independiente. Es decir, las variables y funciones definidas en un módulo son privadas por defecto e invisibles para otros módulos.
• Si un módulo quiere exponer sus funciones y variables privadas internas, solo puede realizarse a través de module.exports.

requieren función

• Para hacer referencia a otros módulos de archivos wxs en el módulo .wxs, puede usar la función require.
• Al citar, preste atención a los siguientes puntos:
• Solo se puede hacer referencia a los módulos de archivo .wxs y se deben usar rutas relativas.
• Todos los módulos wxs son singletons. Cuando se hace referencia a un módulo wxs por primera vez, se inicializará automáticamente como un objeto singleton. Múltiples páginas, múltiples lugares y múltiples referencias usan el mismo objeto de módulo wxs.
• Si no se ha hecho referencia a un módulo wxs después de su definición, el módulo no se analizará ni se ejecutará.

etiqueta <wxs>

Nombre del Atributo	Tipos de	valores predeterminados	ilustrar
módulo	Cuerda		El nombre del módulo de la pestaña actual. Campos requeridos.
origen	Cuerda		Hace referencia a la ruta relativa del archivo .wxs. Solo es válido cuando esta etiqueta es una sola etiqueta cerrada o el contenido de la etiqueta está vacío.

atributo del módulo

• El atributo del módulo es el nombre del módulo de la etiqueta <wxs> actual. Dentro de un solo archivo wxml, se recomienda que su valor sea único. Si hay nombres de módulos duplicados, se sobrescribirán en orden (el último sobrescribe al primero). Los nombres de los módulos wxs entre diferentes archivos no se sobrescriben entre sí.
• La denominación de los valores de los atributos del módulo debe cumplir con las dos reglas siguientes:

El primer carácter debe ser: letra (a-zA-Z), guión bajo ( )

Los caracteres restantes pueden ser: letras (a-zA-Z), guión bajo ( ), números (0-9)

atributo origen

• El atributo src se puede utilizar para hacer referencia a otros módulos de archivo wxs.
• Al citar, preste atención a los siguientes puntos:

Solo se puede hacer referencia a los módulos de archivo .wxs y se deben usar rutas relativas.

Todos los módulos wxs son singletons. Cuando se hace referencia a un módulo wxs por primera vez, se inicializará automáticamente como un objeto singleton. Múltiples páginas, múltiples lugares y múltiples referencias usan el mismo objeto de módulo wxs.

Si no se ha hecho referencia a un módulo wxs después de su definición, el módulo no se analizará ni se ejecutará.

darse cuenta

• < wxs > Los módulos solo son accesibles dentro del archivo WXML que define el módulo. Al usar o , el módulo no se importará al archivo WXML correspondiente.
• En la etiqueta <template>, solo se puede usar el módulo <wxs> definido en el archivo WXML que define la <template>.

variable

concepto

no admite let const

Las variables en WXS son referencias a valores.

Las variables que no se declaran se asignan y utilizan directamente, y se definirán como variables globales.

Si declara una variable sin asignarle un valor, el valor predeterminado no está definido.

El rendimiento de var es consistente con javascript y habrá una promoción variable.

var foo = 1
;var bar = "hello world";
var i; // i === undefined

El código anterior declara las tres variables foo, bar e i respectivamente. Luego, a foo se le asigna el valor 1 ya bar se le asigna la cadena "hola mundo".

nombre de la variable

• La denominación de variables debe cumplir con las dos reglas siguientes:
• El primer carácter debe ser: letra (a-zA-Z), guión bajo ()

Los caracteres restantes pueden ser: letras (a-zA-Z), guión bajo (), números (0-9)

identificador reservado

Los siguientes identificadores no se pueden utilizar como nombres de variables:

delete
void
typeof
null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default

Nota

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释
/*
方法二：多行注释
//
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";
</wxs>