Maison Applet WeChat Développement de mini-programmes Comment utiliser le mini-programme WeChat WXS

Comment utiliser le mini-programme WeChat WXS

Feb 16, 2019 pm 02:14 PM
微信小程序

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.

Comment utiliser le mini-programme WeChat WXS

Voici un exemple simple :

1

2

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>

<view>{{m1.message}}</view>

Copier après la connexion

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 :

1

2

3

4

5

6

7

<wxs>

    function getFullPath(url) {

        return "https://shiyuanjieyi.cn" + url

    }

    module.exports.getFullPath = getFullPath

</wxs>

<image></image>

Copier après la connexion
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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

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

Copier après la connexion
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.

1

2

3

4

5

6

7

8

9

var foo = "'hello world' from tools.wxs";

var bar = function (d) {

  return d;

}

module.exports = {

  FOO: foo,

  bar: bar,

};

module.exports.msg = "some msg";

Copier après la connexion

1

2

3

<wxs></wxs>

<view>{{tools.msg}}</view>

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

Copier après la connexion
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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le mini-programme Xianyu WeChat est officiellement lancé Le mini-programme Xianyu WeChat est officiellement lancé Feb 10, 2024 pm 10:39 PM

Le mini programme WeChat officiel de Xianyu a été lancé discrètement. Dans le mini programme, vous pouvez publier des messages privés pour communiquer avec les acheteurs/vendeurs, afficher les informations personnelles et les commandes, rechercher des articles, etc. Si vous êtes curieux, qu'est-ce que le mini Xianyu WeChat. programme appelé ? Jetons un coup d'oeil. Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ; 3. Si vous souhaitez l'utiliser, vous devez activer le paiement WeChat avant d'acheter ;

L'applet WeChat implémente la fonction de téléchargement d'images L'applet WeChat implémente la fonction de téléchargement d'images Nov 21, 2023 am 09:08 AM

L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat

Implémentez l'effet de menu déroulant dans l'applet WeChat Implémentez l'effet de menu déroulant dans l'applet WeChat Nov 21, 2023 pm 03:03 PM

Pour implémenter l'effet de menu déroulant dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires. Avec la popularité de l'Internet mobile, les mini-programmes WeChat sont devenus une partie importante du développement d'Internet, et de plus en plus de gens ont commencé à y prêter attention et à y prêter attention. utilisez les mini-programmes WeChat. Le développement de mini-programmes WeChat est plus simple et plus rapide que le développement d'applications traditionnelles, mais il nécessite également la maîtrise de certaines compétences en développement. Dans le développement des mini-programmes WeChat, les menus déroulants sont un composant courant de l'interface utilisateur, permettant une meilleure expérience utilisateur. Cet article présentera en détail comment implémenter l'effet de menu déroulant dans l'applet WeChat et fournira des informations pratiques.

Implémenter des effets de filtre d'image dans les mini-programmes WeChat Implémenter des effets de filtre d'image dans les mini-programmes WeChat Nov 21, 2023 pm 06:22 PM

Implémentation d'effets de filtre d'image dans les mini-programmes WeChat Avec la popularité des applications de médias sociaux, les gens aiment de plus en plus appliquer des effets de filtre aux photos pour améliorer l'effet artistique et l'attractivité des photos. Les effets de filtre d'image peuvent également être implémentés dans les mini-programmes WeChat, offrant aux utilisateurs des fonctions de retouche photo plus intéressantes et créatives. Cet article expliquera comment implémenter des effets de filtre d'image dans les mini-programmes WeChat et fournira des exemples de code spécifiques. Tout d’abord, nous devons utiliser le composant canevas dans l’applet WeChat pour charger et modifier des images. Le composant canevas peut être utilisé sur la page

Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Nov 21, 2023 pm 05:59 PM

Utilisez l'applet WeChat pour obtenir un effet de commutation de carrousel. L'applet WeChat est une application légère avec des caractéristiques de développement et d'utilisation simples et efficaces. Dans les mini-programmes WeChat, il est courant d'obtenir des effets de commutation de carrousel. Cet article explique comment utiliser l'applet WeChat pour obtenir l'effet de changement de carrousel et donne des exemples de code spécifiques. Tout d’abord, ajoutez un composant carrousel au fichier d’échange de l’applet WeChat. Par exemple, vous pouvez utiliser la balise &lt;swiper&gt; pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b

Implémenter l'effet de rotation d'image dans l'applet WeChat Implémenter l'effet de rotation d'image dans l'applet WeChat Nov 21, 2023 am 08:26 AM

Pour implémenter l'effet de rotation d'image dans WeChat Mini Program, des exemples de code spécifiques sont nécessaires. WeChat Mini Program est une application légère qui offre aux utilisateurs des fonctions riches et une bonne expérience utilisateur. Dans les mini-programmes, les développeurs peuvent utiliser divers composants et API pour obtenir divers effets. Parmi eux, l'effet de rotation d'image est un effet d'animation courant qui peut ajouter de l'intérêt et des effets visuels au mini-programme. Pour obtenir des effets de rotation d'image dans les mini-programmes WeChat, vous devez utiliser l'API d'animation fournie par le mini-programme. Ce qui suit est un exemple de code spécifique qui montre comment

Implémentez la fonction de suppression coulissante dans le mini-programme WeChat Implémentez la fonction de suppression coulissante dans le mini-programme WeChat Nov 21, 2023 pm 06:22 PM

La mise en œuvre de la fonction de suppression coulissante dans les mini-programmes WeChat nécessite des exemples de code spécifiques. Avec la popularité des mini-programmes WeChat, les développeurs rencontrent souvent des problèmes de mise en œuvre de certaines fonctions courantes au cours du processus de développement. Parmi eux, la fonction de suppression coulissante est une exigence fonctionnelle courante et couramment utilisée. Cet article présentera en détail comment implémenter la fonction de suppression coulissante dans l'applet WeChat et donnera des exemples de code spécifiques. 1. Analyse des besoins Dans le mini programme WeChat, la mise en œuvre de la fonction de suppression coulissante implique les points suivants : Affichage de la liste : pour afficher une liste qui peut être glissée et supprimée, chaque élément de la liste doit inclure

Quel est le nom de l'applet Xianyu WeChat ? Quel est le nom de l'applet Xianyu WeChat ? Feb 27, 2024 pm 01:11 PM

Le mini-programme officiel WeChat de Xianyu a été lancé discrètement. Il offre aux utilisateurs une plate-forme pratique qui vous permet de publier et d'échanger facilement des objets inutilisés. Dans le mini programme, vous pouvez communiquer avec des acheteurs ou des vendeurs via des messages privés, afficher des informations personnelles et des commandes et rechercher les articles que vous souhaitez. Alors, comment s'appelle exactement Xianyu dans le mini-programme WeChat ? Ce guide didacticiel vous le présentera en détail. Les utilisateurs qui souhaitent savoir, veuillez suivre cet article et continuer à lire ! Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ;

See all articles