So erstellen Sie ein Projekt mit dem WeChat Mini-Programm unter Verwendung von Typescript

So erstellen Sie ein Projekt mit dem WeChat Mini-Programm unter Verwendung von Typescript

Erstellen eines Projekts

Erstellen Sie ein Projekt in WeChat Developer Tools und wählen Sie TypeScript in der Sprache aus

Renovierungsprojekt

Bearbeiten Sie die Datei package.json und ändern Sie miniprogram-api-typings und typescript Versionen

{
 "Name": "Miniprogramm-TS-Schnellstart",
 "version": "1.0.0",
 "Beschreibung": "",
 "Skripte": {
 "Kompilieren": "./node_modules/typescript/bin/tsc",
 "tsc": "Knoten ./node_modules/typescript/lib/tsc.js"
 },
 "Schlüsselwörter": [],
 "Autor": "",
 "Lizenz": "",
 "Abhängigkeiten": {
 },
 "devAbhängigkeiten": {
 "Typoskript": "^4.1.3",
 "miniprogram-api-typings": "^2.12.1-beta.0"
 }
}

Bearbeiten Sie die Datei tsconfig.json, ändern Sie lib in ["esnext"], unterstützen Sie die neueste Syntax und löschen Sie das Konfigurationselement typeRoots

{
 "Compileroptionen": {
 "strictNullChecks": wahr,
 "noImplicitAny": wahr,
 "Modul": "CommonJS",
 "Ziel": "ES5",
 "allowJs": falsch,
 "experimentalDecorators": wahr,
 "noImplicitThis": wahr,
 "noImplicitReturns": wahr,
 "alwaysStrict": wahr,
 "inlineSourceMap": wahr,
 "inlineSources": wahr,
 "noFallthroughCasesInSwitch": wahr,
 "noUnusedLocals": wahr,
 "noUnusedParameters": wahr,
 "streng": wahr,
 "removeComments": wahr,
 "hübsch": wahr,
 "strictPropertyInitialization": wahr,
 "lib": ["esnext"]
 },
 "enthalten": [
 „./**/*.ts“
 ],
 "ausschließen": [
 "Knotenmodule"
 ]
}

Führen Sie npm install

Löschen Sie das Verzeichnis „typings“ unter dem Projekt und kopieren Sie die Datei „types“ von „miniprogram-api-typings“ unter „node_modules“ in das Stammverzeichnis des Projekts.

Erstellen Sie unter dem Miniprogramm ein Schnittstellenverzeichnis und erstellen Sie eine Datei IAppOption.ts. Bearbeiten Sie abschließend die Datei app.ts.

// IAppOption.ts
exportiere Standardschnittstelle IAppOption {
 globalData: {
  Text: Zeichenfolge;
 }
}
// app.ts
importiere IAppOption aus "./interface/IAppOption";

App<IAppOption>({
 globalData: {
  Text: „Hallo, Word!“
 },
 beim Starten() {
 }
})

Wählen Sie unter Details -> Lokale Einstellungen -> Debug Base Library direkt die neueste

Verwenden der Promise WeChat Mini Program API

Bisher konnten Sie miniprogram-api-promise verwenden, um Ihre API Promise-freundlich zu machen, oder Ihr eigenes

Jetzt können Sie es direkt verwenden, z. B. wx.getStorageInfo, das PromisifySuccessResult in lib.wx.api.d.ts zurückgibt

PromisifySuccessResult gibt ein Promise zurück

getStorageInfo<TOption erweitert GetStorageInfoOption>(
Option?: TOption
): PromisifySuccessResult<TOption, GetStorageInfoOption>

Typ PromisifySuccessResult<
P,
 T erweitert AsyncMethodOptionLike
> = P erweitert { Erfolg: beliebig }
 ? Leere
 : P erweitert { Fehler: beliebig }
 ? Leere
 : P erweitert { komplett: beliebig }
 ? Leere
 : Versprechen<Parameter<Ausschließen<T['Erfolg'], undefiniert>>[0]>

Zwei Verwendungszwecke, die von den meisten APIs unterstützt werden

 wx.getStorageInfo({
 Erfolg: () => {
  console.log('Erfolgreiche Ausführung')
 },
 fehlgeschlagen: () => {
  console.log('Ausführung fehlgeschlagen')
 },
 vollständig: () => {
  console.log('Schnittstellenaufruf beendet')
 }
})
wx.getStorageInfo().then(() => {
 console.log('Erfolgreiche Ausführung')
}).catch(() => {
 console.log('Ausführung fehlgeschlagen')
}).schließlich(() => {
 console.log('Schnittstellenaufruf beendet')
})

Quellcode: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-base

Dies ist das Ende dieses Artikels zum Erstellen eines WeChat-Applet-Projekts mit Typescript. Weitere Informationen zum Entwickeln eines WeChat-Applets mit Typescript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Tiefgreifendes Verständnis der generischen Konzepte von Typescript im Frontend
  • Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript
  • JS-Dekorationsmuster und TypeScript-Dekoratoren
  • Detaillierte Erklärung des Typschutzes in TypeScript
  • Zusammenfassung der Verwendung von TypeScript in React-Projekten
  • Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe
  • Installation und Verwendung von TypeScript und grundlegende Datentypen
  • Detaillierte Erklärung zur Verwendung von This in Typescript
  • Standardtypen für generische TypeScript-Parameter und neue Option zur strikten Kompilierung

<<:  Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann

>>:  So richten Sie den PostgreSQL-Start unter Ubuntu 16.04 ein

Artikel empfehlen

Detaillierte Erklärung der Verwendung des Linux-Befehls „tee“

Der Befehl tee wird hauptsächlich verwendet, um d...

Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte

Inhaltsverzeichnis 1. v-bind: kann einige Daten a...

Detaillierte Erläuterung des CocosCreator-Projektstrukturmechanismus

Inhaltsverzeichnis 1. Projektordnerstruktur 1. As...

Was ist dies in einer Punkt-für-Punkt-Reihe von JavaScript?

Verstehe das Vielleicht haben Sie this in anderen...

Beispiel-Tutorial zur Verwendung der Summenfunktion in MySQL

Einführung Heute werde ich die Verwendung der Sum...

Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript

Da die von nativen JS initiierten Netzwerkanforde...

Detaillierte Erklärung zur Verwendung mehrerer Timer in CocosCreator

1. setTimeOut Drucken Sie abc nach 3 Sekunden. Nu...

Sortierfunktion für HTML-Tabellen per Mausklick

Effektbild: 1. Dateien importieren <script src...

Beispiel für Javascript-Bubblesort

Inhaltsverzeichnis 1. Was ist Bubble Sort 2. Gebe...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.19

In diesem Artikel wird das grafische Tutorial zur...

Windows Server 2019 installieren (grafisches Tutorial)

Windows Server 2019 ist das neueste Server-Betrie...

Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung

Beispiel zur MySQL-Passwortänderung – ausführlich...