Introduction et utilisation de l'interaction des données d'arrière-plan de l'applet WeChat et du fichier wxs

Préparer les coulisses

Partage de code source en arrière-plan. . . .

ssm-oa.rar - Lan Zuoyun

Partage de code de test frontal

oa-mini.rar - Lan Zuoyun

Encapsulation de requête d'envoi frontal

Promesse

Les promesses sont une solution à la programmation asynchrone qui est plus logique et puissante que les solutions traditionnelles - fonctions de rappel et événements. Il a d'abord été proposé et implémenté par la communauté. ES6 l'a écrit dans la norme de langage, l'utilisation unifiée et a fourni des objets Promise de manière native.

La soi-disant promesse est simplement un conteneur qui contient le résultat d'un événement (généralement une opération asynchrone) qui se terminera dans le futur. Syntaxiquement, une promesse est un objet à partir duquel les messages d'une opération asynchrone peuvent être obtenus. Promise fournit une API unifiée et diverses opérations asynchrones peuvent être traitées de la même manière.

• Il y a trois états dans l'opération promise :
  • en attente : attente (en cours) dès que la promesse est créée, l'attente est en cours
  • rempli : succès (terminé), l'appel de la résolution changera l'état de l'attente à rempli, et sera exécuté à l'avenir.
  • rejeté : échec (rejet), l'appel de rejet changera le statut de l'attente à rejeté et exécutera .catch à l'avenir
• fais attention:
  • Une fois que l'état de la promesse change, l'état sera gelé
  • Si vous appelez à nouveau rejeter ou résoudre, cela n'a aucun sens de modifier l'état

Adresse de l'interface de demande d'inscription

Créer config/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' //绑定微信手机号
 };

demande d'encapsulation

dans /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)
      }
    })
  });
}

 

envoyer une demande

Utilisez la méthode dans la fonction de cycle de vie pour voir les données renvoyées par l'arrière-plan après le chargement de la page

 

 

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('服器没有开启，使用模拟数据!')
    })
  }

Utilisation du module WXS

Adresse du document officiel WeChat

 

index.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>

index.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);
}

common.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

 

Précautions d'utilisation de WXS

Module WXS

Le code WXS peut être écrit dans des balises dans le fichier wxml ou dans un fichier avec une extension .wxs.

module

• Chaque fichier et balise .wxs est un module distinct.
• Chaque module a sa propre portée indépendante. Autrement dit, les variables et les fonctions définies dans un module sont privées par défaut et invisibles pour les autres modules.
• Si un module souhaite exposer ses variables et fonctions privées internes, cela ne peut être réalisé que via module.exports.

nécessite une fonction

• Pour faire référence à d'autres modules de fichiers wxs dans le module .wxs, vous pouvez utiliser la fonction require.
• Lors de la citation, faites attention aux points suivants :
• Seuls les modules de fichiers .wxs peuvent être référencés et des chemins relatifs doivent être utilisés.
• Tous les modules wxs sont des singletons. Lorsqu'un module wxs est référencé pour la première fois, il sera automatiquement initialisé en tant qu'objet singleton. Plusieurs pages, plusieurs emplacements et plusieurs références utilisent tous le même objet module wxs.
• Si un module wxs n'a pas été référencé après sa définition, le module ne sera pas analysé et exécuté.

balise <wxs>

Nom d'attribut	Types de	Valeurs par défaut	illustrer
module	Chaîne		Le nom du module de l'onglet actuel. Champs obligatoires.
src	Chaîne		Fait référence au chemin relatif du fichier .wxs. Valide uniquement lorsque cette balise est une seule balise fermée ou si le contenu de la balise est vide.

attribut de module

• L'attribut module est le nom de module de la balise <wxs> actuelle. Dans un même fichier wxml, il est recommandé que sa valeur soit unique. S'il y a des noms de modules en double, ils seront écrasés dans l'ordre (ce dernier écrase le premier). les noms de modules wxs entre différents fichiers ne s'écrasent pas les uns les autres.
• Le nommage des valeurs d'attribut de module doit respecter les deux règles suivantes :

Le premier caractère doit être : lettre (a-zA-Z), trait de soulignement ( )

Les caractères restants peuvent être : lettres (a-zA-Z), trait de soulignement ( ), chiffres (0-9)

attribut source

• L'attribut src peut être utilisé pour référencer d'autres modules de fichiers wxs.
• Lors de la citation, faites attention aux points suivants :

Seuls les modules de fichiers .wxs peuvent être référencés et des chemins relatifs doivent être utilisés.

Tous les modules wxs sont des singletons. Lorsqu'un module wxs est référencé pour la première fois, il sera automatiquement initialisé en tant qu'objet singleton. Plusieurs pages, plusieurs emplacements et plusieurs références utilisent tous le même objet module wxs.

Si un module wxs n'a pas été référencé après sa définition, le module ne sera pas analysé et exécuté.

Remarquer

• < wxs > Les modules ne sont accessibles que dans le fichier WXML qui définit le module. Lors de l'utilisation de ou , le module ne sera pas importé dans le fichier WXML correspondant.
• Dans la balise <template>, seul le module <wxs> défini dans le fichier WXML qui définit le <template> peut être utilisé.

variable

concept

ne supporte pas let const

Les variables dans WXS sont des références à des valeurs.

Les variables qui ne sont pas déclarées sont directement affectées et utilisées, et seront définies comme des variables globales.

Si vous déclarez une variable sans lui affecter de valeur, la valeur par défaut est indéfinie.

La performance de var est cohérente avec javascript, et il y aura une promotion variable.

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

Le code ci-dessus déclare les trois variables foo, bar et i respectivement. Ensuite, foo reçoit la valeur 1 et bar reçoit la chaîne "hello world".

Nom de variable

• Le nommage des variables doit respecter les deux règles suivantes :
• Le premier caractère doit être : lettre (a-zA-Z), trait de soulignement ()

Les caractères restants peuvent être : lettres (a-zA-Z), trait de soulignement (), chiffres (0-9)

identifiant réservé

Les identifiants suivants ne peuvent pas être utilisés comme noms 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

Remarque

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