Detaillierte Erklärung des WeChat-Applets mit hoher Nachahmung von QQ

In diesem Artikel geht es hauptsächlich um einige der Probleme, auf die ich im Verlauf des SmallAppForQQ-Projekts gestoßen bin. Ich hoffe, dass die Lektüre dieses Artikels für Sie hilfreich sein wird.

SmallAppForQQ: Ein WeChat-Applet für den Zugriff auf QQ

Am Anfang des Artikels stellen wir Ihnen kurz die Projektstruktur vor. Wenn Sie die Entwicklungstools nicht installiert haben, können Sie dies tun Gehen Sie zu

github com/xiehui999/SmallAppForQQ

Herunterladen. Es gibt vier Hauptdateitypen in der Projektstruktur des WeChat-Miniprogramms:

1) WXML-Datei: (Weixin Markup Language) ist eine Reihe beschreibender Tag-Sprachen, die von WeChat auf der Grundlage von Vorgängern entwickelt wurden . Erstellen Sie eine Ansicht des Applets.

2) WXSS-Datei: (WeiXin Style Sheets) ist eine Reihe von Stilsprachen, die zur Beschreibung des Stils von Ansichtskomponenten in WXML verwendet werden.

3) JS-Datei: Geschäftslogikverarbeitung, und Backend Führen Sie Dateninteraktionen usw. durch.

4) JSON-Datei: Mini-Programmeinstellungsdatei, wie Seitenregistrierung, Seitentitel usw.

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.

app.json

Diese Datei im Stammverzeichnis ist die Programmeintragsdatei.

Diese Datei ist erforderlich. 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 usw.

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. Hier sind einige Probleme, die mit größerer Wahrscheinlichkeit auftreten –

Häufig gestellte Fragen rpx (responsives Pixel)

Das WeChat-Applet hat eine Größeneinheit neu definiert, die sich an Bildschirme mit unterschiedlichen Auflösungen anpassen kann, was vorgibt dass die Bildschirmbreite beispielsweise 750 Pixel beträgt. 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.

(rpx ist keine neu definierte Größeneinheit in WeChat. Es wurde bereits in der mobilen Entwicklung verwendet. WeChat hat die Stärken vieler Schulen übernommen und ein kleines Programmentwicklungs-Framework definiert, das auf den Vorgängern basiert. Und wie Apple , Apple verwendete Objective-C als Entwicklungssprache für Apps, als es den AppStore öffnete, aber OC wurde nicht von Apple erfunden.)

Ich habe für dieses Projekt Rpx-Größeneinheiten verwendet und bin dabei auf etwas sehr Seltsames gestoßen . Problem. Direkt zwischen zwei benachbarten Informationen wird eine Trennlinie angezeigt. Wenn keine einzelne Trennlinie vorhanden ist, wird diese nicht angezeigt >, Sie können sehen, dass es in der ersten keine tatsächliche Linie wie in der zweiten gibt, aber die anderen zeigen alle, dass die Attribute der Trennlinie gleich sind und die Trennlinien nicht unterschiedlich angezeigt werden 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. (Möglicherweise möchten Sie rpx für das Layout und px für dekorative Stile verwenden, was in der Praxis noch nicht verifiziert wurde.)

40013-Fehler

Wenn das WeChat-Applet zum ersten Mal herauskam, wenn Sie eingeben Geben Sie die AppID ein und fragen Sie diese Informationen ab. Dies bedeutet, dass sie nicht geknackt ist. Das offizielle Software-Update kann jedoch wie unten gezeigt für die Entwicklung ohne AppID ausgewählt werden. Wir können diesen Fehler beheben, indem wir „Keine AppID“ auswählen. Es wird empfohlen, offizielle Entwicklungstools zu installieren. Den Download-Link finden Sie hier.

(Derzeit können sich auch einzelne Entwickler für Miniprogramme bewerben, appIds sind nicht mehr knapp, kein solcher Ärger)

-4058 Fehler (fehlende app.json-Datei)

WeChat Mini-Programm Wenn das Programm ein Projekt erstellt, wird beim Erstellen des Projekts keine AppID generiert. app.josn ist die wichtigste Datei für die Seitenregistrierung, die Fenstereinstellungen, die Registerkarteneinstellungen und das Netzwerk Alle Anforderungszeiteinstellungen befinden sich 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 Zahl -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 app.json-Datei 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, das eine Seite erstellt. Der einfachste Weg besteht darin, den Lebenszyklus der Seitenwiedergabe in der Seite zu verwalten 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 Sie sich angewöhnen, beim Erstellen einer Seite zuerst eine Seite in der js-Datei zu erstellen.

Seitenroutenfehler

Wörtlich bedeutet es einen Seitenrouting-Fehler. Es gibt zwei Routing-Methoden in WeChat. Eine besteht darin, Komponenten in WXML-Dateien zu verwenden, und die andere darin, wx.navigateTo aufzurufen.

Der folgende Code -

wxml:

Suche nach

js:

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

Wenn Sie so schreiben, herzlichen Glückwunsch ! wird der oben angezeigte Fehler angezeigt, der durch wiederholte Aufrufe der Route verursacht wird. Die Lösung besteht darin, eine Route zu löschen, die Komponente zu löschen oder wx.navigateTo zu löschen. Zusätzlich zu den oben genannten möglichen Routing-Fehlern gibt es auch eine Situation ähnlich der folgenden Code-

Suche

, die ebenfalls nicht zulässig ist, was bedeutet, dass die Navigatorkomponente nicht darin verschachtelt werden kann. Komponentennavigator.

Kein *-Handler auf der aktuellen Seite vorhanden.

