Introduction à la syntaxe couramment utilisée dans les petits programmes

Cet article vous apporte une introduction à la grammaire couramment utilisée dans les petits programmes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Ensuite, je commencerai du point de vue d'un débutant. Bien entendu, les articles suivants ne présenteront pas en détail les points de connaissance des petits programmes. Ils compareront principalement certaines idées d'Android. . , pour exprimer quelques réflexions personnelles.

Introduction à la syntaxe de l'API

1. Modèle de boîte Flex

1. flex-wrap :

nowrap (par défaut) : pas de retour à la ligne. .
wrap : wrap, avec la première ligne en haut.
wrap-reverse : enveloppez la première ligne ci-dessous.

2. justifier-contenu : la position où toutes les vues enfants sont affichées dans la vue parent

flex-start (valeur par défaut) : alignée à gauche
flex-end : alignée à droite
centre : centré
*espace-entre : alignez les deux extrémités et les intervalles entre les éléments sont égaux. Par conséquent, cela peut être considéré comme définissant la disposition des poids, chaque sous-vue occupant une part. S'il n'y a qu'une seule sous-Vue, cela équivaut à flex-start
*space-around : réparti uniformément sur la ligne, laissant la moitié de l'espace libre des deux côtés. L'espace entre les éléments est deux fois plus grand que l'espace entre les éléments et la bordure. S'il n'y a qu'une seule vue enfant (agissant sur la vue parent), alors la vue enfant est en fait centrée et alignée

affichage graphique des attributs d'espace entre :

3. align-content

Le contenu est centré. Applicable uniquement aux conteneurs flexibles multilignes, une seule ligne ne fonctionne pas
flex-start : aligné avec le point de départ de l'axe transversal.
flex-end : aligné avec le point final de l'axe transversal.
centre : aligné avec le milieu de l'axe transversal.
espace entre : Alignez avec les deux extrémités de l'axe transversal et les intervalles entre les axes sont uniformément répartis.
espace autour : Les intervalles des deux côtés de chaque axe sont égaux. Par conséquent, la distance entre les axes est deux fois plus grande que la distance entre les axes et le cadre.
étirement (valeur par défaut) : L'axe occupe tout l'axe transversal.

4. align-items

Alignez chaque vue dans l'alignement de la vue parent. S'applique à tous les conteneurs flexibles.
flex-start : Alignez le point de départ de l'axe transversal.
flex-end : Alignez le point final de l'axe transversal.
centre : Alignez le milieu de l’axe transversal.
baseline : L'alignement de base de la première ligne de texte de l'élément.
stretch (valeur par défaut) : Si l'élément ne définit pas de hauteur ou est défini sur auto, il occupera toute la hauteur du conteneur.

5. Exemple

1) Centrer la Vue enfant du conteneur
Ajouter dans le conteneur (Vue parent) :

 display: flex;
 align-items: center;

2) Laissez une disposition View être affichée sur la couche inférieure ou supérieure, similaire à la disposition FramLayout
Utilisez l'attribut z-index :

{        
 position:absolute;              
 left:0px;              
 top:0px;              
  z-index:-1;            
 }

Remarque :
1) z-index ne peut fonctionner qu'en absolu
2) z-index:-1, la vue modifiée est affichée sur la couche inférieure (peut être utilisée comme arrière-plan) z-index:1, affichée sur la couche la plus externe

2. api liée à js

1. Variables

Nous savons qu'en Java, s'il s'agit d'un objet qui doit être utilisé dans toute la classe, nous le déclarerons comme un. variable membre dans la classe, effectivement déclarée comme variable locale dans une méthode spécifique. Ensuite, l'applet correspondante est :
var : variable membre en java
let : variable locale en java

2. Type de données de base Booléen

    var test0 = ""            //false
    var test1 = "aaaaaaaa"   // true
    var test2 = null          // false
    var test3 = 11           // true
    var test4 = 0            // false
    var test5 = {}           // true

