Analyse häufig gestellter Fragen bei der WeChat Mini-Programmentwicklung

Es ist mehr als zehn Tage her, dass die interne Beta-Version des WeChat Mini-Programms veröffentlicht wurde, und die Diskussion über das WeChat Mini-Programm war von seiner Veröffentlichung bis heute äußerst heiß Das Programm beschäftigt die Schlagzeilen verschiedener technischer Foren. Natürlich gibt es auch Nachrichtenberichte über WeChat-Miniprogramme. Tencent hat in China immer noch großen Einfluss. Wir alle wissen, dass das WeChat-Miniprogramm am ersten Tag eine interne Betaversion veröffentlichte und keine offiziellen Entwicklungsdokumente und Entwicklungstools offenlegte, aber das kann die Neugier der Techniker nicht bremsen.

Da ich mich auch sehr für kleine Programme interessiere und es für eine sehr interessante Sache halte, habe ich sofort eine kleine Demo gemacht. Mein Niveau ist begrenzt, daher ist der Prozess, es zu tun, auch ein Lernprozess ein Verbesserungsprozess.
In diesem Artikel geht es hauptsächlich um einige Probleme, auf die ich beim Schreiben der Demo gestoßen bin. Wenn es Ihnen hilft, diesen Artikel zu lesen, freue ich mich sehr.

1: Projektstruktur

Die WeChat-Applet-Projektstruktur besteht hauptsächlich aus vier Dateitypen, wie folgt

WXML (WeiXin Markup Language) ist eine Reihe von Tag-Sprachen, die entwickelt wurden Durch die Kombination mit Basiskomponenten und Ereignissystemen kann die Struktur der Seite aufgebaut werden. Intern handelt es sich hauptsächlich um eine Reihe von Komponenten, die von WeChat selbst definiert werden.

WXSS (WeiXin Style Sheets) ist eine Reihe von Stilsprachen, die zur Beschreibung von WXML-Komponentenstilen,

JS-Logikverarbeitung, Netzwerkanforderungen

JSON-Applet-Einstellungen usw. verwendet werden B. Seitenregistrierung, Seitentitel und TabBar.

Hinweis: Um Entwicklern die Reduzierung von Konfigurationselementen zu erleichtern, ist es vorgeschrieben, dass die vier Dateien, die die Seite beschreiben, denselben Pfad und Dateinamen haben müssen.

Die vier mit app benannten Dateitypen im Stammverzeichnis sind die Programmeintragsdateien.

app.json

Diese Datei muss vorhanden sein. Ohne diese Datei kann das Projekt nicht ausgeführt werden, da das WeChat-Framework diese als Konfigurationsdateieintrag und die globale Konfiguration des gesamten Miniprogramms verwendet. Einschließlich Seitenregistrierung, Netzwerkeinstellungen und Fensterhintergrundfarbe des Miniprogramms, Konfiguration des Navigationsleistenstils und Konfiguration des Standardtitels.

app.js
Diese Datei muss vorhanden sein, sonst wird ein Fehler gemeldet! Aber erstellen Sie einfach diese Datei. Sie müssen nichts schreiben.
In Zukunft können wir die Lebenszyklusfunktionen des Miniprogramms überwachen und verarbeiten und globale Variablen in dieser Datei deklarieren.

app.wxss
Global konfigurierte Stildatei, für das Projekt nicht erforderlich.

Wenn Sie die grundlegende Dateistruktur des Miniprogramms kennen, können Sie mit dem Studium der offiziellen Demo beginnen. Wenn Sie während des Rechercheprozesses etwas nicht verstehen, können Sie in der offiziellen Dokumentation nach Antworten suchen. Wenn Sie keine Antwort finden oder Fragen haben, können Sie diesen Blog besuchen und miteinander kommunizieren. Hier sind einige Probleme, die mit größerer Wahrscheinlichkeit auftreten.

2: Häufig gestellte Fragen

rpx (responsive Pixel)

Das WeChat-Applet hat eine Größeneinheit neu definiert, die sich an Bildschirme mit unterschiedlichen Auflösungen anpassen kann. Sie spezifiziert den Bildschirm Die Breite beträgt beispielsweise 750 Pixel. Auf dem iPhone 6 beträgt die Bildschirmbreite beispielsweise 375 Pixel und es gibt insgesamt 750 physische Pixel. Dann ist 750 Pixel = 375 Pixel = 750 physische Pixel, 1 Pixel = 0,5 Pixel = 1 physisches Pixel.

