ミニプログラム開発における3つの大きな問題とその解決策

WeChat がミニ プログラムのドキュメントと開発ツールを発表した後、Pulse Software は初めてそれを研究し、体験しましたが、WeChat ミニ プログラムの技術的なアーキテクチャと開発経験には非常にがっかりしました。

WeChat アプレットの実行環境は標準のブラウザ環境ではなく、WeChat のパッケージ化作業も完璧ではないため、これまでの開発経験の多くは適用できません。

これは単に私たちの開発習慣が適切ではないという理由だけではなく、もっと重要なことに、私たちの開発プロセスと仕様が適用できなくなります。

WeChat アプレット開発の最初の罪: NPM パッケージを呼び出すことができない

WeChat アプレット開発ツールは、パッケージ化されたときに依存関係を読み込むための require 関数を実装しますが、完全な CommonJS 依存関係管理ではありません。 require 関数はプロジェクト内の JS ファイルのみをロードでき、JS ファイルのパスは厳密に定義する必要があるため、パスは CommonJS パス スタイルをサポートしません。たとえば、次の読み込みメソッドはエラーを引き起こします:

require('lodash');
require('lodash/map');
require('./foo');

WeChat アプレット開発ツールでは、対応する形式を次の形式で記述する必要があります:

require('node_modules/lodash/lodash.js');
require('node_modules/lodash/map.js');
require('./foo.js');

上記のコードのように、node_modules ディレクトリにライブラリを読み込むことはできますが、しかし、実際には Now の実行時に発生します:

デバッグ ツールの [ネットワーク] タブでは、実行時に 1,000 個を超えるファイルがロードされ、合計データ量は 1.8MB であることがわかります。コード内のlodashライブラリ!これは、WeChat アプレット開発ツールがすべてのプロジェクト配下の js ファイルをプロジェクト ファイルとみなしてパッケージ化するためです。実際の開発では、多くの NPM 拡張ライブラリをインストールする必要があります。これらの拡張ライブラリには、パッケージ化する必要のない多数のファイルが含まれています。たとえば、lodash には数千のファイルがありますが、使用する必要があるのは、パッケージ化する必要がないことです。そのうちのごく一部です。 さらに、開発中には、babal、eslient、webpack、grunt、その他の開発ツールをインストールする必要があることがよくあります。WeChat アプレット開発ツールは、これらのツールのソース コードも同様にパッケージ化します。実際のテストでは、開発者ツールが使用されます。クラッシュするでしょう！開発者はクラッシュするでしょう！私は壊れた！

NPM パッケージがサポートされていない理由は、WeChat 開発者ツールが CommonJS 標準をサポートしていないためです。 CommonJS 標準がサポートされていない理由は、WeChat 開発者ツールがプロジェクト内の js ファイルを当然のこととみなしているためです。ディレクトリはプロジェクト ファイルである必要があるため、単純な require 関数のみを実装します。その理由は当然です。 。 。

WeChat ミニプログラム開発の 2 番目の罪: Babel を使用してトランスコードできない

Babel を使用してトランスコードできない理由は、実は依然として NPM ライブラリをロードできないことが原因です。しかし、その結果は深刻なものとなるでしょう。 ES6/7 の機能を安全に使用できなくなり、async/await 関数が使用できなくなり、無限のコールバックに悩まされることになります。自分自身をどのように表現すればよいでしょうか。プログラマーはコールバック地獄で苦しんでいますか?

これを見て、Babel が何なのか理解できなかったとしても、おめでとうございます。天国を見たことがなければ、地獄が何であるかわかりません。ES6/7 をサポートしていないことを心配する必要はありません。しかし、あなたの脳が ES6/7 をサポートし、Babel を使用すると、もう元には戻れません。私と同じように、Babel なしではコーディングできません。 WeChat ミニ プログラム開発の 3 番目の罪: コンポーネントを再利用できない

実際、WeChat ミニ プログラム開発ではコンポーネントを完全に再利用できないわけではありません。たとえば、W

XML

構文は import と

include

をサポートしています。ただし、これは view テンプレートの再利用性のみであり、コンポーネントの再利用性ではありません。これは、コンポーネントにはビューとロジックが含まれている必要があると考えているためです。 WXML は実際には再利用可能なコンポーネントに基づいていますが、独自のコンポーネントを定義することはできません。 React

の経験がある方なら、私の言っている意味が分かるでしょう。

たとえば、あなたのミニ プログラムは e-commerce APP であり、特定のカテゴリの製品リストと 検索結果リストなどの製品 グループ

項目を含む 2 つのページがあります。これら 2 つのリストは実際にはパラメータだけが異なります。ただし、小規模なプログラム開発では、リストのテンプレートのみを抽象化でき、ロジックは抽象化できないため、両方のページにリスト コンポーネントの制御ロジック (更新や読み込みなど) を実装する必要があります。 。 。

私たちの実践それを埋めずにただ文句を言い、制御し、殺すのは非倫理的です。WeChatミニプログラムの開発におけるさまざまな欠点を発見したので、私たちのPulseソフトウェアは、特に開発中の一連のプロセスとツールをまとめました。上記の3つの問題を解決し、オープンソースコミュニティに無料で公開しています。次に、パルス ソフトウェアの開発経験を試してみましょう。

