À quoi devez-vous faire attention lorsque vous utilisez des mini-programmes ?

Cet article partage principalement avec vous les points auxquels vous devez prêter attention dans les mini-programmes, dans l'espoir de vous aider à mieux développer les fonctions WeChat.

1. Détails

1.Un petit programme comprend une application qui décrit le programme global et plusieurs pages décrivant les pages respectives

2. Le cadre d'applet est divisé en couche de vue et couche logique

La couche logique est écrite en JavaScript.

La couche de vue est écrite par WXML et WXSS et affichée par les composants. Le composant est le composant de base de la vue.

Refléter les données de la couche logique dans une vue, et en même temps, les événements de la couche vue sont envoyés à la couche logique.

2. Petits points de connaissances

1.App() la fonction est utilisée pour enregistrer un petit programme. Acceptez-en un paramètre d'objet, qui spécifie la fonction de cycle de vie de l'applet, etc.

sont tous dans le fichier app.js

La fonction 2.Page() permet d'enregistrer une page. accepter un objet Paramètres, qui spécifient les données initiales de la page, les fonctions de cycle de vie, les fonctions de gestion des événements, etc.

(1).Données d'initialisation : données

les données seront transmises de la couche logique à la couche de rendu sous forme de JSON, les données doivent donc être converties en JSON Format : chaîne, nombre, booléen, objet, tableau.

a8899951655249ad0ef4f91602aa4354

(2). fonction de cycle de vie

(3) Fonction de gestion des événements : bindtap

1075a5d2afd5223d26c7e913f8374360 cliquez sur moi de5f4c1163741e920c998275338d29b2 >

3.
Affichage et masquage dynamique d'un champ

51184bddf12d7f17d51841733bd1d942Liste 1de5f4c1163741e920c998275338d29b2

data:{  
    open:false  
  },  
  showitem:function(){  
      this.setData({  
          open:!this.data.open  
      })  
  }

.display_show{  
    display: block;  
}  
.display_none{  
    display: none;  
}

4.Réussi data-* et e.target.dateset transmettent les paramètres

395ecad7b9a54a4e40588985e229fb68{{firstPerson}}de5f4c1163741e920c998275338d29b2

f45adeddc3992d96bc208dd6f99187c5EATde5f4c1163741e920c998275338d29b2

this.setData({  
             firstPerson:e.target.dataset.me,  
       })

À cette heure : firstPerson=eat

5 Mot de la boîte flexible : display:flex;

<view class="phone_one" bindtap="clickPerson">  
    <view class="phone_personal">{{firstPerson}}</view>  
    <image src="../../image/i.png" class="personal_image {{selectArea ? &#39;rotateRight&#39; :&#39;&#39;}}"></image>  
</view>

En parent : display:flex;

justifier-content:espace-entre;

Ceci manière dont les sous-ensembles seront juxtaposés. justifier-content:space-between; De cette façon, les sous-ensembles seront aux deux extrémités

6. Obtenez votre propre style e.detail.width, e.detail.height

c89ae9cf7ee98599514ae4f90566f40ff8e950ebc6c1ea27f76cf997b9216fe6

var app = getApp()
Page({
	data: {
		imgwidth:0,  
        imgheight:0,
        
	},
	imageLoad: function(e) {  
        var _this=this;  
        var $width=e.detail.width,    //获取图片真实宽度  
            $height=e.detail.height,  
            ratio=$width/$height;   //图片的真实宽高比例  
        var viewWidth=this.data.screenWidth,           //设置图片显示宽度，  
            viewHeight=parseInt(viewWidth/ratio);    //计算的高度值
        _this.setData({  
            imgwidth:viewWidth,  
            imgheight:viewHeight  
        })
    }

7.如何定义全局数据

在app.js的App({})中定义的数据或函数都是全局的，在页面中可以通过var app = getApp();  app.function/key的方式调用（不过我们没有必要再app.js中定义全局函数）

（1）设置全局变量

App({

     globalData:{    
          userInfo:null,    
          test:"test"    
      }   

})

获取变量值

var test = getApp().globalData.test;    
console.log(test)   

三.注意点小程序误区

1.小程序不是Html5。小程序是微信全新定义的规范，是基于xml+js的，不支持也不兼容HTML，兼容受限的部分css写法。

小程序和腾讯X5引擎也没关系。X5是QQ浏览器团队的，是基于HTML的，但小程序是微信团队自研的

2.小程序不是b/s。微信宣传的一个重点，是触手可得，不用安装。但小程序并不是b/s的在线页面，它是c/s架构的。

3.小程序体验好并且小程序并非只适合低频或长尾应用

4. Les mini-programmes ne sont pas des magasins d'applications, ce sont des systèmes d'exploitation (OS)

Recommandations associées :

Exemple de développement de configuration globale d'applet WeChat

Développement de la fonction d'onglet du mini-programme WeChat

Développement de l'image de téléchargement du mini-programme WeChat fonction Exemple de partage

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!