So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten

Projekthintergrund

Es handelt sich hauptsächlich um eine h5-Seite und die damit verbundenen Funktionen sind nicht sehr schwierig. Der Hauptgrund ist, dass ich schon lange kein öffentliches Konto mehr entwickelt habe und daher mit den gesamten Entwicklungsschritten nicht ganz vertraut bin. Hierzu gehören der Aufruf des WeChat SDK, die WeChat-Autorisierung des Benutzers und der SDK-Zugriff usw. Hauptsächlich rund um die Entwicklungsschritte.

Start

Da es sich um eine h5-Seite handelt, ist das Projekt insgesamt nicht umfangreich, sodass wir uns bei der Auswahl der Projekttechnologie entschieden haben, für die Entwicklung das Vue-Framework zu verwenden. Ich persönlich finde, dass die Gesamteffizienz bei der Entwicklung von h5 durch die Verwendung von Vue relativ hoch ist. Für die UI-Bibliothek habe ich die Vant-Bibliothek gewählt. Die Komponenten sind insgesamt gut. Sie unterstützt benutzerdefinierte Designs und erleichtert die Stilanpassung, was für die H5-Entwicklung besser geeignet ist.

Erstellen Sie ein Projekt über vue-cli

Gerüstwerkzeuge installieren

npm install -g @vue/cli
# ODER
globales Garn-Add @vue/cli

Erstellen eines Projekts

vue erstellt Wasserprojekt

Erstellen Sie dann das Projektverzeichnis

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── Paket-Lock.json
├── Paket.json
├── öffentlich
│ ├── favicon.ico
│ └── index.html
├── Quelle
│ ├── App.vue
│ ├── API
│ ├── Vermögenswerte
│ ├── Komponenten
│ ├── global.weniger
│ ├── main.js
│ ├── verspotten
│ ├── Router
│ ├── speichern
│ ├── Dienstprogramme
│ └── Ansichten
└── vue.config.js

Über die mobile Anpassung

Da es sich um eine mobile Webseite handelt, muss diese angepasst werden. Im Internet gibt es viele Anpassungslösungen, auf die ich hier nicht näher eingehen werde. Der Hauptpunkt ist, dass die in diesem Projekt verwendete Lösung darin besteht, amfe-flexible mit rem zu kombinieren, was eine Lösung von Taobao ist. Für die Umrechnung der px-Einheit des Design-Entwurfs in rem kommt die postcss-pxtorem-Lösung von postcss zum Einsatz. Tatsächlich ist es auch möglich, den Loader von Webpack zu verwenden. Sie können Baidu nach der spezifischen Lösung durchsuchen.

• Installieren Sie das amfe-flexible-Paket

npm ich amfe-flexibel -S

• Installieren Sie das Plugin postcss-pxtorem

npm ich postcss-pxtorem -D

• Einführung von amfe-flexible in main.js

importiere "amfe-flexible"

• Konfigurieren Sie das PostCSS-Plugin in vue.config.js
  

Wenn im Projekt keine Datei vue.config.js vorhanden ist, erstellen Sie manuell eine. Dies ist die Konfigurationsdatei von vue cli.

css: {
    loaderOptions: {
      postcss: {
        Plugins: [
          autoprefixer(),
          pxtorem({
            Wurzelwert: 37,5,
            Eigenschaftenliste: ["*"],
          }),
        ],
      },
  },

Zu diesem Zeitpunkt ist die Stilanpassung abgeschlossen. Der Grund, warum der RootValue 37,5 beträgt, liegt hauptsächlich an der Anpassung von Vant. Daher verwendet der Designentwurf 375px als Referenz. Wenn Sie keine UI-Bibliothek eines Drittanbieters verwenden, können Sie 750 als Referenz für den Designentwurf verwenden, und der Stammwert ist 75.

Verwenden von normalize.css

Verwenden Sie normalize.css, um grundlegende Stilunterschiede zwischen Browsern zu beseitigen

npm ich normalize.css -S

Importieren in main.js

importiere "normalize.css"

Zugang zur Vant-Bibliothek

Vant ist eine von Youzan erstellte UI-Bibliothek. Da sie auf den Schultern von Riesen steht, ist die Effizienz natürlich viel schneller. Solche Drittanbieterbibliotheken können nur als Grundlage dienen und der Stil muss angepasst werden, wenn ein Designentwurf vorliegt. Einfache Stile Vant unterstützt die Themenanpassung, was recht praktisch ist. Wenn einige Stile keine benutzerdefinierten Themen bereitstellen, können Sie nur Stile schreiben, um sie abzudecken.

• Laden Sie vant herunter und installieren Sie es

npm ich will -S

• Es gibt drei Möglichkeiten, Komponenten einzuführen, die auch auf der offiziellen Website vorgestellt werden. Weitere Einzelheiten finden Sie auf der offiziellen Website. Hier ist eine kurze Einführung in die Verwendung:
  

Methode 1. Komponenten bei Bedarf automatisch importieren (empfohlen)

babel-plugin-import ist ein Babel-Plugin, das Importanweisungen während der Kompilierung automatisch in On-Demand-Importanweisungen umwandelt.

# Installieren Sie das Plugin npm i babel-plugin-import -D
// Konfiguration in .babelrc hinzufügen // Hinweis: webpack 1 muss libraryDirectory nicht festlegen
{
  "Plugins": [
    ["importieren", {
      "Bibliotheksname": "vant",
      "libraryDirectory": "es",
      "Stil": wahr
    }]
  ]
}

// Für Benutzer, die babel7 verwenden, können Sie module.exports = { konfigurieren.
  Plugins: [
    ['importieren', {
      Bibliotheksname: 'vant',
      libraryDirectory: 'es',
      Stil: wahr
    }, 'vant']
  ]
};

