Une brève discussion sur les mini-programmes WeChat

高洛峰
Libérer: 2017-02-21 16:09:51
original
1541 Les gens l'ont consulté

Dans le développement effréné de la technologie Internet, divers cadres ont émergé, et l'applet WeChat est probablement celui qui attire le plus l'attention en ce moment. Des forums d'actualités aux groupes QQ et groupes WeChat, de nombreux amis qui travaillent dans l'informatique aiment discuter et étudier ce petit programme. Par curiosité, je me suis impliqué.

La première étape consiste à télécharger les outils de développement WeChat depuis le site officiel. Il est divisé en Windows64, Windows32 et Mac. Sélectionnez celui correspondant à télécharger. Installez après le téléchargement, ignorez les étapes.

Lien : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

La deuxième étape consiste à télécharger la démo.

Lien : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

La troisième étape consiste à ouvrir le développeur WeChat tools , importez la démo décompressée, afin que vous puissiez profiter avec bonheur du mini programme.

Dans ce processus, nous pouvons savoir que le mini-programme original est en fait assez similaire à de nombreux frameworks. Sa page n'est plus html, mais en mode angulaire. Le suffixe de style n'est pas css mais wxss ; l'unité n'est plus px mais rpx.

La liaison de données est similaire à angulaire.

L'interface de débogage est la suivante :

Une brève discussion sur les mini-programmes WeChat

Code de la page :

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
Copier après la connexion

Style :

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}
 
.usermotto {
  margin-top: 200px;
}
Copier après la connexion

js :

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: &#39;Hello World&#39;,
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: &#39;../logs/logs&#39;
    })
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})
Copier après la connexion

Répertoire :

Une brève discussion sur les mini-programmes WeChat

Comme on peut le voir sur app.json, la page est importée à partir d'ici.

Regardez à nouveau app.js, comme indiqué ci-dessous :

Une brève discussion sur les mini-programmes WeChat

Nous pouvons connaître le processus d'initialisation de la page du mini programme, d'acquisition de données et d'appel d'interface.

Pour plus d'articles liés aux mini-programmes WeChat, veuillez faire attention au site Web PHP chinois !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!