Maison > Article > Applet WeChat > Explication détaillée de l'environnement hôte pour le développement de l'applet WeChat
Cet 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】
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
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
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
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é
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>
.container1 { border:1px solid red; height:110px; /*使用scroll-view时设置固定的高度*/
effet d'implémentation :
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> 长按可以选中文本内容: <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'>标题</h1>"> </rich-text>
4.其他常用组件
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image
图片组件
image 组件默认宽度约 300px、高度约 240px
navigator
页面导航组件
类似于 HTML 中的 a 链接,实现页面的跳转
5.API
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:实现支付,扫码等功能。
小程序 API 的 3 大分类:
事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
特点1:以 Sync 结尾的 API 都是同步 API
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步 API
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
【相关学习推荐:小程序学习教程】
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!