Zusammenfassung der Erfahrungen in der Entwicklung kleiner Programme

1. WXML

---

1.1: wx:if und wx:else

Das Frontend erhält die Informationsliste Über die Back-End-Schnittstelle wird der Dateninhalt angezeigt, wenn Daten vorhanden sind, andernfalls werden die nicht gefundenen Informationen angezeigt. Wenn if-else für diesen Wechsel einen booleschen Wert verwendet, wird die Seite zunächst im Status „Falsch“ angezeigt und dann auf „True“ aktualisiert, d sehr ideal.

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

Am besten verwenden Sie Folgendes: Setzen Sie info am Anfang auf null,

data:{
    info:null
}

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

1.2: wx:for

for-Schleife So fügen Sie wx:for-item="item" wx:key="item"

1.3: Block-Tag

wx:if, wx:for, wx hinzu: Versuchen Sie andernfalls, block

für eine Syntax zu verwenden, die keine stilistische Bedeutung hat. 1.4: Vorlagenkomponente template

ist ein öffentliches Seitenmodul/eine öffentliche Seitenkomponente, die direkt verwendet werden kann wxml oder importiert. Wenn CSS beteiligt ist, muss es über @import in wxss eingeführt werden.

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

1.5: Skriptsprache wxs

Eine Skriptsprache, die speziell auf WXML-Seiten ausgeführt wird, unterstützt nicht die Verwendung der ES6-Syntax und kann nicht auf js verweisen .

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

rrree

2. WXSS

---

2.1: Hintergrundsymbol

Nur ​​die vollständige Version kann im verwendet werden Hintergrund des Applet-https-Bildpfads, Verwendung des Symbols im Projekt:

• Vektor-SVG: perfekte Skalierbarkeit, einfach anzupassen (Farbe, Größe usw.);

• data-uri: Die Bildgröße beträgt unter Verwendung von Base64 weniger als 20 KB. [Analyse der optimierten Einführungsmethode von Front-End-Bildern][segmentfault.com/a/119000001…]

• Große Dateien: Verwenden Sie das Bild-Tag direkt in wxml

• Einführung externer Symbole: wie die Alibaba-Vektorbibliothek, die über Netzwerkpfade verwendet und lokal heruntergeladen werden kann.

2.2: Stil zurücksetzen

2.3: Standardspezifikation für Schriftfamilien

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

2.4: Angemessene Verwendung der Rpx-Einheit

• rpx ist eine relative Einheit, die einem Prozentsatz der Bildschirmbreite entspricht. Die Verwendung wird in den folgenden Situationen nicht empfohlen:

• Schriftgröße und Rahmenbreite; Animationen beinhalten Übersetzungsverschiebungen: Wenn einige Maschinen rpx in px konvertieren und Dezimalzahlen wie 262,89 px vorhanden sind, verringert WeChat den Wert auf 262 px. Dies führt zu einer Lücke von 1 Pixel.

• Leinwandzeichnung, wie QR-Code, Teilen von Bildern usw.

3. JavaScript

---

3.1: Sekundäre Kapselung der wx.request-Methode

3.2: Seitenlebenszyklus

• onLoad: Laden der Seite, eine Seite wird nur einmal aufgerufen. Kann Seitenparameteroptionen abrufen.

• onShow: Seitenanzeige, wird bei jedem Öffnen der Seite einmal aufgerufen und beim Wechsel vom Hintergrund in den Vordergrund einmal aufgerufen: Das Mobiltelefon wechselt von der vom Bildschirm auf den Anzeigebildschirm, von minimiert auf maximiert.

• onReady: Das anfängliche Rendern der Seite ist abgeschlossen. Es wird nur einmal für eine Seite aufgerufen, was bedeutet, dass die Seite bereit ist und mit der Ansichtsebene interagieren kann.

• onHide: Wird aufgerufen, wenn die Seite in den Hintergrund wechselt, navigiert zu oder die Tabulatortaste wechselt.

• onUnload: Seite wird entladen. Zerstören Sie Seiten aktiv, wenn die Seite geschlossen wird oder nicht genügend Speicher vorhanden ist.

3.3: neue Datumskompatibilität

Android kann das new Date("2018-05-30 00:00:00")-Format erkennen, IOS kann jedoch nur das 2018/05/30 00:00:00-Format erkennen. Bindestriche müssen durch Schrägstriche ersetzt werden. var iosDate= date.replace(/-/g, '/')。

3.4: Bubbling-Ereignisse

• bindtap: Die Ereignisbindung verhindert nicht, dass Bubbling-Ereignisse aufsteigen

• Catchtap: Die Ereignisbindung kann verhindern, dass sprudelnde Ereignisse nach oben sprudeln

4. Miniprogrammfunktionen

---

4.1: Canvas generiert Bilder

4.2: Verwendung von Plug-Ins

4.3: Seitenstapelbegrenzung

Die neueste Version des Seitenstapels des Miniprogramms ist auf 10 begrenzt. Nach mehr als 10 können Sie nicht mehr zur nächsten Seite wechseln.

Daher sollte die Anzahl der Seiten mit Vorsicht verwendet werden und die Navigations-API sollte flexibel mit wx.navigateTo, wx.redirectTo und wx.navigateBack kombiniert werden

4.4: Prompt-Popup-Dialog

• Die Verwendung von wx.hideLoading vor dem Code führt dazu, dass wx.showToast später nicht angezeigt wird. Weil wx.showToast die Funktion hat, das Eingabeaufforderungsfeld wx.showLoading() auszublenden.

5. Andere

---

5.1: Mainstream-Framework

• mpvue: Verwenden Sie Vue-Syntaxspezifikationen zum Kompilieren in kleine Programme und H5-Syntax

• Taro: Basierend auf React kann es in kleine Programme, H5, React-Native usw. kompiliert werden. gleichzeitig.

5.2: Häufig verwendete Plug-ins

• wxParse: Rich-Text-Analyse

• wx-charts: Diagrammtool

• wxapp-qrcode: QR-Code-Generator

Empfohlenes Tutorial: „ WeChat-Applet 》

Das obige ist der detaillierte Inhalt vonZusammenfassung der Erfahrungen in der Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!