À quoi devez-vous faire attention lorsque vous utilisez des mini-programmes ?-Développement de mini-programmes-php.cn

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

小云云

Libérer： 2018-03-17 14:37:55

original

1566 Les gens l'ont consulté

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.

(2). fonction de cycle de vie

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

cliquez sur moi >

3.
Affichage et masquage dynamique d'un champ

Liste 1

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

Copier après la connexion

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

Copier après la connexion

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

< view class="phone_personal">{{firstPerson}}

EAT

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

Copier après la connexion

À 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>

Copier après la connexion

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

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  
        })
    }

Copier après la connexion

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的，但小程序是微信团队自研的