Bringen Sie Ihnen detaillierte Schritte bei, um die Effizienz der WeChat-Miniprogrammentwicklung zu verbessern

Die API-Implementierung des WeChat-Applets muss alle Aspekte berücksichtigen, daher wird weiterhin die Callback-Schreibmethode verwendet.

Wie wir alle wissen, ist Callback-Hell ein historisches Problem in der traditionellen JS-Syntax. Aber schließlich sind praktische Tools die Quelle der Entwicklungseffizienz, daher hat der Autor eine einfache Kapselung der aktuellen Version der WeChat-Applet-API erstellt – weapp.

Gleichzeitig konzentriert sich das WeChat-Applet Framework selbst auf die Implementierung von Interaktion und Benutzeroberfläche und bietet keine integrierte Statusverwaltung . Wenn viele asynchrone Operationen nacheinander direkt in App oder Page implementiert werden, wird es meiner Meinung nach schwierig sein, sie zu entwickeln und zu testen.

Daher habe ich ein Statusverwaltungsmodul basierend auf der Redux-Lösung für das WeChat-Applet implementiert, um die Anwendungsstatusverwaltung redux-weapp im Applet zu erleichtern.

Insbesondere unterstützt das WeChat-Applet nicht das Erfordernis von Dateien von außerhalb des App-Bereichs beim Erstellen (Kompilieren), daher ist die Verwendung von npm hier nicht einfach.

Wir müssen also Abhängigkeiten lokal in der Anwendung in Echtzeit aufbauen und auf lokale Module im WeChat-Applet verweisen.

Für diese Art von Bauszenario halte ich Webpack für die bequemste Lösung.

Bevor Sie beginnen, müssen Sie sich vorbereiten

• Verstehen Sie anhand der offiziellen Dokumentation, was das WeChat-Miniprogramm ist; Verstehen Sie die Redux-Anwendungsstatusverwaltungslösung, es ist auch die spezifische Implementierung der Flux-

  -Architektur

• Verstehen Sie das JavaScript

  -Paketierungstool

• Erfahren Sie mehr über das ES6/7-Codeübersetzungstool (Transkompilierung) Babel. Das Prinzip besteht darin, den Code mithilfe von Syntaxanalysetools in einen abstrakten Syntaxbaum zu analysieren und ihn dann in den endgültigen Code „umzuschreiben“.

• JavaScript-Testtools wie Jest und Mocha können sein nach Ihren Bedürfnissen ausgewählt.

• Installieren Sie

  Tools und abhängige Module.

Laden Sie die WeChat Mini Program Developer Tools herunter.

Die Entwicklertools verwenden NW.js. Die Simulation Die Umgebung in WeChat ist die JavascriptCore-Umgebung.

Aber keine Sorge, es sind nur zwei verschiedene VMs, das Wesentliche ist dasselbe.

NW.js weist möglicherweise einige kleinere Fehler auf. Achten Sie beim Schreiben von Code darauf.

Verwenden Sie den Befehl npm, um ein WeChat-Miniprogrammprojekt zu starten

Beginnen Sie mit der Installation der erforderlichen Abhängigkeitsmodule

Denn zusätzlich zu den Modulen, die zum Ausführen des Miniprogramms erforderlich sind Es gibt auch bauliche Anforderungen an erforderliche Module.

mkdir myappcd myapp
npm init

Es scheint eine Menge zu sein, aber keine Sorge, die meisten davon sind deklarativ und erfordern keinen direkten Aufruf.

Um das Verständnis für Studierende mit weniger Erfahrung zu erleichtern, werde ich diese Abhängigkeiten Schritt für Schritt installieren.

Das erste ist das Code-Übersetzungstool Babel:

Mit den oben genannten Modulen können Sie ES6/7-Code zur Build-Zeit in ES5-Code übersetzen (tatsächlich ist der Interpreter sie nur). ES5 erkennen).

Als nächstes installieren wir das Verpackungstool-Webpack:

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-add-module-exports babel-polyfill babel-preset-es2015 babel-preset-stage-0

Wir müssen nur den Code verpacken, ohne die Funktionen zum Ersetzen des Entwicklungsservers und des Hot-Moduls.

Daher müssen wir nur das Webpack-Modul selbst installieren, ohne andere Erweiterungen und Plug-Ins zu installieren.

npm install webpack --save-dev

Als nächstes installieren wir Redux:

Es ist zu beachten, dass wir in tatsächlichen Anwendungen oft die

Schnittstelle

des API-Servers asynchron aufrufen müssen, also auch Ich benötige

dieses Modul, um asynchrones

npm install redux redux-thunk --save-dev

Verhalten

zu verarbeiten. Dann installieren Sie das Hilfsmodul zum Entwickeln von Miniprogrammen: redux-thunk Unter anderem ist das WeApp-Modul ein Wrapper für die WeChat-Miniprogramm-API und bietet eine benutzerfreundlichere API. redux-weapp basiert auf Redux und führt die Zustandsverwaltung für WeChat-Miniprogramme durch.

Erstellen Sie das Projekt

Verzeichnisstruktur

npm install xixilive/weapp xixilive/redux-weapp --save-dev

Schreiben Sie das Build-SkriptSchreiben Sie zuerst

, das ist notwendig.

myapp
 |- es6                # 源代码
   |- myapp.js         # 在app.js文件中require此文件
 |- lib                # 存放编译之后的js文件
 |- pages              # 小程序页面定义
   |- projects
     |- projects.js
     |- projects.json
     |- projects.wxml
     |- projects.wxss
   ...
 |- app.js             # 小程序入口文件
 |- app.json
 |- app.wxss
 |- webpack.config.js  # webpack配置文件

Da dieser Build die Abhängigkeiten des WeChat-Applets lokalisieren soll, verarbeiten wir nur JS-Dateien. Wenn Sie andere Ressourcen bündeln müssen, recherchieren Sie bitte selbst.

Außerdem ist zu beachten, dass für WeChat-Miniprogrammpakete eine Obergrenze von 1 MB gilt. webpack.config.js

Npm-Befehl definieren

Der erste ist der Codetestbefehl

.

// webpack.config.jsvar path = require('path'), webpack = require('webpack')var jsLoader = {
  test: /\.js$/, // 你也可以用.es6做文件扩展名, 然后在这里定义相应的pattern
  loader: 'babel',
  query: {    // 代码转译预设, 并不包含ES新特性的polyfill, polyfill需要在具体代码中显示require
    presets: ["es2015", "stage-0"]
  },  // 指定转译es6目录下的代码
  include: path.join(dirname, 'es6'),  // 指定不转译node_modules下的代码
  exclude: path.join(dirname, 'node_modules')
}module.exports = {  // sourcemap 选项, 建议开发时包含sourcemap, production版本时去掉(节能减排)
  devtool: null,  // 指定es6目录为context目录, 这样在下面的entry, output部分就可以少些几个`../`了
  context: path.join(dirname, 'es6'),  // 定义要打包的文件  // 比如: `{entry: {out: ['./x', './y','./z']}}` 的意思是: 将x,y,z等这些文件打包成一个文件,取名为: out  // 具体请参看webpack文档
  entry: {
    myapp: './myapp'
  },

  output: {    // 将打包后的文件输出到lib目录
    path: path.join(dirname, 'lib'),    // 将打包后的文件命名为 myapp, `[name]`可以理解为模板变量
    filename: '[name].js',    // module规范为 `umd`, 兼容commonjs和amd, 具体请参看webpack文档
    libraryTarget: 'umd'
  },  module: {
    loaders: [jsLoader]
  },

  resolve: {
    extensions: ['', '.js'],    // 将es6目录指定为加载目录, 这样在require/import时就会自动在这个目录下resolve文件(可以省去不少../)
    modulesDirectories: ['es6', 'node_modules']
  },

  plugins: [    new webpack.NoErrorsPlugin(),    // 通常会需要区分dev和production, 建议定义这个变量    // 编译后会在global中定义`process.env`这个Object    new webpack.DefinePlugin({      'process.env': {        'NODE_ENV': JSON.stringify('development')
      }
    })
  ]
}

Da ich gerne Jest verwende, verwende ich hier auch Jest als Beispiel.

testDer nächste Schritt ist der spannende

-Befehl. Erfolg oder Misserfolg liegen auf einem Schlag

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen detaillierte Schritte bei, um die Effizienz der WeChat-Miniprogrammentwicklung zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!