WeChat ミニプログラム開発の効率を向上させるための詳細な手順を教えます

WeChat アプレットの API 実装ではあらゆる側面を考慮する必要があるため、引き続きコールバック書き込みメソッドが使用されます。

ご存知のとおり、コールバック地獄は従来の JS 構文における歴史的な問題です。しかし結局のところ、便利なツールは開発効率の源であるため、作成者は現在のバージョンの WeChat アプレット API、つまり weapp を単純にカプセル化しました。

同時に、WeChat アプレット フレームワーク 自体は、インタラクションと UI 実装に焦点を当てており、組み込みの ステータス 管理は提供しません。多くの非同期操作を App または Page に 1 つずつ直接実装すると、開発もテストも困難になると思います。 App 或 Page 中一一实现，相信开发起来会很困难，而且不易于测试。

因此，我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块，用以方便的在小程序中实现应用状态管理 redux-weapp。

特别地，微信小程序构建（编译）时不支持从 App scope 之外 require 文件，npm 在此就不好用了。

所以，我们需要实时 build 依赖到应用本地，在微信小程序中引用本地的 modules。

对于这种构建场景，我认为 webpack 算是最方便的方案。

在开始之前，你需要准备

• 从官方文档，了解微信小程序是什么；

• 了解 Redux 应用状态管理方案，同时它也是 Flux 架构的具体实现；

• 了解 JavaScript 打包工具 webpack；

• 了解 ES6/7 代码转译（transcompile）工具 Babel。原理是借助语法分析工具，将代码解析成抽象语法树后「重写」成最终的代码；

• 类似 Jest、Mocha 等 JavaScript 测试工具，可以根据需要选择。

安装工具和依赖模块

下载微信小程序开发者工具

开发者工具是用 NW.js 模拟的环境，在微信中，则是 JavascriptCore 环境。

不过不用担心, 只是两个不同的 VM，本质是一样的。

NW.js 可能存在一些小 bug，写代码的时候注意一下就好。

用 npm 命令开始一个微信小程序项目

mkdir myappcd myapp
npm init

开始安装必要的依赖模块

由于除了小程序运行时需要的模块，还有构建所需要的模块。

看起来会比较多，不过不用担心，大多数都是声明性的，不需要你直接调用。

为了方便经验少些的同学理解，我将这些依赖分步安装。

首先是代码转译工具 Babel：

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

有了上面这些模块，就可以在构建时，将 ES6/7 的代码转译为 ES5 的代码了（其实解释器都只认 ES5）。

接下来，我们安装打包工具 webpack：

npm install webpack --save-dev

我们只需要对代码进行打包，不需要 dev server 和 hot module replace 功能。

因此，我们只需要安装 webpack module 本身即可，无需安装其他扩展和插件。

接下来，我们来安装 Redux：

npm install redux redux-thunk --save-dev

需要注意的是，由于在实际应用中，我们经常会需要异步调用 API 服务器的接口，因此我们还需要 redux-thunk 这个模块，来处理异步行为。

然后安装开发小程序的辅助模块：

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

其中，weapp 模块是对微信小程序 API 的 wrapper，提供了更易于使用的 API，redux-weapp 是基于 Redux 对微信小程序进行状态管理。

建立项目目录结构

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

编写构建脚本

首先得写 webpack.config.js, 这个是必须的。

由于这个构建是为了本地化微信小程序的依赖，因此我们只处理 JS 文件。若需要打包其他资源，请读者自行研究。

而且，值得注意的是，微信小程序包有 1 MB 的上限。

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

定义 npm 命令

首先是代码测试命令 test。

由于我喜欢用 Jest，所以这里也用 Jest 做范例。

// 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/"
  ]
}

接下来，就是激动人心的 build

そこで、アプレットでのアプリケーション状態管理 redux-weapp を容易にするために、WeChat アプレット用の Redux ソリューションに基づいた状態管理モジュールを実装しました。 🎜🎜特に、WeChat アプレットはビルド (コンパイル) 時にアプリのスコープ外からのファイルの要求をサポートしていないため、ここで npm を使用するのは簡単ではありません。 🎜🎜そのため、アプリケーション内で依存関係をローカルにリアルタイムで構築し、WeChat アプレット内のローカル モジュールを参照する必要があります。 🎜🎜この種の構築シナリオでは、webpack が最も便利なソリューションだと思います。 🎜

