Detaillierte Erläuterung der Host-Umgebung für die WeChat-Applet-Entwicklung

Dieser Artikel vermittelt Ihnen relevantes Wissen über das WeChat Mini-Programm, das hauptsächlich Probleme im Zusammenhang mit der Host-Umgebung für Mini-Programme vorstellt, die die von der Host-Umgebung bereitgestellten Funktionen nutzen können Es gibt viele Funktionen, die normale Webseiten nicht erfüllen können. Ich hoffe, dass sie für alle hilfreich sind.

【Verwandte Lernempfehlungen: Mini-Programm-Lern-Tutorial】

Host-Umgebung für Mini-Programme

Mobile WeChat ist die Host-Umgebung für Mini-Programme. Mini-Programme können die von der Host-Umgebung bereitgestellten Funktionen nutzen, um viele zu erreichen Dinge, die normale Webseiten nicht können. Abgeschlossene Funktionalität. Beispiel: Das Miniprogramm ruft die von WeChat bereitgestellte API auf, um Funktionen wie QR-Code-Scannen und Bezahlen zu implementieren.

Die Host-Umgebung des Applets enthält:

Kommunikationsmodell

Laufmechanismus

Komponenten

API

Kommunikationsmodell

1

Im Mini-Programm Der Hauptteil der Kommunikation besteht aus der Rendering-Ebene und der Logikebene, darunter:

WXML-Vorlagen und WXSS-Stile funktionieren in der Rendering-Ebene

JS-Skripte funktionieren in der Logikebene

2 Kommunikationsmodell von Mini Programm

Kommunikation des Miniprogramms Das Modell ist in zwei Teile unterteilt:

Kommunikation zwischen der Rendering-Schicht und der Logikschicht

Kommunikation zwischen der Logikschicht und dem Drittanbieter-Server

Beide werden weitergeleitet über den WeChat-Client

Laufmechanismus

1. Der Startvorgang des Miniprogramms

Laden Sie das Codepaket des Miniprogramms auf den lokalen

Parsen Sie die globale Konfigurationsdatei app.json herunter

Ausführen Rufen Sie in der Miniprogramm-Eintragsdatei app.js App() auf, um das Miniprogramm-Beispiel zu erstellen. JSON-Konfigurationsdatei der analysierten Seite

Laden Sie die .wxml-Vorlage und den .wxss-Stil der Seite

Führen Sie die .js-Datei der Seite aus und rufen Sie Page() auf, um die Seiteninstanz zu erstellen

Das Rendern der Seite ist abgeschlossen

Komponenten

1. Klassifizierung der Komponenten im Miniprogramm:

Die Komponenten im Miniprogramm bestehen ebenfalls aus: Durch die Bereitstellung durch die Hosting-Umgebung können Entwickler schnell schöne Seitenstrukturen basierend auf Komponenten erstellen. Die Komponenten des Miniprogramms sind offiziell in 9 Kategorien unterteilt, nämlich:

Container anzeigen

Basisinhalt

Formularkomponente

Navigationskomponente

• Körperkomponente

• Karte Kartenkomponente

• Leinwand Leinwandkomponente

• Offene Funktionen

• Zugänglichkeit
• 2. Häufig verwendete Ansichtscontainerklassenkomponenten

• Ansicht
  Normaler Ansichtsbereich
• Ähnlich wie The div In HTML handelt es sich um ein Element auf Blockebene. Es wird häufig verwendet, um Seitenlayouteffekte zu erzielen. Verwenden Sie beispielsweise Flex, um ein horizontales Layout zu erzielen.

wxml-Code:

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

wxss-Code:

.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;
}

Erfolgseffekt:

Scroll-Ansicht

Scrollbarer Ansichtsbereich

Wird verwendet, um einen Bildlauflisteneffekt zu erzielen.

Verwenden Sie den Bildlauf -view erzielt den Effekt des Auf- und Abscrollens

Verwenden Sie diese beiden Komponenten, um den Karusselleffekt zu erzielen:

wxml-Code:

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

wxss-Code:

.container1 {
  border:1px solid red;
  height:110px;
  /*使用scroll-view时设置固定的高度*/

Erfolgseffekt:

• 3. Häufig verwendete grundlegende Inhaltskomponenten

Text

Text Komponente

Ähnlich wie das Span-Tag in HTML ist es ein Inline-Element.

Realisiert den Effekt eines langen Drückens, um Textinhalte auszuwählen

Rendert HTML-Strings in entsprechende UI-Strukturen

<rich-text nodes="<h1 id="标题">标题</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 回调函数接收数据

【相关学习推荐：小程序学习教程】

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Host-Umgebung für die WeChat-Applet-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!