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

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen

Ich habe viele davon gesammelt, aber alle endeten...

Mysql speichert Baumstruktur durch Adjazenzliste (Adjazenzliste)

Der folgende Inhalt stellt den Prozess und die Lö...

Detaillierte Analyse der Prinzipien und der Verwendung von MySQL-Ansichten

Vorwort: In MySQL sind Ansichten wahrscheinlich e...

Einfache Verwendung von temporären MySQL-Tabellen

Temporäre MySQL-Tabellen sind sehr nützlich, wenn...

uniapp implementiert Datums- und Zeitauswahl

In diesem Artikelbeispiel wird der spezifische Co...

Gemeinsame MySQL-Indexwirksamkeitsbedingungen und Indexungültigkeitsbedingungen

Inhaltsverzeichnis 1. Bedingungen für das Versage...

Webdesign: Implementierungstechniken für Webmusik

<br />Wenn Sie Musik in eine Webseite einfüg...

Häufig verwendete englische Schriftarten für die Webseitenerstellung

Arial Arial ist eine serifenlose TrueType-Schrifta...

Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket

In diesem Artikel finden Sie den spezifischen Cod...