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

Verwendung des Linux-Befehls xargs

1. Funktion: xargs kann die durch Leerzeichen ode...

JavaScript zum Erzielen eines Digitaluhreffekts

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

Inhaltsverzeichnis 1.1Tinyint-Typbeschreibung 1.2...

Tutorial zur Installation und Verwendung von virtualenv in Deepin

virtualenv ist ein Tool zum Erstellen isolierter ...

Analyse von MySQL-Lock-Wait- und Deadlock-Problemen

Inhaltsverzeichnis Vorwort: 1. Verstehen Sie Lock...

Docker-Container-Protokollanalyse

Containerprotokolle anzeigen Verwenden Sie zunäch...

Ein Artikel bringt Ihnen bei, sauberen JavaScript-Code zu schreiben

Inhaltsverzeichnis 1. Variablen Verwenden Sie aus...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

Inhaltsverzeichnis $nächsterTick() $forceUpdate()...