[Miniprogramm] Erfahrungsaustausch über das erste entwickelte Miniprogramm

Douban API

Ich habe in den letzten Tagen die Dokumentation des Miniprogramms gelesen und dann einige Zeit damit verbracht, ein Miniprogramm mit wenig Inhalt zu schreiben. Ursprünglich wollte ich die API-Schnittstelle selbst schreiben, aber der vom Miniprogramm angeforderte Domänenname erfordert sowohl eine Registrierung als auch HTTPS, also habe ich aufgegeben, weil es zu mühsam war. Später entschied ich mich für die Douban-API und stellte fest, dass das Miniprogramm die Douban-API blockierte. Glücklicherweise gab es im Internet einen Master, der einen Proxyserver einrichtete.

Mit der API von Douban habe ich vor, ein ähnliches kleines Buch zu erstellen, um einige Filme aufzuzeichnen, die ich gesehen habe, und dann entsprechende Bewertungen und Poster von Douban abzurufen. Leider ist auch die maximale Auflösung der von der Douban-API bereitgestellten Poster sehr niedrig, wodurch das Miniprogramm sehr schlecht aussieht, aber es gibt keine Möglichkeit, schließlich ist es das Zeug von jemand anderem ...

Ändern Die Attribute des Datenneutronenobjekts

Die nach Verwendung von wx.request erhaltenen Daten müssen in das Page von data geschrieben werden. Anders als bei Vue.js muss das Applet this.setData aufrufen Gleichzeitig sollten Sie, wenn es während des Schreibens geändert wird, für die Attribute im Objekt eine Variable definieren, um die aus dem Objekt und dem Attribut bestehende Zeichenfolge zu verbinden, und diese dann in eckige Klammern [] einschließen. Zum Beispiel:

var temp='person.name';
......

this.setData({
    [temp]:'Mike'
})

Sternebewertung

Wenn es um die Sternebewertung im Interface geht, kommt hier eine relativ dumme Methode zum Einsatz. Es besteht darin, Bilder der drei möglichen Zustände der Sterne vorzubereiten, dann das spezifische Bewertungsarray basierend auf den Bewertungen zu berechnen und schließlich das Array zu durchlaufen, um dem Zustand zu entsprechen, den jeder Stern anzeigen soll.

<block wx:for="{{dbMarkArr||myStarArr}}" wx-for-item="item" >
    <image wx:if="{{item===0}}" src=&#39;../../static/image/empty.png&#39;></image>
    <image wx:if="{{item===1}}" src=&#39;../../static/image/half.png&#39;></image>
    <image wx:if="{{item===2}}" src=&#39;../../static/image/full.png&#39;></image>
</block>

Eine kleine Falle der Vorlage

Die Vorlage des Miniprogrammstemplatewird hier verwendet. Es ist zu beachten, dass hier eine Gefahr besteht. Der Dateiname der Vorlage muss mit dem name in der Vorlage übereinstimmen.

Probleme durch Netzwerkverzögerung

Während der Seitenwiedergabe ist es möglich, dass Douban-Daten aufgrund von Netzwerkproblemen nicht rechtzeitig zurückgegeben werden, was außerdem dazu führt, dass die Seitenvorlage keinen Wert festlegt den erforderlichen Wert. Ich habe hier lange gekämpft und schließlich einen eher uneleganten Ansatz gewählt, der darin bestand, die Ausführung der Funktion, die die relevanten Daten festlegt, um 2 Sekunden zu verzögern. Wenn Douban-Daten innerhalb von 2 Sekunden zurückgegeben werden können, scheint das Problem gelöst zu sein. Wenn innerhalb von 2 Sekunden keine gültigen Daten erhalten werden, ist das Problem nicht gelöst. Darüber hinaus haben 2 Sekunden definitiv einen erheblichen Einfluss auf das Benutzererlebnis, aber ich weiß nicht, wie ich das hier lösen soll...data

Ungenutzter Kalender

In den Anfängen des Miniprogramms Ich hatte ursprünglich geplant, die Funktion zu implementieren, durch Klicken auf den Kalender zur entsprechenden Filmseite zu springen. Später hatte ich jedoch das Gefühl, dass dies nicht gut war, und habe es nicht getan, aber der Kalender hat es erneut implementiert. Die Idee ist relativ klar. Ermitteln Sie zunächst die aktuelle Uhrzeit, berechnen Sie die Wochentage, denen der erste und der letzte Tag des aktuellen Monats entsprechen, und berechnen Sie dann, wie viele Tage vor dem ersten Tag und nach dem letzten Tag angezeigt werden sollen. Verbinden Sie dann den letzten Monat, diesen Monat und den nächsten Monat in einem Array und teilen Sie dann die Wochen entsprechend dem Array auf:

for (var i = 0; i < calendar.length; i++) {
      if (i % 7 == 0) {
        weeks[parseInt(i / 7)] = new Array(7);
      }
      weeks[parseInt(i / 7)][i % 7] = calendar[i];
    }

Dann rendern Sie:

<view class=&#39;calendarBody&#39;>
    <block wx:for="{{calendar.weeks}}" wx:for-item="weeks" >
      <view class=&#39;calendar-body-weeks&#39;>
        <block wx:for="{{weeks}}" wx:for-item="day">
          <view class="calendar-body-day {{calendar.month==day.month&&calendar.date==day.date? &#39;is-current&#39;:&#39; &#39;}} {{calendar.month!=day.month?&#39;nou-curMonth&#39;:&#39; &#39;}}" data-date=&#39;{{day.date}}&#39; bindtap=&#39;selectDate&#39;>{{day.date}}</view>
        </block>
      </view>
    </block>
</view>

Zuletzt

Es ist nur ein kleines Probeprogramm, es ist noch ein langer Weg.

Verwandte Artikel:

Das erste PHP-Applet (Lernen)

Schritte zur Autorisierung der Verwaltung und Entwicklung von Applets durch Dritte (klein). Programm (Programm-Tutorial)

Ähnliche Videos:

Geek Academy WeChat-Miniprogramm von den Grundlagen bis zum praktischen Video-Tutorial

Das obige ist der detaillierte Inhalt von[Miniprogramm] Erfahrungsaustausch über das erste entwickelte Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!