// Anschließend können Sie die Vant-Komponente direkt in den Code importieren // Das Plugin konvertiert den Code in Methode 2 automatisch in das On-Demand-Importformular import { Button } from 'vant';

Methode 2: Komponenten bei Bedarf manuell importieren

Ohne Plugins zu verwenden, können Sie die erforderlichen Komponenten manuell importieren.

Button aus „vant/lib/button“ importieren;
importiere „vant/lib/button/style“;

Methode 3. Alle Komponenten importieren

Vant unterstützt den gleichzeitigen Import aller Komponenten. Die Einführung aller Komponenten erhöht die Größe des Codepakets, daher wird dieser Ansatz nicht empfohlen.

importiere Vue von „vue“;
importiere Vant von „vant“;
importiere "vant/lib/index.css";

Vue.use(Vant);

Tipps: Nach der Konfiguration des On-Demand-Imports dürfen nicht alle Komponenten direkt importiert werden.

Vant-Design anpassen

Schritt 1: Importieren Sie die Stilquelldatei

Wenn Sie ein Design anpassen, müssen Sie die Less-Style-Datei importieren, die der Komponente entspricht. Zwei Methoden werden unterstützt: On-Demand-Import und manueller Import.

Stile bei Bedarf importieren (empfohlen)
Konfigurieren Sie den On-Demand-Import von Stilquelldateien in babel.config.js. Beachten Sie, dass babel6 den On-Demand-Import von Stilen nicht unterstützt. Bitte importieren Sie die Stile manuell.

modul.exporte = {
  Plugins: [
    [
      'Import',
      {
        Bibliotheksname: "vant",
        libraryDirectory: 'es',
        //Geben Sie den Stilpfad style: (name) => `${name}/style/less` an,
      },
      'vant',
    ],
  ],
};

Manuelles Importieren von Stilen

// Alle Stile importieren import 'vant/lib/index.less';

// Einen einzelnen Komponentenstil importieren importiere 'vant/lib/button/style/less';

Schritt 2: Stilvariablen ändern

Verwenden Sie die von Less bereitgestellten „modifyVars“, um die Variablen zu ändern. Nachfolgend sehen Sie die Referenz-Webpack-Konfiguration.

// webpack.config.js
modul.exporte = {
  Regeln:
    {
      Test: /\.less$/,
      verwenden: [
        // ...andere Loader-Konfiguration {
          Lader: "less-loader",
          Optionen:
            // Wenn die Less-Loader-Version niedriger als 6.0 ist, entfernen Sie bitte die LessOptions-Ebene und konfigurieren Sie die Optionen direkt.
            wenigerOptionen: {
              Variablen ändern: {
                // Direkt die Variable 'text-color' überschreiben: '#111',
                'Rahmenfarbe': '#eee',
                // Oder Sie können es durch eine Less-Datei überschreiben (der Dateipfad ist ein absoluter Pfad)
                hack: `true; @import "Ihr-weniger-Dateipfad.weniger";`,
              },
            },
          },
        },
      ],
    },
  ],
};

Wenn das Projekt von vue-cli erstellt wird, kann es in vue.config.js konfiguriert werden.

// vue.config.js
modul.exporte = {
  css: {
    loaderOptions: {
      weniger: {
        // Wenn die Less-Loader-Version niedriger als 6.0 ist, entfernen Sie bitte die LessOptions-Ebene und konfigurieren Sie die Optionen direkt.
        wenigerOptionen: {
          Variablen ändern: {
            // Direkt die Variable 'text-color' überschreiben: '#111',
            'Rahmenfarbe': '#eee',
            // Oder Sie können es durch eine Less-Datei überschreiben (der Dateipfad ist ein absoluter Pfad)
            hack: `true; @import "Ihr-weniger-Dateipfad.weniger";`,
          },
        },
      },
    },
  },
};

