Vous apprendre les étapes détaillées pour améliorer l'efficacité du développement du mini-programme WeChat

L'implémentation API de l'applet WeChat doit prendre en compte tous les aspects, c'est pourquoi la méthode d'écriture de rappel est toujours utilisée.

Comme nous le savons tous, Callback-Hell est un problème historique dans la syntaxe JS traditionnelle. Mais après tout, les outils pratiques sont la source de l'efficacité du développement, c'est pourquoi l'auteur a fait une simple encapsulation de la version actuelle de l'API de l'applet WeChat - weapp.

Dans le même temps, le framework de l'applet WeChat lui-même se concentre sur la mise en œuvre de l'interaction et de l'interface utilisateur, et ne fournit pas de gestion intégrée du statut . Si de nombreuses opérations asynchrones sont implémentées directement dans App ou Page une par une, je pense que ce sera difficile à développer et difficile à tester.

Par conséquent, j'ai implémenté un module de gestion de l'état basé sur la solution Redux pour l'applet WeChat afin de faciliter la gestion de l'état de l'application redux-weapp dans l'applet.

Spécialement, l'applet WeChat ne prend pas en charge l'exigence de fichiers extérieurs à la portée de l'application lors de la construction (compilation), donc npm n'est pas facile à utiliser ici.

Nous devons donc créer des dépendances localement dans l'application en temps réel et référencer les modules locaux dans l'applet WeChat.

Pour ce genre de scénario de construction, je pense que webpack est la solution la plus pratique.

Avant de commencer, vous devez vous préparer

• Comprendre ce qu'est le mini programme WeChat à partir de la documentation officielle

• Comprendre la solution de gestion de l'état de l'application Redux, c'est aussi l'implémentation spécifique de l'architecture Flux

• Comprendre le webpack de l'outil de packaging

  JavaScript ; >

Découvrez l'outil de traduction (transcompilation) de code ES6/7 Babel. Le principe est d'utiliser des outils d'analyse syntaxique pour analyser le code dans un arbre syntaxique abstrait puis de le "réécrire" dans le code final.
Des outils de test JavaScript tels que Jest et Mocha peuvent être utilisés ; sélectionnés selon vos besoins.

Installer

les outils et les modules dépendants Télécharger les outils de développement du programme WeChat Mini

Les outils de développement utilisent NW.js La simulation L'environnement, dans WeChat, est l'environnement JavascriptCore.

Mais ne vous inquiétez pas, ce ne sont que deux VM différentes, l'essence est la même.

NW.js peut avoir quelques bugs mineurs, faites-y simplement attention lors de l'écriture du code.

Utilisez la commande npm pour démarrer un projet de mini programme WeChat

Commencez à installer les modules de dépendance nécessaires

mkdir myappcd myapp
npm init

Car en plus des modules nécessaires à l'exécution du mini programme , il existe également des modules requis pour les exigences de construction.

Il peut sembler y en avoir beaucoup, mais ne vous inquiétez pas, la plupart d'entre eux sont déclaratifs et ne nécessitent pas que vous les appeliez directement.

Afin de faciliter la compréhension des étudiants moins expérimentés, je vais installer ces dépendances étape par étape.

Le premier est l'outil de traduction de code Babel :

Avec les modules ci-dessus, vous pouvez traduire le code ES6/7 en code ES5 au moment de la construction (en fait, l'interpréteur Ils ne font que reconnaître ES5).

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

Ensuite, nous installons l'outil d'empaquetage webpack :

Il nous suffit d'empaqueter le code, sans les fonctions de remplacement du serveur de développement et du module chaud.

npm install webpack --save-dev

Par conséquent, il suffit d'installer le module webpack lui-même, sans installer d'autres extensions et plug-ins.

Ensuite, installons Redux :

Il convient de noter que dans les applications réelles, nous avons souvent besoin d'appeler de manière asynchrone l'

npm install redux redux-thunk --save-dev

interface

du serveur API, donc nous aussi besoin de ce module pour gérer le comportement asynchrone redux-thunk. Installez ensuite le module auxiliaire pour développer des mini-programmes :

Parmi eux, le module weapp est un wrapper pour l'API du mini-programme WeChat, fournissant une API plus facile à utiliser. redux-weapp est basé sur Redux et effectue la gestion de l'état des mini-programmes WeChat.

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

Créer le projet

Structure des répertoires

Écrire le script de build

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配置文件

Écrivez d'abord

, cela est nécessaire.

webpack.config.jsÉtant donné que cette version vise à localiser les dépendances de l'applet WeChat, nous traitons uniquement les fichiers JS. Si vous avez besoin de regrouper d’autres ressources, veuillez effectuer vos propres recherches.

En outre, il convient de noter que les packages de mini-programmes WeChat ont une limite supérieure de 1 Mo.

Définir la commande npm

// 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')
      }
    })
  ]
}

La première est la commande de test de code

.

testComme j'aime utiliser Jest, j'utilise également Jest comme exemple ici.

La prochaine étape est la passionnante commande

// package.json"scripts": {  "pretest": "eslint es6", //推荐进行静态检查  "test": "jest",
  ...
},
...,// jest允许在package.json中定义配置"jest": {  "automock": false,  "bail": true,  "transform": {    ".js": "/node_modules/babel-jest" //用babel转译
  },  "testPathDirs": [    "/tests/"
  ],  "testRegex": ".test.js$",  "unmockedModulePathPatterns": [    "/node_modules/"
  ],  "testPathIgnorePatterns": [    "/node_modules/"
  ]
}

. Le succès ou l'échec en dépend

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!