Grundkenntnisse in der Entwicklung eines WeChat-Applets mit mpvue

1. Einführung in mpvue

mpvue ist ein Front-End-Framework, das Vue.js verwendet, um kleine Programme zu entwickeln. Das Framework basiert auf dem Kern von Vue.js. mpvue modifiziert die Laufzeit- und Compiler-Implementierung von Vue.js, sodass es in einer Miniprogrammumgebung ausgeführt werden kann, und führt so einen vollständigen Satz der Vue.js-Entwicklung ein Erfahrung in der Entwicklung von Miniprogrammen. mp ist die Abkürzung für Miniprogramm.

2. Schnellstart mit mpvue

① Einführung der mpvue-Vorlage durch Gerüstbau

vue 3.0 bereits unterstützt den Befehl vue init nicht, daher müssen Sie es separat installieren @vue/cli-initNach der Installation können Sie die folgenden Schritte ausführen, um die mpvue-Vorlage einzuführen

npm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev

Der Befehl npm run dev Im Stammverzeichnis des Projekts wird ein dist-Verzeichnis generiert: Konvertieren Sie Vue-Projekte in WeChat-Miniprogrammprojekte

② Erstellen Sie eine Entwicklungsumgebung für Miniprogramme

WeChat stellt ein spezielles WeChat-Entwicklertoolzur Verfügung. Sie müssen die WeChat-Entwicklertools herunterladen und installieren. Außerdem müssen Sie eine Miniprogramm-ID beantragen, nämlich AppID, weil Miniprogramme über die WeChat-Entwicklertools erstellt. Das Projekt muss die AppIDausfüllen, die auf der öffentlichen WeChat-Plattform beantragt werden kann.

③ Debugging-Projekt

Starten Sie das WeChat-Applet-Projekt über das WeChat-Entwicklertool. Das ausgewählte Projektverzeichnis ist das Stammverzeichnis des mpvue-Projekts, nicht das generierte dist-Verzeichnis. Da die WeChat-Entwicklertools das Anzeigen von .vue-Dateien nicht unterstützen, müssen wir immer noch unsere eigenen Entwicklungstools verwenden, um den Quellcode zu debuggen.

3. Einige Nutzungsdetails von mpvue

① Das src-Verzeichnis von mpvue ist dasselbe wie vuehat auch ein App.vue-Stammverzeichnis Komponente,App.vue-Stammkomponente ist nur eine Struktur,hat keinen spezifischen Inhalt, die Stammkomponente verfügt über eine entsprechendemain.js-Datei zum Rendern Die App.vue-Stammkomponente, d. Dabei handelt es sich um dieglobale Seitenkonfigurationsdatei, die für dieSeitenregistrierung,TabBar-Registrierung,globale Fensterstileinstellungverwendet wird, wie zum Beispiel:// App.vue

import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue(App) app.$mount()

// app.json

{ "pages": [ "pages/index/main" ], "tabBar": { ...... }, "window": { "backgroundColor":"#00BFFF", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "测试", "navigationBarTextStyle": "black" } }

② Die in mpvue definierten Seiten sind platziert in

pages im src-Verzeichnis. Im Verzeichnis

einem Ordnerfür eine Seite. Jeder Seitenordner muss eine.vue-Dateihaben und einemain.js-Datei, main Was .js hauptsächlich tut, ist,die der aktuellen Seite entsprechende .vue einzuführen, dann eine Vue-Instanz als Parameter des Vue-Konstruktors zu erstellen und undder Name von main.js kann nicht geändert werden,kann nur main sein.// main.js

import Vue from 'vue' import App from './index' // add this to handle exception Vue.config.errorHandler = function (err) { if (console && console.error) { console.error(err) } } const app = new Vue(App) app.$mount()

Seiten enthalten normalerweise index.vue, main.js und main json

verwendet äußere Ordner, um verschiedene Seiten zu unterscheiden , und im nativen Applet werden verschiedene Seiten auch durch äußere Ordner unterschieden. aber die vier im OrdnerDer Name jeder Seite kann derselbe wie der äußere Ordner sein oder unterschiedlich sein, aber die vier Dateien müssen einheitlich sein . ③ Jedes Mal, wenn eine neue Seite hinzugefügt wird, muss das Projekt neu gestartet werden, d. h. npm run dev erneut ausführen.

4. Grundlagen des WeChat Mini-Programms und häufig verwendete APIs

①Klicken Sie auf die Schaltfläche, um den Benutzer zu fragen, ob er Benutzerinformationen autorisieren und abrufen möchte

Das WeChat-Miniprogramm gab uns den Button, der einigeWeChat-Entwicklungsfunktionen

bereitstellt, indem ein

Open-Type-Attribut zum

hinzugefügt wurde ;-tag zur darstellung von < strong> Um der Schaltfläche den Fähigkeitstyp zu geben, z. B.getUserInfo , also die Möglichkeit, auf die Schaltfläche zu klicken, um Benutzerinformationen zu erhalten, müssen wir uns das < anhören >getuserinfoEreignis auf der , mpvue Es ist auf Basis des Miniprogramms gekapselt und Benutzerinformationen müssen über e.mp.detail.userInfo, abgerufen werden

点击开始