Einführung in WeChat jssdk

Es gibt zwei Möglichkeiten, jsssdk einzuführen. Eine besteht darin, es direkt über einen js-Link einzuführen und in index.html zu schreiben.

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Rufen Sie dann window.wx.xxx auf und verwenden Sie dort die vom SDK bereitgestellten Methoden.

Die zweite Möglichkeit ist die Verwendung des npm-Pakets

• Installieren Sie weixin-js-sdk

npm ich weixin-js-sdk -S

• Verwendung in main.js

wx aus „weixin-js-sdk“ importieren

//Behalten Sie den Prototyp von Vue für eine einfache Verwendung Vue.prototype.$wx = wx;

Nach der Einführung können Sie this.$wx.xx verwenden, um die entsprechende Methode zu verwenden, zum Beispiel:

 dies.$wx.config({
          debug: false, // Schalte den Debug-Modus ein, die Rückgabewerte aller API-Aufrufe werden auf der Clientseite gemeldet. Wenn du die eingehenden Parameter anzeigen möchtest, kannst du sie auf der PC-Seite öffnen. Die Parameterinformationen werden über das Protokoll gedruckt, das nur auf der PC-Seite gedruckt wird.
          appId: res.data.appId, // Erforderlich, eindeutige Kennung des öffentlichen Kontos timestamp: String(res.data.timestamp), // Erforderlich, Zeitstempel zum Generieren der Signatur nonceStr: String(res.data.nonceStr), // Erforderlich, zufällige Zeichenfolge zum Generieren der Signatur signature: res.data.signature, // Erforderlich, Signatur, siehe Anhang 1
          jsApiList: [
            "Netzwerktyp abrufen",
            "Standort abrufen",
          ], // Erforderlich, Liste der zu verwendenden JS-Schnittstellen, eine Liste aller JS-Schnittstellen finden Sie in Anhang 2
        });

Sie können die API erst nach der Registrierung und Überprüfung des SDK verwenden

Tatsächlich befindet sich die wichtige Registrierungslogik vollständig im Backend und bietet eine Schnittstelle zum Abrufen von Konfigurationsinformationen, und das Frontend ruft zur Registrierung direkt die Konfigurationsmethode des SDK auf. Schreiben Sie hier die Registrierungslogik des SDK in die Datei app.vue

• Kapseln Sie eine Methode zum Registrieren des SDK

async getWxJssdkConf() {
      const res = warte darauf.$api.getSdkConfig({
        URL: Fenster.Standort.href.split("#")[0],
      });
      wenn (res.erfolg) {
        dies.$wx.config({
          debug: false, // Schalte den Debug-Modus ein, die Rückgabewerte aller API-Aufrufe werden auf der Clientseite gemeldet. Wenn du die eingehenden Parameter anzeigen möchtest, kannst du sie auf der PC-Seite öffnen. Die Parameterinformationen werden über das Protokoll gedruckt, das nur auf der PC-Seite gedruckt wird.
          appId: res.data.appId, // Erforderlich, eindeutige Kennung des öffentlichen Kontos timestamp: String(res.data.timestamp), // Erforderlich, Zeitstempel zum Generieren der Signatur nonceStr: String(res.data.nonceStr), // Erforderlich, zufällige Zeichenfolge zum Generieren der Signatur signature: res.data.signature, // Erforderlich, Signatur, siehe Anhang 1
          jsApiList: [
            "Netzwerktyp abrufen",
            "Standort abrufen",
          ], // Erforderlich, Liste der zu verwendenden JS-Schnittstellen, eine Liste aller JS-Schnittstellen finden Sie in Anhang 2
        });
        dies.$wx.ready(() => {
          dies.$wx.checkJsApi({
            jsApiList: ["getNetworkType", "getLocation"], // Liste der JS-Schnittstellen, die erkannt werden müssen. Eine Liste aller JS-Schnittstellen finden Sie in Anhang 2.
            Erfolg: Funktion (res) {
              console.log("checkJsApi", res);
            },
          });
        });
        dies.$wx.error((res) => {
          console.log("wx.error", res);
        });
      }
    },

erstellt() {
    dies.getWxJssdkConf();
  },

Unter ihnen ist this.$api.getSdkConfig die Schnittstelle zum Aufrufen des Hintergrunds. Hier ist die API auch auf dem Prototyp von Vue montiert, was für die Verwendung praktisch ist, ohne die API auf jeder Seite einführen zu müssen.

Vue.prototype.$api = api

Nach der erfolgreichen Registrierung in app.vue können Sie die API des SDK verwenden.

WeChat-Autorisierung

