Eine kurze Diskussion über WeChat-Miniprogramme

高洛峰
Freigeben: 2017-02-21 16:09:51
Original
1550 Leute haben es durchsucht

Im Zuge der rasanten Entwicklung der Internet-Technologie sind verschiedene Frameworks entstanden, und dasjenige, das derzeit die meiste Aufmerksamkeit auf sich zieht, ist wahrscheinlich das WeChat-Applet. Von Nachrichtenforen bis hin zu QQ-Gruppen und WeChat-Gruppen diskutieren und studieren viele Freunde, die in der IT arbeiten, dieses kleine Programm. Aus Neugier habe ich mich darauf eingelassen.

Der erste Schritt besteht darin, die WeChat-Entwicklertools von der offiziellen Website herunterzuladen. Sie sind in Windows64, Windows32 und Mac unterteilt. Wählen Sie das entsprechende Tool zum Herunterladen aus. Nach dem Herunterladen installieren, die Schritte überspringen.

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

Der zweite Schritt besteht darin, die Demo herunterzuladen.

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

Der dritte Schritt besteht darin, den WeChat-Entwickler zu öffnen tools , importieren Sie die dekomprimierte Demo, damit Sie das Miniprogramm in vollen Zügen genießen können.

In diesem Prozess können wir erkennen, dass das ursprüngliche Miniprogramm tatsächlich vielen Frameworks ziemlich ähnlich ist. Die Seite ist nicht mehr im HTML-Format, sondern im Angular-Modus. Das Stilsuffix ist nicht css, sondern wxss; die Einheit ist nicht mehr px, sondern rpx.

Die Datenbindung ähnelt der Winkelbindung.

Die Debugging-Schnittstelle sieht wie folgt aus:

Eine kurze Diskussion über WeChat-Miniprogramme

Seitencode:

<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>
Nach dem Login kopieren

Stil:

/**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;
}
Nach dem Login kopieren

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
      })
    })
  }
})
Nach dem Login kopieren

Verzeichnis:

Eine kurze Diskussion über WeChat-Miniprogramme

Wie aus app.json ersichtlich ist, wird die Seite von hier importiert.

Sehen Sie sich app.js noch einmal an, wie unten gezeigt:

Eine kurze Diskussion über WeChat-Miniprogramme

Wir können den Prozess der Initialisierung von Miniprogrammseiten, der Datenerfassung und des Schnittstellenaufrufs kennen.

Weitere Artikel zu WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage