Résumé de l'expérience de développement de petits programmes

1. WXML

---

1.1 : wx:if et wx:else

Le front-end obtient la liste d'informations via l'interface back-end, s'il y a des données, le contenu des données sera affiché, sinon les informations introuvables seront affichées. Si if-else utilise une valeur booléenne pour effectuer ce changement, la page apparaîtra d'abord dans l'état faux, puis sera mise à jour vers vrai, c'est-à-dire qu'elle affichera le contenu indiquant que les informations ne peuvent pas être trouvées. très idéal.

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

La meilleure façon est d'utiliser ce qui suit, définissez les informations sur null au début,

data:{
    info:null
}

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

1.2 : wx:for

for boucle Pour ajouter wx:for-item="item" wx:key="item"

1.3 : bloquer la balise

wx:if, wx:for, wx : Sinon, essayez d'utiliser block

pour une syntaxe qui n'a aucune signification stylistique. 1.4 : le modèle de composant de modèle

est un module/composant de page publique qui peut être utilisé directement dans. wxml ou importé. Si CSS est impliqué, il doit être introduit via @import dans wxss.

/**
* 方式一：直接使用
* 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 : Langage de script wxs

Un langage de script qui s'exécute spécifiquement sur les pages wxml. Contrairement à javascript, il ne prend pas en charge l'utilisation de la syntaxe ES6 et ne peut pas faire référence à js. .

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

rrree

2. WXSS

---

2.1 : Icône d'arrière-plan

Seule la version complète peut être utilisée dans le fond de l'applet https chemin de l'image, comment utiliser l'icône dans le projet :

• Vector svg : évolutivité parfaite, facile à ajuster (couleur, taille, etc.) ; 🎜>

data-uri : La taille de l'image est inférieure à 20 Ko en base64. [Analyse de la méthode d'introduction optimisée des images front-end][segmentfault.com/a/119000001…]
Fichiers volumineux : Utiliser la balise image directement dans wxml
Présentation d'icônes externes : telles que la bibliothèque de vecteurs Alibaba, qui peuvent être utilisées en utilisant des chemins réseau et en téléchargeant en local.

2.2 : Réinitialiser le style

2.3 : spécification standard de la famille de polices

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

2.4 : Utilisation raisonnable de l'unité rpx

rpx est une unité relative équivalente à un pourcentage de la largeur de l'écran. Il n'est pas recommandé de l'utiliser dans les situations suivantes :

• font-size et border-width ; l'animation d'animation implique un déplacement de translation : lorsque certaines machines convertissent rpx en px et qu'il y a des décimales, telles que 262,89px, WeChat réduira la valeur à 262px, ce qui entraîne un écart de 1 px.

• Dessin sur toile, tel que code QR, partage d'images, etc.
3. JavaScript

3.1 : Encapsulation secondaire de la méthode wx.request

---

3.2 : Cycle de vie de la page

onLoad : Chargement de la page, une page ne sera appelée qu'une seule fois. Peut obtenir des options de paramètres de page.

• onShow : Affichage de la page, elle sera appelée une fois à chaque ouverture de la page, et elle sera appelée une fois lors du passage de l'arrière-plan au premier plan : lorsque le téléphone repasse en l'écran d'affichage depuis hors écran, de minimisé à maximisé.

• onReady : Le rendu initial de la page est terminé. Il ne sera appelé qu'une seule fois pour une page, ce qui signifie que la page est prête et peut interagir avec la couche de vue.

• onHide : appelé lorsque la page passe en arrière-plan, NavigTo ou Tab change.

• onUnload : Déchargement de la page. Détruisez activement les pages lorsque la page est fermée ou que la mémoire est insuffisante.
3.3 : nouvelle compatibilité Date

Android peut reconnaître le format , mais IOS ne peut reconnaître que le format

. Les tirets doivent être remplacés par des barres obliques.

new Date("2018-05-30 00:00:00")2018/05/30 00:00:00var iosDate= date.replace(/-/g, '/')。3.4 : Événements bouillonnants

bindtap : La liaison d'événements n'empêche pas les événements bouillonnants de bouillonner

• catchtap : la liaison d'événements peut empêcher les événements bouillonnants de bouillonner vers le haut
4. Fonctions du mini programme

4.1 : Canvas génère des images

---

4.2 : Utilisation de plug-ins

4.3 : Limite de pile de pages

La dernière version de la pile de pages du mini programme est limitée à 10. Après plus de 10, vous ne pouvez pas accéder à la page suivante.

Par conséquent, le nombre de pages doit être utilisé avec prudence et l'API de navigation doit être combinée de manière flexible avec wx.navigateTo, wx.redirectTo et wx.navigateBack

4.4 : Boîte de dialogue contextuelle d'invite

L'utilisation de wx.hideLoading devant le code empêchera wx.showToast d'apparaître plus tard. Parce que wx.showToast a pour fonction de masquer la boîte d'invite wx.showLoading().

5. Autres

5.1 : Cadre grand public

---

mpvue : utilisez les spécifications de la syntaxe vue pour compiler en petits programmes et la syntaxe h5

• Taro : basé sur React, il peut être compilé en petits programmes, h5, React-Native, etc. en même temps.
5.2 : Plug-ins couramment utilisés

wxParse : Analyse de texte enrichi

• wx-charts : outil de création de graphiques

• wxapp-qrcode : générateur de code QR

• Tutoriel recommandé : "
Applet WeChat

》

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!