Das bedeutet wahrscheinlich, dass die aktuelle Seite diesen Handler nicht hat, sodass Sie feststellen können, ob er definiert wurde, und auch auf das Mögliche hinweisen Ort, an dem der Fehler auftritt, Seiten/Nachricht/Nachricht. Tatsächlich tritt diese Art von Problem normalerweise auf, wenn wir einige Verarbeitungsereignisse in wxml definieren. Wenn die 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.

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

tabBar-Einstellungen werden nicht angezeigt

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 schreibt die Seite in das Seitenfeld von app.json, z. B.

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

1 , tabBar wird aufgrund falscher Schreibweise nicht angezeigt. Schreiben Sie den darin enthaltenen Großbuchstaben B in Kleinbuchstaben, wodurch tabBar nicht angezeigt wird.

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

3 Die durch den pagePath der tabBar-Liste angegebene Seite wird nicht als geschrieben das erste auf der Registrierungsseite. Die Logik des WeChat-Applets besteht darin, dass die erste Seite in „Seiten“ die erste Seite ist, 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 keine TV-TabBar geben.

5. Die Anzahl der tabBars beträgt weniger als zwei Elemente oder mehr als fünf Elemente. WeChat 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(){// 页面关闭}
})

Sie sollten anhand der Kommentare verstehen, dass der Einstellungstitel in der onReady-Methode geschrieben ist, was bedeutet, dass Die Seite wurde gerendert. Der vor onReady angezeigte Titel ist der Titel in der JSON-Datei (Überschreibungsbeziehung; wenn der Titel in der JSON-Datei der Unterseite festgelegt ist, wird die globale Einstellung app.json überschrieben). Sie können sagen, dass wx.setNavigationBarTitle in der Funktion onLoad geschrieben ist, aber diese Einstellung ist falsch, da die Seite nach der Ausführung von onLoad gerendert wird. Beim Rendern der Seite wird der Titel aus der JSON-Datei gelesen, was dazu führt, dass der Titel von onLoad festgelegt wird nur sein Es wird vor dem Rendern der Seite angezeigt, und dann wird die Kachel der JSON-Datei angezeigt. Jetzt sollten Sie verstehen, dass der beste Ort zum Festlegen von ttle darin besteht, eine JSON-Datei für die Unterdatei zu schreiben und sie in die Datei zu schreiben . Wenn Sie die Farbe ändern möchten, fügen Sie sie direkt zur Datei hinzu. Ja, die in dieser Datei geschriebenen Eigenschaftswerte überschreiben die in app.json festgelegten Werte.

{
"navigationBarTitleText":"音乐"}

Der Titel des Fensters hängt von drei Stellen ab:

1. App-Titeleinstellung in app.json

2. Titeleinstellung in der JSON-Datei gleicher Name der Seite

3, der JS-Code wird über die wx.setNavigationBarTitle-Schnittstelle festgelegt

Wenn der Titel statisch ist, wird er über 2 festgelegt. Wenn das Fenster selbst dynamisch ist und der Titel von den übergebenen Parametern abhängt, z. B. der Skalen-ID, dann ist es am besten, den navigationBarTitleText in 1 auf leer zu setzen und ihn dann in js zu verschieben. Beachten Sie, dass leere Einstellungen alle Seiten betreffen.

wx.navigateTo kann die Seite nicht öffnen

Eine Anwendung kann nur 5 Seiten gleichzeitig öffnen. Nachdem 5 Seiten geöffnet wurden, kann wx.navigateTo keine neue Seite normal öffnen. Bitte vermeiden Sie mehrstufige Interaktionen oder verwenden Sie wx.redirectTo.

Der Einfachheit halber wird empfohlen, wx.redirectTo zu verwenden und dann eine kleine Programm-Einzelseitenanwendung zu entwickeln, eine Einzelseitenanwendung, genau wie die Einzelseiten-Website in der prähistorischen Zeit der PC-Websites .

Gibt es in Bezug auf die Öffnungsbeschränkung von wx.navigateTo5-Seiten ein Tool oder eine Lösung, um das Problem zu lösen?

navigateTo ist auf fünf Ebenen begrenzt, was tatsächlich vorschreibt, dass die Elemente im Seitenstapel fünf nicht überschreiten dürfen. Wenn die Anzahl der Elemente im Seitenstapel fünf erreicht, können keine weiteren Elemente hinzugefügt werden. Für eine detaillierte Beschreibung des Seitenstapels des Miniprogramms lesen Sie bitte diesen Artikel:

www.ifanr.com/minapp/744601

Dieser Artikel bietet keine Lösung. Der Codierer gibt hier eine theoretische Lösung:

1, verwenden Sie „redirectTo“ für jeden Sprung und verwenden Sie es nur in js. Bei Verwendung in WXML wird es auch verwendet, indem das Ereignis zuerst gebunden und in der Ereignisfunktion

verwendet wird.

2，自已实现一个页面栈，每次跳转之前，先推进这个自定义的页面栈。

3，不使用wx.navigateBack，从自定义页面栈中取出一个页面，redirectTo

这样就实现了无级跳转。小程序官方的机制，适用于简单的、层级不多的场景。使用如上自定义栈，好处还有减少内存占用，因为永远都是redirectTo。

本地资源无法通过 css 获取

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

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在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"})
},
})

这样就实现了页面间数据传递功能。

另外，听说支付宝也开始搞小程序了，连IDE都很像微信小程序开发工具：

文档页：

从“小程序”这个名字来看，因为“程序”是通用名词，而“小”本身没有独特性，所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过，这也就意味着任何公司都可以做自己的“小程序”平台。

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des WeChat-Applets mit hoher Nachahmung von QQ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!