Ich habe für dieses Projekt Rpx-Größeneinheiten verwendet und bin dabei auf ein sehr seltsames Problem gestoßen. Es gibt eine Trennlinie direkt zwischen zwei benachbarten Informationen. Ich habe die Höhe der Linie auf 1 Rpx festgelegt. Wenn jedoch keine einzelne Trennlinie vorhanden ist, wird sie nicht angezeigt. Wie in der Abbildung unten gezeigt >, Sie können sehen, dass es in der ersten keine tatsächliche Linie wie in der zweiten gibt, aber die anderen zeigen, dass die Attribute der Trennlinie gleich sind und die Trennlinien, die nicht angezeigt werden, unterschiedlich sind Mobiltelefone (verschiedene Auflösungen) sind ebenfalls unterschiedlich und einige Auflösungen werden nicht angezeigt. Ich weiß nicht, ob dies ein Fehler des Simulators oder ein Fehler von rpx ist. Schließlich ist die Höheneinheit der Trennlinie px, wodurch dieses Problem gelöst wird.

Fehler 40013

Als das WeChat-Applet zum ersten Mal herauskam und Sie die AppID eingeben und diese Informationen abfragen, bedeutet dies, dass es nicht geknackt ist, aber jetzt kann das offizielle Software-Update entwickelt werden ohne AppID, wie unten gezeigt, zwischen uns. Durch Auswahl von „Keine AppID“ wird dieser Fehler behoben. Es wird empfohlen, offizielle Entwicklungstools zu installieren. Den Download-Link finden Sie hier.

Fehler 4058

Wählen Sie beim Erstellen eines Projekts für das WeChat-Applet keine AppID. App.josn ist die wichtigste Datei für die Seitenregistrierung, die Fenstereinstellungen, die Registerkarteneinstellungen und das Netzwerk Die Einstellungen für die Anforderungszeit befinden sich alle in dieser Datei. Wenn in dem von Ihnen erstellten Projektverzeichnis keine app.json-Datei vorhanden ist, wird der folgende Fehler gemeldet.

Wir sehen, dass in der obigen Fehlermeldung die Nummer -4058 steht. Dies dürfte der häufigste Fehler sein, der beim ersten Aufrufen des WeChat-Applets auftritt Pfad dahinter, der korrigiert werden kann. Überprüfen Sie den Pfad, um festzustellen, ob die Datei vorhanden ist. Der Grund für diesen Fehler liegt im Allgemeinen darin, dass das zum Erstellen des Projekts ausgewählte Verzeichnis falsch ist oder eine nicht vorhandene Seite in app.json registriert ist.
Natürlich gibt es auch eine andere Situation, in der die in den Seiten der Datei app.json registrierte Seite nicht erstellt wird oder Sie eine Seite löschen, aber die Registrierung nicht abbrechen, was ebenfalls zu einem -4058-Fehler führt.

Seitenregistrierungsfehler

Dieser Fehler ist möglicherweise leicht zu verstehen, Seitenregistrierungsfehler. Die Seite wird über das Page-Objekt gerendert. Die einfachste Möglichkeit besteht darin, Page({}) in die Seite zu schreiben Hier werden Datenverarbeitung und Ereignisse abgeschlossen. Der Grund für diesen Fehler liegt normalerweise darin, dass die Seite gerade erst erstellt wurde und die js-Datei nicht verarbeitet wurde oder vergessen wurde. Daher müssen wir uns angewöhnen, beim Erstellen einer Seite zuerst eine Seite in der js-Datei zu erstellen.

Seitenroutenfehler

Bedeutet wörtlich: Seitenroutingfehler. Es gibt zwei Routingmethoden in WeChat. Eine Möglichkeit besteht darin, den folgenden Code in der WXML-Datei zu verwenden:

WXML-Datei:

JS-Datei-Ereignisverarbeitungsfunktion:
bindtap:function(event){
wx.navigateTo({
URL: „Suche/Suche“
})
}
Wenn Sie so schreiben, herzlichen Glückwunsch, wird der oben angezeigte Fehler durch wiederholte Aufrufe der Route-Verarbeitung verursacht eine Route löschen, löschen

266bfe00d64d5d8041f83dc05ad99533266bfe00d64d5d8041f83dc05ad99533fa21f047ba38ed4f9f86acd0c86489bc Suchende5f4c1163741e920c998275338d29b29a67f2adf02d82de7f8f0475590779aa9a67f2adf02d82de7f8f0475590779aa

Dies ist auch nicht zulässig, d. h.

Kein *-Handler auf der aktuellen Seite vorhanden.

