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】

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

Zone d'affichage déroulante

couramment utilisée pour obtenir un effet de liste déroulante

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时设置固定的高度*/

  effet d'implémentation :

• swiper et swiper-item

composant de conteneur de graphique de carrousel et composant d'élément de graphique de carrousel

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 :

3.

Texte composant

Semblable à la balise span en HTML, il s'agit d'un élément en ligne

Réalise l'effet d'un appui long pour sélectionner le contenu du texte

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

rich-text

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=&#39;color:red&#39;>标题</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!