Labrador をインストールします

コマンドを使用して

Labrador 制御線ツールをグローバルにインストールします。

初始化项目

通过如下命令新建一个Labrador项目：

mkdir demo
cd demo
npm init
labrador init

项目初始化完成后，该目录是这个样子的：

图中的src是我们的源码目录，node_modules是NPM包目录，dist是目标输出目录。请在开发者工具中新建一个项目，并设置路径到dist目录，请勿设置为demo目录！使用WebStorm或Sublime打开demo目录，开发过程中，我们使用WebStorm或Sublime修改src目录下的源码，请勿直接修改dist目录中的文件，因为dist目录是通过labrador命令生成的。

在demo目录中运行 labrador build 命令编译项目，该命令会将src目录下的文件一一处理并生成dist目录下对应的文件。我们也可以运行 labrador watch 命令监控src目录下的文件变化，这样就不用每次修改后手动运行编译命令。

加载NPM包

我们以lodash包为例，在src/app.js中键入代码 const _ = require('lodash'); 编译后，我们看到dist目录下的文件是这样的：

我们看到dist目录下有一个npm/lodash目录，该目录下只有一个lodash.js文件，那么在微信web开发者工具中打包预览，lodash的库将只有这个文件被加载。

这一切是怎么发生的？

我们看一下dist/app.js的源码，发现源码中const _ = require('lodash'); 被编译为 var _ = require('./npm/lodash/lodash.js'); 然后labrador命令将node_modules/lodash/lodash.js 文件复制到了 dist/npm/lodash/lodash.js 。这就是通过labrador可以调用NPM包的原理。

重要的是，只有真正用到的js文件才被labrador命令加入到项目目录中。这样一个小小的改进象征着我们的小程序可以便捷调用NPM仓库中海量的扩展库！

Babel转码

在初始化的示例代码src/app.js中的内容是这样的：

图中timer和getUserInfo属性都为async函数，函数体内使用await调用异步操作。labrador 库对微信API进行了封装，使用 const wx = require('labrador'); 覆盖默认的全局变量wx; 封装后的wx对象提供的异步方法返回的都是Promise异步对象，结合async/await函数彻底终结callback，将异步代码同步写，轻松逃离回调地狱！

但目前async/await函数是不被浏览器支持的，我们需要使用babel对其转码，labrador编译命令已经内置了babel转码，转码后的代码可以查看dist/app.js，内容过长，不再张贴。

重用组件

重用组件最需要解决的问题是组件的逻辑代码怎样重用。在实例代码中有一个src/components目录，用来存放项目内的可重用组件，其结构是这样的：

子目录src/components/list中存放着一个可重用的组件。list.js / list.less / list.xml 分别对应微信小程序的 js / wxss / wxml 文件。JS为控件的逻辑层，其代码如下：

文件导出一个List类，这个组件类拥有像Page一样的生命周期函数onLoad, onReady, onShow, onHide, onUnload 以及setData函数。

LESS文件对应微信的WXSS文件，因为微信小程序实现的限制，LESS中无法使用连级选择语法，但是可以定义变量，方便开发。

XML ファイルは、コンポーネント ビュー記述ファイルである WeChat の WXML ファイルに対応します。 list.xml の内容は次のとおりです。

ファイルから list という名前のテンプレートをエクスポートします。
コンポーネントは src/components ディレクトリに保存できるだけでなく、個別の NPM パッケージにすることもできるため、プロジェクト間でコンポーネントを簡単に共有できます。

コンポーネントの定義が完了したら、次のステップはそれをページ内で呼び出すことです。src/pages/index/index.js には次のコードがあります:

このコードでは、まず、置き換える labrador ライブラリを導入します。グローバルデフォルトの wx オブジェクト、およびグローバル Page 関数の代わりに labrador.createPage メソッドを使用してページを宣言します。次に、List コンポーネント クラスをロードし、ページ宣言構成にコンポーネント属性を追加して、List コンポーネント クラスのインスタンス化を渡します。 labrador.createPage メソッドは、Page メソッドのカプセル化層であり、ページの初期化時にコンポーネント オブジェクトに関連付けることが目的です。

コード @import 'list' を src/pages/index/index.less に追加して、リスト コンポーネントのスタイルを呼び出します。 list.less が src/components/list に見つからない場合、コンパイル コマンドはNPM パッケージ node_modules/list/index.less を探します。

src/pages/index/index.xml にコード a2d1a87164e49e5846672f4898cba5de を追加して、リスト コンポーネントのテンプレート ファイルを呼び出します。このコンポーネントは、コンパイル後にインポートされます。テンプレートはそれに応じて生成されます。 list.xml が src/components/list で見つからない場合、コンパイル コマンドは NPM パッケージで node_modules/list/index.xml を検索します

具体的な経験には、あなた自身の実践的な経験が必要です。この記事はここで終わります。ありがとう ！

【関連推奨事項】

1. WeChatミニプログラムの完全なソースコード

2. WeChatミニプログラムのデモ: NetEase Cloud Musicの模倣

以上がミニプログラム開発における3つの大きな問題とその解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。