Wenn Sie Benutzerinformationen erhalten möchten, müssen Sie den Benutzer um Berechtigung bitten. Bei der Autorisierung wird die von WeChat bereitgestellte Schnittstelle verwendet. Weitere Einzelheiten finden Sie hier. Wenn Sie nur die OpenID des Benutzers erhalten möchten, müssen Sie nur die stille Autorisierung verwenden, und der Benutzer muss keine aktive Autorisierung durchführen. Weitere Einzelheiten entnehmen Sie bitte dem Dokument. Hier benötigen Sie nur OpenID, um die stille Autorisierung wie folgt zu verwenden:

• Verwenden Sie es am Haupteingang, der eine Autorisierung erfordert, z. B. auf der Homepage. Rufen Sie zuerst die WeChat-Schnittstelle auf, um den Code abzurufen, und verwenden Sie den Code dann zum Austausch gegen OpenID am Backend.

/**
     * @description: Autorisierungscode abrufen
     * @param {*}
     * @zurückkehren {*}
     */
    getCode() {
      // Code aus window.location.href extrahieren und Wert zuweisen // window.location.href.split('#')[0]
      wenn (window.location.href.indexOf("Staat") !== -1) {
        dieser.code = qs.parse(
          Fenster.Standort.href.split("#")[0].split("?")[1]
        ).Code;
      } 
      
      wenn (dieser.code) {
          // Es ist Code vorhanden, um die Schnittstelle this.handGetUserInfo(this.code); direkt aufzurufen.
        } anders {
          dies.handLogin();
        }
    },
    /**
     * @description: Benutzerautorisierungs-Login abrufen* @param {*}
     * @zurückkehren {*}
     */
    handLogin() {
      // Leite die Adresse auf die aktuelle Seite um und hole den Code im Pfad
      const hrefUrl = fenster.standort.href;

      wenn (dieser.code === "") {
        Fenster.Standort.Ersetzen(`
		https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX
                           &redirect_uri=${encodeURIComponent(hrefUrl)}
                           &Antworttyp=Code
                           &Umfang=snsapi_base
                           &state=h5#wechat_redirect`);
      }
    },
    /**
     * @description: Benutzerinformationen abrufen* @param {*} Code
     * @zurückkehren {*}
     */
    handGetUserInfo(code) {
      //Rufen Sie die Hintergrundschnittstelle auf},

Dies ist die Hauptlogik der Autorisierung und sie funktioniert grundsätzlich ohne Überraschungen.

Aufforderung zum Trennen der Verbindung

Wenn die Netzwerkverbindung des Benutzers getrennt wird, wird zur Eingabeaufforderung zur Netzwerktrennung gesprungen. Die hauptsächlich verwendete Methode ist die von HTML bereitgestellte. Die Beurteilungslogik ist in der Datei app.vue geschrieben. Da jede Seite eine Eingabeaufforderung enthält, wird diese direkt am Haupteingang verarbeitet.

montiert() {
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  
 Methoden: {
 		updateOnlineStatus(e) {
      const { Typ } = e;
      Konsole.log("Typ===============", Typ);
      this.onLine = Typ === "online";
    },
 }
 vorZerstören() {
    window.removeEventListener("online", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },

Dies ist die Hauptmethode zum Überprüfen der Netzwerkverbindung des Benutzers

Stellen Sie fest, ob es sich um eine von WeChat geöffnete Webseite handelt

Der Navigationsschutz des Vue-Routers wird hier hauptsächlich verwendet, um den Browser vor dem Springen zu beurteilen. Wenn es sich nicht um den integrierten Browser von WeChat handelt, springt er direkt zur abnormalen Eingabeaufforderungsseite

router.beforeEach((bis, von, weiter) => {
  const ua = navigator.userAgent.toLowerCase();
  Wenn (
    zu.Pfad !== "/notwx" &&
    !(ua.match(/MicroMessenger/i) == "Micromessenger")
  ) {
    weiter("/notwx");
  } anders {
    nächste();
  }
});

Manchmal bleibt beim Springen zu einer Seite die Scrollhöhe der Seite auf der Scrollhöhe der vorherigen Seite. Auch dieses Problem wird im Navigationswächter gelöst, der automatisch nach oben scrollt.

router.afterEach(() => {
  Fenster.scrollTo(0, 0);
});

Zusammenfassung

An dieser Stelle wurde der gesamte Entwicklungsprozess einfach aufgezeichnet. Dies stellt auch eine Überprüfung meiner eigenen Entwicklung dar und ist für die Zukunft praktisch. Ich hoffe, dieser Artikel ist hilfreich für Sie. Dies ist nur meine persönliche Meinung. Wenn Sie Fragen haben, lassen Sie es mich bitte wissen. Wenn Sie ihn hilfreich finden, geben Sie mir bitte einen Daumen hoch. Danke.

Oben finden Sie Einzelheiten zur Verwendung von Vue zum Entwickeln von öffentlichen Account-Webseiten. Weitere Informationen zur Vue-Entwicklung von öffentlichen Account-Webseiten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!