


Explication détaillée de l'environnement h?te pour le développement de l'applet WeChat
Oct 10, 2022 pm 03:34 PMCet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement les problèmes liés à l'environnement h?te. WeChat sur les téléphones mobiles est l'environnement h?te des mini-programmes qui peuvent utiliser les capacités fournies par l'environnement h?te pour y parvenir. Il existe de nombreuses fonctions que les pages Web ordinaires ne peuvent pas remplir. Jetons-y un coup d'?il ci-dessous, j'espère que cela sera utile à tout le monde.
【Recommandations d'apprentissage associées : Tutoriel d'apprentissage des mini-programmes】
Environnement h?te pour les mini-programmes
Mobile WeChat est l'environnement h?te pour les mini-programmes. Les mini-programmes peuvent utiliser les capacités fournies par l'environnement h?te pour réaliser de nombreux. des choses que les pages Web ordinaires ne peuvent pas compléter. Par exemple : le mini programme appelle l'API fournie par WeChat pour implémenter des fonctions telles que la numérisation de code QR et le paiement.
L'environnement d'hébergement de l'applet contient?:
Modèle de communication
Mécanisme d'exécution
Composants
API
Modèle de communication
1.
Dans le mini programme Le corps principal de la communication est la couche de rendu et la couche logique, parmi lesquelles?:
Les modèles WXML et les styles WXSS fonctionnent dans la couche de rendu
Les scripts JS fonctionnent dans la couche logique
2. programme
Communication du mini programme Le modèle est divisé en deux parties :
Communication entre la couche de rendu et la couche logique
Communication entre la couche logique et le serveur tiers
Les deux sont transmis via le client WeChat
Mécanisme d'exécution
1. Le processus de démarrage du mini programme
Téléchargez le package de code du mini programme en local
Analysez le fichier de configuration global app.json
Exécutez le fichier d'entrée du mini programme app.js, appelez App() pour créer le mini programme Exemple
Rendu de la page d'accueil de l'applet
L'applet est démarrée
2. fichier de configuration json de la page analyséeChargez le modèle .wxml et le style .wxss de la page
Exécutez le fichier .js de la page et appelez Page() pour créer l'instance de page
Le rendu de la page est terminé
Composants
1. Classification des composants dans le mini programme :
Les composants du mini programme sont également composés de Fournis par l'environnement d'hébergement, les développeurs peuvent rapidement créer de belles structures de pages basées sur des composants. Les composants du mini programme sont officiellement divisés en 9 catégories, à savoir?:
Conteneur de visualisation
Contenu de base
Composant de formulaire
Composant de navigation
Composant corps
-
carte Composant de carte
canvas Composant de canevas
Capacités ouvertes
Accessibilité
- 2.
Semblable à The div en HTML est un élément de niveau bloc. Il est souvent utilisé pour obtenir des effets de mise en page. Par exemple : utilisez flex pour obtenir une mise en page horizontale. code wxml?:
<view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>code wxss?:
.container1 view{ width:100px; height:100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: aquamarine; } .container1 view:nth-child(2){ background-color: azure; } .container1 view:nth-child(3){ background-color: darkorange; } .container1 { display: flex; justify-content: space-around; }Effet de réussite?:
vue par défilement
Utilisez le défilement -view obtient l'effet de défilement de haut en bas
code wxml?:
<scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>
- code wxss modifié?:
.container1 { border:1px solid red; height:110px; /*使用scroll-view時(shí)設(shè)置固定的高度*/
effet d'implémentation?:
- swiper et swiper-item
Utilisez ces deux composants pour obtenir l'effet carrousel?: code wxml?:
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular> <swiper-item> <view class="item">A</view> </swiper-item> <swiper-item> <view class="item">B</view> </swiper-item> <swiper-item> <view class="item">C</view> </swiper-item> </swiper>code wxss?:
.swiper-container{ height:150px; } .item{ height:100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: aquamarine; } swiper-item:nth-child(2) .item{ background-color: azure; } swiper-item:nth-child(3) .item{ background-color: darkorange; }Effet de réussite?:
<view> 長按可以選中文本內(nèi)容: <text user-select>HelloWorld!</text> </view>
Le composant de texte enrichi prend en charge le rendu des cha?nes HTML dans la structure WXML Rend les cha?nes HTML dans les structures d'interface utilisateur correspondantes
<rich-text nodes="<h1 style='color:red'>標(biāo)題</h1>"> </rich-text>
4.其他常用組件
button
按鈕組件
功能比 HTML 中的 button 按鈕豐富
通過 open-type 屬性可以調(diào)用微信提供的各種功能(客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等)
image
圖片組件
image 組件默認(rèn)寬度約 300px、高度約 240px
navigator
頁面導(dǎo)航組件
類似于 HTML 中的 a 鏈接,實(shí)現(xiàn)頁面的跳轉(zhuǎn)
5.API
小程序中的 API 是由宿主環(huán)境提供的,通過這些豐富的小程序 API,開發(fā)者可以方便的調(diào)用微信提供的能力,例如:實(shí)現(xiàn)支付,掃碼等功能。
小程序 API 的 3 大分類:
事件監(jiān)聽 API
特點(diǎn):以 on 開頭,用來監(jiān)聽某些事件的觸發(fā)
舉例:wx.onWindowResize(function callback) 監(jiān)聽窗口尺寸變化的事件
同步 API
特點(diǎn)1:以 Sync 結(jié)尾的 API 都是同步 API
特點(diǎn)2:同步 API 的執(zhí)行結(jié)果,可以通過函數(shù)返回值直接獲取,如果執(zhí)行出錯(cuò)會(huì)拋出異常
舉例:wx.setStorageSync('key', 'value') 向本地存儲(chǔ)中寫入內(nèi)容
異步 API
特點(diǎn):類似于 jQuery 中的 $.ajax(options) 函數(shù),需要通過 success、fail、complete 接收調(diào)用的結(jié)果
舉例:wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求,通過 success 回調(diào)函數(shù)接收數(shù)據(jù)
【相關(guān)學(xué)習(xí)推薦:小程序?qū)W習(xí)教程】
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!

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