Résumé : Ceci La différence avec Java, c'est toujours très gros
1) Pour les types numériques (int, float), tant que le nombre est différent de 0, c'est vrai
2) Pour la chaîne (String), uniquement null, et " ; " sont vides. Les chaînes sont fausses, les autres sont fausses
3) Pour les objets, sauf que l'objet est nul, il est faux et tout le reste est vrai. Même si cet objet est un objet vide {}

3. Fonction

(1) Définition de la fonction
      Défini dans la page :

  onShow: function (params) {
    //方法体
  },

Défini dans la non-page :

function test(params){
    //方法体}

Résumé :
​ ​ ​ 1. La première définition doit ajouter une virgule "", à la fin, tandis que la deuxième méthode ne peut pas ajouter
​ ​ ​ 2. Contrairement à Java, le paramètre params d'une fonction n'a pas besoin de spécifier un type, donc en théorie, n'importe quel type peut être transmis lors de l'appel de la méthode. Mais cela n’est généralement pas fait. Personnellement, je pense que Java est plus rigoureux et plus lisible.
3. Il n'y a pas de limite sur le nombre de paramètres

(2) Fonction de rappel
1) Définition de la fonction

  function request(onFail){
  //调用接口
      wx.request({
        success: function (res) { //接口返回数据
         onFail（res）
      })
    }

2) Appel de fonction

             wx.cyou.cache.getCacheValue("key_test", function(result){
                console.log("result==", result)
            })

(3) Notes

1) L'applet ne prend pas en charge la surcharge de fonctions et la réécriture de fonctions
2) Lorsqu'une fonction appelle une fonction, la méthode de fonction ne prend pas en charge le transfert direct. Regardez l'exemple suivant :

   function request1(function1) {
          request2(function1）
        }
       问题： 这在request1方法调用request2的时候，参数也是一个函数function1，直接将function1传递给request2是不可以的

       解决方式：        
       function request1(function1) {
          request2(new function{
              function1()

          }}）
        }

        在request2方法的回调函数中去调用function1方法

4. Variables d'objet

class Person{
  String name;  int age;
}

En Java, si vous souhaitez parcourir pour obtenir le nom, l'âge et le type d'attribut de la personne. , int. Ils sont tous mis en œuvre par réflexion. Ainsi, dans les petits programmes, c’est beaucoup plus simple et brut que Java. Mise en œuvre spécifique

for (var propertyName in Person){           
var name = propertyName               //对象Person的属性（String、int）
var value = testInfo[propertyName]    // 对象Person的属性值(name、age)
        }

5、export使用

在调用一个类中的方法或者属性值时，必须要在被调用的方法和属性值，定义的时候用export声明

6、disableScroll使用

问题描述：
有时候，小程序跑在苹果手机上时，会左右滑动退出，也会上下滑动，这样体验不好。这个时候要禁止滑动。

 在app.json中，将disableScroll值设置为true 就可以了：  
 "window": {          
 "disableScroll": true
      }

7、页面page数据的获取与设置

  let pages = getCurrentPages()          
  let curPage = pages[pages.length - 1]         //获取当前页面
          if (curPage.route == url){        //比较获取的页面的url是否跟实际的一致(如url:"pages/order/order")
            curPage.setData({                                //设置数据
              usingOrderList: usingOrderList
            })
          }

8、获取所有的页面

          let pages = getCurrentPages()            // 获取上一个页面
          let prePage = pages[pages.length - 2]          //给页面设置数据
          prePage.setData({
            refreshUserInfo:true
          })          //返回到上一个页面
          wx.navigateBack({
            delta: 1
          })

注意事项：
调用getCurrentPages()不需要在page环境中(可以视为Android中的Context环境)，可以在任何地方直接获取，即util等自定义类中同样生效。类似的还有wx.开头的方法

9、showToast时长设置失效问题

  let title = new String(msg)  //延时弹toast,是为了解决有时候在接口请求后，设置的duration时间不起作用
  setTimeout(function () {
    wx.showToast({
      title: title,
      duration: 1200,
      icon: "none"
    })
  }, 100)

10、reLaunch跳转失效问题

     //延时跳转,是为了解决有时候wx.reLaunch不起作用，设置的时间不起作用
    setTimeout(function(){
      wx.reLaunch({
        url: '/pages/home/home'
      })
    },100)

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!