Comment utiliser le mini-programme WeChat WXS

Le contenu de cet article explique comment utiliser l'applet WeChat WXS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il y a quelques jours, un camarade de classe m'a demandé L'applet WeChat prend-elle en charge les filtres de pipeline ?
Les étudiants qui ont utilisé angulaire ou vue devraient pouvoir utiliser le filtre dans leurs projets, mais cela n'est pas pris en charge dans les petits programmes. Mais il existe des solutions
Mais je me soucie simplement de savoir si WXS peut implémenter un filtre et que peut-il faire d'autre ? Avec cette question, j'ai relu le WXS officiel du mini programme WeChat.

Voici un exemple simple :

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

L'exemple ci-dessus peut afficher la page Hello World Lorsque vous aurez fini de lire la documentation officielle, vous le ferez. constatez que les fonctions du langage de script du programme sont très délicates, par exemple, il ne prend en charge que la syntaxe es5, ne prend pas en charge l'introduction externe de js, etc. Mais j’attends toujours avec impatience qu’il prenne en charge davantage de capacités à l’avenir.

Passons au sujet principal et explorons les questions sur le titre de l'article

1 Utilisez WXS pour implémenter le filtre

Le frontal a généralement un L'exigence est de convertir l'horodatage transmis depuis l'arrière-plan en dates de spécifications différentes, puis de les afficher. L'ancienne pratique consistait à envelopper les données avec une fonction, puis à les afficher sur la page. Tout comme la première méthode mentionnée dans l'article mentionné précédemment, certaines personnes considèrent des problèmes de performances et pensent que le traitement des boucles en js est plus gourmand en performances (je ne ferai pas de commentaire là-dessus, après tout, je ne l'ai pas vraiment testé)

Des exemples de formatage de date sont déjà disponibles dans l'article mentionné précédemment. Je vais donner ici un exemple plus simple. Dans les projets que j'ai développés, l'adresse de l'image Internet renvoyée par l'arrière-plan est généralement une adresse relative, ce qui signifie que pour afficher l'image, il faut ajouter un préfixe de nom de domaine configuré. Je parcours généralement les données après les avoir obtenues et j'ajoute des préfixes aux images qui doivent être affichées sur le front-end. Mais avec WXS, nous pouvons faire ceci :

<wxs>
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image></image>

Dans l'exemple ci-dessus, vous pouvez voir que l'ensemble du processus est fondamentalement similaire à la méthode de filtrage personnalisé dans des frameworks tels que vue.

2. Que peut faire d'autre WXS

En fait, souvent, nous ne comprenons pas que WXS peut faire plus de rendu conditionnel. Veuillez regarder l'exemple suivant :

<wxs>
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '该专栏暂时没有活动';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '该专栏暂时没有资讯';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '没有相关的话题哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你还没有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你还没有报名任何活动哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你还没有收藏任何活动哦';
        break;
      default:
        break;
    }
    if (type === 'image') {
      return imgUrl;
    } else {
      return content;
    }
  }
  module.exports.getData = getData;
</wxs>
<template>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

Dans l'exemple ci-dessus, j'ai utilisé la fonction fonction de WXS pour m'aider à faire des jugements conditionnels et à obtenir la sortie du modèle correspondant. Sa fonction est une page d'affichage de données vide. Peut-être vous demanderez-vous quels sont les avantages d’écrire comme celui-ci ?

Ensuite, je peux vous dire qu'il est facile de développer. Par exemple, si une nouvelle page a besoin d'un modèle de données vide correspondant, ajoutez simplement un cas supplémentaire à l'instruction switch. De plus, si la logique est écrite en WXML, le code sera très compliqué et difficile à comprendre.
Comprenant cela, vous constaterez que toute opération nécessitant un jugement logique sur WXML peut être remplacée par WXS.
En d'autres termes, pendant le développement, nous pouvons tous utiliser les fonctions de WXS pour nous aider à traiter clairement et efficacement certaines vues rendues sur WXML.

3. Pensées (extension)

1. Pour WXS qui doit être transformé sous forme de filtre, il est préférable de l'écrire dans un fichier .wxs. directement dans le WXML correspondant. Il suffit de citer.

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<wxs></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2. Pour référencer d'autres modules de fichiers wxs dans le module .wxs, vous pouvez utiliser la fonction require, mais vous ne pouvez pas référencer d'autres modules de fichiers js.

Référence pour cet article : Tutoriel de base sur le développement du mini programme WeChat https://www.html.cn/study/20.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!