Cet article présente principalement les informations pertinentes sur l'exemple de code du programme WeChat Mini Jiugongge. Les amis qui en ont besoin peuvent se référer à la mise en ?uvre du
WeChat Mini Program Jiugongge
. rendus :
Le mini programme est développé sur WeChat et est une interface c?té mobile Afin de le rendre plus pratique à utiliser, nous souhaitons souvent utiliser le neuf. -interface de grille carrée comme navigation. Comment y parvenir ?
Basé sur une réflexion simple, la grille de Jiugong est composée de trois lignes et trois colonnes. Si la ligne est considérée comme une unité et que chaque ligne est divisée en trois colonnes, est-ce que ?a va ? Pratiquons-le.
Tout d'abord, considérons la génération de données sur neuf grilles. Chaque grille a besoin d'une ic?ne, d'un titre et d'un itinéraire pour faciliter le saut. Nous avons maintenant neuf pages ce jour-là, alors définissez-en un. tableau unidimensionnel qui est Can. Afin de mieux effectuer la configuration ultérieure, nous séparons ce tableau dans un fichier routes.js, puis le référen?ons dans la page index.js et mettons les routes dans le répertoire d'index.
var PageItems = [ { text: '格子1', icon: '../../images/c1.png', route: '../c1/c1', }, { text: '格子2', icon: '../../images/c2.png', route: '../c2/c2', }, { text: '格子3', icon: '../../images/c3.png', route: '../c3/c3', }, { text: '格子4', icon: '../../images/c4.png', route: '../c4/c4', }, { text: '格子5', icon: '../../images/c5', route: '../c5/c5', }, { text: '格子6', icon: '../../images/c6.png', route: '../c6/c6', }, { text: '格子7', icon: '../../images/c7.png', route: '../c7/c7', }, { text: '格子8', icon: '../../images/c8', route: '../c8/c8', }, { text: '格子9', icon: '../../images/c9.png', route: '../c9/c9', } ]; module.exports = { PageItems: PageItems }
Dans la page index.js, nous faisons référence à routes.js, puis obtenons les données PageItems, mais PageItems est un- tableau dimensionnel, et nous avons pensé précédemment à utiliser une ligne et trois colonnes pour former un groupe, donc ce tableau unidimensionnel doit être réorganisé. La méthode la plus directe est de générer un tableau, et les éléments de chaque tableau contiennent un. tableau unidimensionnel avec seulement trois éléments, le code est le suivant
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() var routes = require('routes'); Page({ data: { userInfo: {}, cellHeight: '120px', pageItems: [] }, //事件處理函數(shù) onLoad: function () { var that = this console.log(app); //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù) app.getUserInfo(function (userInfo) { wx.setNavigationBarTitle({ title: '全新測(cè)試追蹤系統(tǒng)-' + userInfo.nickName, success: function (res) { // success } }) that.setData({ userInfo: userInfo }) var pageItems = []; var row = []; var len = routes.PageItems.length;//重組PageItems len = Math.floor((len + 2) / 3) * 3; for (var i = 0; i < len; i++) { if ((i + 1) % 3 == 0) { row.push(indexs.PageItems[i]); pageItems.push(row); row = []; continue; } else { row.push(indexs.PageItems[i]); } } wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; that.setData({ cellHeight: (windowWidth / 3) + 'px' }) }, complete: function () { that.setData({ pageItems: pageItems }) } }) }) } })
Dans index.wxml, nous disposons l'interface. Puisque chaque grille est la même, les données sont différentes, j'ai donc pensé à utiliser un modèle pour les présenter. Pour ce faire, nous créons d'abord un modèle de cellule cell.wxml.
<template name="cell"> <navigator url="{{route}}" class="pages-item" style="height:{{cellHeight}}"> <view class="{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}" > <image src="{{icon}}" class="pages-icon"></image> </view> <view class="pages-text-wrapper"> <text class="pages-text">{{text}}</text> </view> </navigator> </template>
Ici, vous voyez deux accolades entre elles. Ce sont des données transmises par l'extérieur, puis des jugements logiques simples peuvent être formulés à l'intérieur pour une meilleure présentation. Par exemple, lorsque text==null, nous voulons présenter une grille avec un arrière-plan vide. Lorsqu'il y a des données, nous voulons présenter une grille avec un arrière-plan, donc "{{text==null||text.length== 0? 'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".
Autre point, puisque nous utilisons ce fichier d'interface comme modèle, nous devons utiliser Enveloppez-le avec la balise de modèle et donnez-lui un nom afin que l'appel puisse être identifié là où le modèle est référencé.
Maintenant, nous référen?ons ce modèle dans index.wxml
<!--index.wxml--> <import src="cell.wxml" /> <view class="pages-container"> <scroll-view scroll-y="true" class="pages-wrapper"> <view wx:for="{{pageItems}}" wx:key="{{text}}"> <view class="pages-row"> <template is="cell" data="{{...item[0],cellHeight}}" /> <template is="cell" data="{{...item[1],cellHeight}}" /> <template is="cell" data="{{...item[2],cellHeight}}" /> </view> </view> </scroll-view> </view>
Le modèle est référencé à l'aide de import , utilise un modèle et se trouve au lieu d'appel, où est spécifié le nom dans cell.wxml. item[0], item[1] et item[2] sont les données transmises dans la boucle et cellHeight sont les données stockées dans les données d'index.js. Lorsque les données sont transmises au modèle, le framework les développera sous forme de champs, c'est-à-dire de paires clé-valeur, donc si vous regardez à nouveau le fichier cell.wxml, vous constaterez que les clés sont utilisées directement comme données en interne. .
Après avoir présenté les données à l'interface, nous avons besoin d'un certain style pour y correspondre. Le code index.wxss est le suivant.
/**index.wxss**/ .pages-container { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 10rpx; padding-bottom: 10rpx; } .pages-title-bg { width: 100%; } .pages-wrapper { } .pages-row { width: 100%; display: flex; flex-direction: row; justify-content: space-around; } .pages-item { position: relative; padding: 10rpx; width: 33%; background-color: #fff; border: #ddd solid 1px; } .pages-icon-wrapper { display: flex; justify-content: space-around; align-items: center; margin: 10rpx; border-radius: 30%; height: 75%; background:#00CD0D; } .pages-icon-wrapper-no-bg { display: flex; justify-content: space-around; align-items: center; margin: 10rpx; height: 75%; } .pages-icon { width: 100rpx; height: 100rpx; } .pages-text-wrapper { text-align: center; } .pages-text { font-weight: bolder; }
Nous utilisons l'élément navigateur dans notre modèle pour présenter la grille, afin que chaque grille puisse être parcourue naturellement.
Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !
Pour plus d'articles liés à l'exemple de code de l'applet WeChat Jiugongge, veuillez faire attention au site Web PHP chinois?!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

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

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

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

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

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

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.

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

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

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

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 <swiper> pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b

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
