Code schreiben

Applet-Instanz erstellen

Klicken Sie in der linken Navigation des Entwicklers auf ?Bearbeiten“. tools k?nnen wir sehen, dass dieses Projekt initialisiert wurde und einige einfache Codedateien enth?lt. Die wichtigsten und wichtigsten sind app.js, app.json und app.wxss. Unter diesen ist das Suffix .js eine Skriptdatei, das Suffix .json eine Konfigurationsdatei und das Suffix .wxss eine Stylesheet-Datei. Das WeChat-Applet liest diese Dateien und generiert Applet-Instanzen.

Lassen Sie uns kurz die Funktionen dieser drei Dateien verstehen, um die ?nderung zu erleichtern und Ihr eigenes WeChat-Applet von Grund auf zu entwickeln.

app.js ist der Skriptcode des Miniprogramms. Wir k?nnen die Lebenszyklusfunktionen des Applets überwachen und verarbeiten und in dieser Datei globale Variablen deklarieren. Rufen Sie die vom Framework bereitgestellte umfangreiche API auf, z. B. in diesem Beispiel die synchrone Speicherung und das synchrone Lesen lokaler Daten. Weitere Informationen zu den verfügbaren APIs finden Sie in der API-Dokumentation

//app.js
App({
 onLaunch: function () {
 //調(diào)用API從本地緩存中獲取數(shù)據(jù)
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 },
 getUserInfo:function(cb){
 var that = this;
 if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
  //調(diào)用登錄接口
  wx.login({
  success: function () {
   wx.getUserInfo({
   success: function (res) {
    that.globalData.userInfo = res.userInfo;
    typeof cb == "function" && cb(that.globalData.userInfo)
   }
   })
  }
  });
 }
 },
 globalData:{
 userInfo:null
 }
})

app.json ist die globale Konfiguration für das gesamte Applet. In dieser Datei k?nnen wir konfigurieren, aus welchen Seiten das Miniprogramm besteht, die Fensterhintergrundfarbe des Miniprogramms konfigurieren, den Stil der Navigationsleiste konfigurieren und den Standardtitel konfigurieren. Beachten Sie, dass dieser Datei keine Kommentare hinzugefügt werden k?nnen. Weitere konfigurierbare Elemente finden Sie unter Konfigurationsdetails

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

app.wxss ist das gemeinsame Stylesheet für das gesamte Applet. Wir k?nnen die in app.wxss deklarierten Stilregeln direkt für das Klassenattribut der Seitenkomponente verwenden.

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
}

Seiten erstellen

In diesem Tutorial haben wir zwei Seiten, Die Indexseite und die Protokollseite, dh die Begrü?ungsseite und die Anzeigeseite des Applet-Startprotokolls, befinden sich alle im Seitenverzeichnis. Der [Pfad + Seitenname] jeder Seite im WeChat-Miniprogramm muss in Seiten von app.json geschrieben werden, und die erste Seite in Seiten ist die Homepage des Miniprogramms.
Jede Miniprogrammseite besteht aus vier verschiedenen Suffixdateien mit demselben Namen im selben Pfad, wie zum Beispiel: index.js, index.wxml, index.wxss, index.json. Dateien mit dem Suffix .js sind Skriptdateien, Dateien mit dem Suffix .json sind Konfigurationsdateien, Dateien mit dem Suffix .wxss sind Stylesheet-Dateien und Dateien mit dem Suffix .wxml sind Seitenstrukturdateien.

index.wxml ist die Strukturdatei der Seite:

<!--index.wxml-->
<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>

In diesem Beispiel < view wird verwendet />, , , um die Seitenstruktur aufzubauen, Daten zu binden und interaktive Verarbeitungsfunktionen durchzuführen.

index.js ist die Skriptdatei der Seite. In dieser Datei k?nnen wir die Lebenszyklusfunktionen der Seite überwachen und verarbeiten, Miniprogramminstanzen abrufen, Daten deklarieren und verarbeiten und auf die Seite reagieren Interaktionsereignisse usw.

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 //事件處理函數(shù)
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
 app.getUserInfo(function(userInfo){
  //更新數(shù)據(jù)
  that.setData({
  userInfo:userInfo
  })
 })
 }
})
 index.wxss 是頁(yè)面的樣式表：
/**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;
}

Stylesheets für Seiten sind optional. Wenn ein Seiten-Stylesheet vorhanden ist, werden die Stilregeln im Stylesheet der Seite über die Stilregeln in app.wxss übertragen. Wenn Sie das Stylesheet der Seite nicht angeben, k?nnen Sie die in app.wxss angegebenen Stilregeln auch direkt in der Strukturdatei der Seite verwenden.

index.json ist die Konfigurationsdatei der Seite:

Die Konfigurationsdatei der Seite ist nicht erforderlich. Wenn eine Seitenkonfigurationsdatei vorhanden ist, überschreiben die Konfigurationselemente auf der Seite dieselben Konfigurationselemente im Fenster von app.json. Wenn keine angegebene Seitenkonfigurationsdatei vorhanden ist, wird die Standardkonfiguration in app.json direkt auf der Seite verwendet.

Die Seitenstruktur von Protokollen

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for-items="{{logs}}" wx:for-item="log">
 <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

Die Protokollseite verwendet < block/ > Kontrollieren Sie Tags zum Organisieren von Code, verwenden Sie wx:for-items für , um Protokolldaten zu binden und die Protokolldaten in Knoten einzubinden.

//logs.js
var util = require('../../utils/util.js')
Page({
 data: {
 logs: []
 },
 onLoad: function () {
 this.setData({
  logs: (wx.getStorageSync('logs') || []).map(function (log) {
  return util.formatTime(new Date(log))
  })
 })
 }
})

Die laufenden Ergebnisse sind wie folgt:

4. Handy-VorschauAnsicht

W?hlen Sie ?Projekt“ in der linken Menüleiste der Entwicklertools, klicken Sie auf ?Vorschau“ und scannen Sie den QR-Code, um es im WeChat zu erleben Kunde.

Das Obige ist die Sammlung von Informationen zum WeChat Mini-Programmentwicklungsleitfaden. Wir werden Ihnen auch in Zukunft für Ihre Unterstützung danken diese Seite!

Ausführlichere Erl?uterungen zum WeChat-Applet-Entwicklungsleitfaden und verwandten Artikeln finden Sie auf der chinesischen PHP-Website!