bedeutet wahrscheinlich, dass die aktuelle Seite nicht über diese Verarbeitung verfügt, sodass festgestellt werden kann, ob sie definiert wurde, und auch auf den möglichen Ort des Fehlers hingewiesen wird: Seiten/Nachricht/Nachricht Tatsächlich ist dies der Fall Diese Art von Problem tritt normalerweise auf, weil wir in wxml etwas zur Verarbeitung von Ereignissen definiert haben. Wenn diese Ereignisverarbeitungsmethode jedoch nicht in der JS-Datei implementiert ist, tritt dieser Fehler auf. Dann folgen wir den Anweisungen und fügen der js-Datei die Ereignisverarbeitung hinzu, wie unten gezeigt. Nach dem Hinzufügen wird diese Fehlermeldung nicht mehr angezeigt.

tabBar-Einstellungen werden nicht angezeigt

  bindtap:function(event){
    wx.navigateTo({
      url: "search/search"
    })
  },

Es gibt viele Gründe, warum tabBar nicht angezeigt wird, indem Sie direkt zur Datei app.json gehen Am einfachsten ist es für diejenigen, die gerade erst das WeChat-Applet lernen. Die gemachten Fehler sind nichts weiter als die folgenden:

Die Registrierungsseite besteht darin, die Seite in das Seitenfeld von app.json zu schreiben, z. B.

„Seiten“. ":[ "pages/message/message", "pages/contact /contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/ logs"

]

TabBar wird aufgrund falscher Schreibweise nicht angezeigt. Schreiben Sie den Großbuchstaben B in Kleinbuchstaben, was dazu führt, dass tabBar nicht angezeigt wird.

Das Feld „pagePath“ wird nicht in die tabBar-Liste geschrieben, oder die Seite im pagePath ist nicht registriert.

Die durch den pagePath der tabBar-Liste angegebene Seite wird nicht zuerst auf die Registrierungsseite geschrieben. Die Logik des WeChat-Applets besteht darin, dass die erste Seite in „Seiten“ die Startseite ist. Dies ist die erste Seite, die nach dem Start des Programms angezeigt wird. Wenn die durch den pagePath der tabBar-Liste angegebene Seite nicht die erste Seite in Seiten ist, Natürlich wird es so sein. Es gibt keine TV-TabBar mehr.
Die Anzahl der tabBar beträgt weniger als zwei Elemente oder mehr als fünf Elemente. Der WeChat-Beamte legt eindeutig fest, dass die tabBar mindestens zwei Elemente und maximal fünf Elemente enthalten muss. Die tabBar wird nicht angezeigt, wenn sie größer oder kleiner ist.

NavigationBarTitle-Anzeigeproblem

Sie sollten das Problem anhand dieses dynamischen Diagramms finden. Wenn Sie auf Musik klicken, um die Musikoberfläche aufzurufen, wird zuerst der Titel WeChatForQQ und dann die Musik angezeigt Dies ist definitiv inakzeptabel. Der Grund dafür ist, dass der Titel der Musikschnittstelle in der Lebenszyklusmethode der Seite in der js-Datei festgelegt ist.

Wenn Sie den Lebenszyklus nicht verstehen, können Sie zum Anzeigen klicken

 Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){    // 页面渲染完成
    //NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏wx.setNavigationBarTitle({
  title: '音乐'})
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  }
})

通过注释你应该明白了，设置标题写在了onReady方法中，也就是页面已经渲染完成了，在onReady之前显示的title就是json文件（覆盖关系，如果在子页面json文件设置title会覆盖app.json全局设置）中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执行过后才渲染页面，在渲染页面时title会从json文件中读取，导致onLoad设置的title会只在页面渲染之前展示，之后就显示json文件的tile，所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件，在文件中写入，如果想改变颜色直接在文件中添加就可以，该文件所写的属性值会覆盖app.json中设置的值。

{
"navigationBarTitleText": "音乐"
}

wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用标签

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中

 <navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
          <view class="item" >
             <view class="item-left">
                  <image src="{{item.url}}" class="image"/>
             </view>
             <view class="item-middle">
                  <view>
                       <text class="title">{{item.title}}</text>
                  </view>
                  <view>
                      <text class="message">{{item.message}}</text>
                  </view>
            </view>
            <view class="item_right">
                <view><text class="time">{{item.time}}</text></view>
                <view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
            </view>
         </view>
         <view  class="line"></view>
       </navigator>

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({
  data:{    // text:"这是一个页面"
    isHiddenToast:true
  }
  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数
    console.log(options.title)     console.log(options.message)
  },
  onReady:function(){    // 页面渲染完成
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"})
  },
})

这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！