始める前に準備する必要があります

• 🎜公式ドキュメントから WeChat ミニ プログラムについて理解します 🎜
🎜Flux アーキテクチャの特定の実装でもある Redux アプリケーション状態管理ソリューションを理解する🎜; 🎜 li>
• 🎜JavaScript🎜 パッケージ化ツール Webpack について理解する 🎜
• 🎜ES6/7 コード変換 (トランスコンパイル) ツール Babel を理解します。原則は、構文分析ツールを使用してコードを解析して抽象構文ツリーにし、それを最終コードに「書き直す」ことです 🎜
• 🎜 Jest、Mocha、その他の JavaScript テスト ツールと同様に、次のことができます。ニーズに応じて選択してください。 🎜

🎜 ツールと依存モジュールをインストールします

WeChat ミニ プログラム開発者ツールをダウンロードします

🎜 開発者ツールは、NW.js によってシミュレートされた環境であり、WeChat では JavascriptCore 環境です。 🎜🎜でも心配しないでください。これは 2 つの異なる VM であるだけで、本質は同じです。 🎜🎜NW.js にはいくつかの小さなバグがある可能性があります。コードを記述する際には注意してください。 🎜

npm コマンドを使用して WeChat アプレット プロジェクトを開始します

rrreee

必要な依存モジュールのインストールを開始します

🎜アプレットの実行に必要なモジュールに加えて、必要なモジュールもあるため建設のための。 🎜🎜もっとたくさんあるように見えますが、心配する必要はありません。ほとんどは宣言型であり、直接呼び出す必要はありません。 🎜🎜経験の少ない学生の理解を容易にするために、これらの依存関係を段階的にインストールしていきます。 🎜🎜 1 つ目はコード変換ツール Babel: 🎜rrreee🎜 上記のモジュールを使用すると、ビルド時に ES6/7 コードを ES5 コードに変換できます (実際、インタプリタは ES5 のみを認識します)。 🎜🎜次に、パッケージ化ツール webpack をインストールします: 🎜rrreee🎜 コードをパッケージ化するだけでよく、開発サーバーやホット モジュール置換機能は必要ありません。 🎜🎜したがって、他の拡張機能やプラグインをインストールする必要はなく、webpack モジュール自体をインストールするだけで済みます。 🎜🎜次に、Redux をインストールしましょう: 🎜rrreee🎜実際のアプリケーションでは、多くの場合 API サーバーを非同期で呼び出す必要があることに注意してください インターフェイス 🎜 を使用するため、非同期 redux-thunk モジュールも必要です。 .html" target="_blank">動作🎜。 🎜🎜次に、ミニ プログラムを開発するための補助モジュールをインストールします: 🎜rrreee🎜 その中で、weapp モジュールは WeChat ミニ プログラム API のラッパーであり、使いやすい API を提供します。redux-weapp は状態の Redux に基づいています。 WeChatミニプログラムの管理。 🎜

プロジェクトを作成するディレクトリ構造🎜

書き込み

build Script

🎜最初に webpack.config.js を記述する必要があります。これは必須です。 🎜🎜このビルドは WeChat アプレットの依存関係をローカライズするため、JS ファイルのみを処理します。他のリソースをパッケージ化する必要がある場合は、独自に調査してください。 🎜🎜また、WeChat ミニプログラム パッケージには 1 MB の上限があることにも注意してください。 🎜rrreee

npm コマンドを定義

🎜 1 つ目は、コード テスト コマンド test です。 🎜🎜私は Jest を使用するのが好きなので、ここでも例として Jest を使用します。 🎜rrreee🎜次のステップは、興味深い build コマンドです。成功するか失敗するかはこれにかかっています🎜

以上がWeChat ミニプログラム開発の効率を向上させるための詳細な手順を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。