ゼロからの(a)は小さなプログラムに、独自のUIコンポーネントライブラリを開発します

EDITORIAL:番組の友人を開発するには小さすぎるがあり、コンポーネントベースの開発、の特性を知る必要があり、高い凝集と低カップリングを。など、UIコンポーネントの既存のライブラリを使用してください:誕生vantUI-weapp、minUI-weappおよびその他のUIコンポーネントライブラリは、私たちは非常に、[全UIコンポーネントライブラリを使用するために使用される豊富なコンポーネントを開発のスピードを加速することができ、フレームワークは見ることができます私の別のブログの携帯端末、PC側(前面と背面)は、共通のUIフレームワークをアプレット]、しかし、私はちょうど単一機能のコンポーネントのライブラリを使用したい、またはそのコンポーネントライブラリへのコンポーネントの優れたコレクション内のコンポーネントライブラリをしたい、または独自のUIコンポーネントライブラリの読み込みを開発したい遭遇していませんその後、小さなプログラムに、独自のUIコンポーネントライブラリを開発し、NPMを使用することを学ぶために他の人のためにそれらをアップロードするためにゼロから私に従ってください、それを開始するために知っ公式サイトのドキュメント。

特別な注意:ゼロの開発から、ここでの接触アプレットに来たことがないという意味ではありませんが白である、ということを前提に開発コンポーネントライブラリ:レイアウトとCSS3 JS(ES6)に精通しているが、書き込み①、②既存のコンポーネントおよびアプレットに精通API、少なくともアプレットをかけて開発しながら、③のgitに精通したノード、NPMを、理解しています。

ベース部のこのセクション

1.プログラムコンポーネントテンプレート(ダウンロード公式アドレス)、[デフォルトのみんなのノード、NPM、理解する上でコマンドライン]

グローバルインストールコマンドラインツールは、実行します。

NPMは、-g @微信アプレット/アプレット-CLIをインストール

空のディレクトリの新しい手紙の中で、仮称:mineuiが(注:英語で小文字を使用する必要があり、それは慎重にしてください命名責任を負うことになる)、プロジェクトのルートディレクトリとして、この空のディレクトリを、実行します。

miniprogramのinit --typeカスタムコンポーネント

プロジェクトの実装では、入力するすべての方法をいくつかの情報を記入します。完了すると、mineuiにおける基本的なドキュメントを生成します。このプロジェクトは、我々はこれに基づいて、当社のコンポーネントライブラリを開発します。

2.プロジェクトを実行

最初の依存関係をインストールし、実行します。

NPMインストール

その後、実行、プロジェクトを実行します。

NPMの実行DEVまたはNPMの実行ウォッチ

以上、プロジェクトディレクトリで見ることができminiprogram_devのディレクトリ、と私たちは、ディレクトリをプレビューするコンポーネントを作成した後、これは、私たちのマイクロツールを開き、文字のためになる今回は、(上記の基本的なライブラリのバージョン2.2.1を調整するために注意してください)、輸入プロジェクト、私達はちょうどフォルダの下に作成したディレクトリの選択miniprogram_devディレクトリmineuiファイル、APPID使用のテスト番号プロジェクトの初期設定をプレビューするには[インポート]をクリックします。

3.各ファイルの役割を理解するために、

①miniprogram_devディレクトリ:実行NPMのRUN devの || NPM RUNウォッチは、ファイルを生成する(リアルタイムでコンパイル)以降では、この小さなプログラムのカタログと最終ページのアセンブリ構造。

②srcディレクトリ:私たちの目標のストレージコンポーネントも後にパッケージ化、準備することは非常に重要なファイルをアップロードする必要があります!

③toolsディレクトリ:私たちが実行されているデモフォルダページフレームワークは、あなたは一般的なプロジェクトの開発と一致し、設定ファイルのJSON、に注意を払う必要があります。このディレクトリにあるconfig.jsファイルも非常に重要であり、エントリの   ディレクトリをパッケージ化コンポーネントを要求される分野のsrcディレクトリ、[「インデックス」]は唯一のインデックスファイルのsrcディレクトリに関連する時間を梱包の最初の層を意味します。我々はマルチコンポーネントライブラリを開発する場合は、そのようsrcディレクトリとして、コンポーネントを格納するための複数のフォルダを作成する必要があります。私たちは、このフォルダの下に作成され、あなたはsrcディレクトリにフォルダボタンを作成し、独自のボタンコンポーネントを作成しますindex.js、index.json、index.wxml、index.wxss、変性しながら   エントリ   フィールド:[ 'インデックス'、 'ボタン /インデックス']。我々はSRC下の削除ディレクトリを提出する場合がありますが、また、変更する   エントリの   フィールドを、コマンドを実行するときにそれ以外の場合はエラー、故障につながります。 

4.パッケージ化とNPMにアップロード

①まず、我々は我々自身のNPMアカウント持っている必要があり、登録アドレスを

②プロジェクトのルートディレクトリに、実行します。

NPMログイン

ただ、登録したユーザー名、パスワード、メールアドレスを入力して。実行し、主な原因non-npmjs.org公式サイトのレジストリを使用することで、ログインに失敗した場合のことに留意すべきです。

NPMコンフィグセット登録https://registry.npmjs.org/

NPMのソースは、レジストリnpmjs.org公式サイトに切り替えています。

③実行、着陸が成功したかどうかを確認します。

私は午前NPM

現在ログインしているユーザーの名前を返します。

④実行:

NPM公開

この時点で、我々は初期化コンポーネントテンプレートにプッシュされますが、公式ウェブサイトをNPM、およびO(∩_∩)O笑〜自分に拍手を与えます。次に、我々はNPM独自のコンポーネントライブラリを参照して、バーの下の効果を確認するために、新しいプロジェクトに小さなプログラムをダウンロードするには、公式ウェブサイトにアクセスしてください。

あなたはNPMパッケージを削除したい、またはちょうどNPMパッケージの下のバージョンを削除したい場合は、実行可能ファイルは、(注意してください、あなたはプロジェクトが予想よりも多くのことをされている使用することができます):

非公開NPM --force //は削除することを余儀なく
@ GuiTest非公開NPM 1.0 0.0 //は、バージョン番号を指定します

ダウンロードパッケージとNPMを確認

①オープンは公式サイトをNPM、先ほど作成した検索プロジェクトは、私の名前はmineuiで、誰もが自分自身の名前を見つけました。見つかりました:

あなたは戻って変更を行いますが、変更されていない、現在のmineui唯一のバージョン、およびreadmeファイルも公式テンプレートであることがわかります。

②既存または新規のプロジェクトにインストールされたコンポーネントライブラリは、私がプレゼンテーションを行うには、ブランドの新しいプロジェクトにここにいます。

そして、マイクロ手紙開発ツールを開いて、新しいプロジェクトのプロセスの実装は、情報例えば、自己投与:鉱山-weapp:私の小さなプロジェクトとして命名します。

プロジェクト実行のルートディレクトリに初期化プログラムの後に:

NPM熱

package.json、project.config.json 2つのファイルを生成しますプロジェクトのルートディレクトリの成功の後、デフォルトと同じように入力します。

私たちのNPMコンポーネントライブラリで、インストールする方法を参照してくださいよ、私たちは(全員のパッケージ名はああ、ノート異なる場合があります)を実行します。

NPM私mineui -S --production -verbose

-Sは、作製 - オプションを追加し、あなたがそれによって全体の小型パッケージのサイズを小さくすると、インストール関連のないビジネスNPMパッケージを減らすことができ、--saveです。出力の詳細な情報(できない)に-verbose、英語の翻訳は、冗長な手段です。

完成した、私たちは、開発者向けツールで動作:ツール→NPMを構築し、同時に右の詳細を確認し、[ NPMモジュールオプションを使用します ]

 

私たちは彼を参照して、その後どのように、これはモジュールを構築するための開発ツールである、miniprogram_npmディレクトリが生成されます、プロジェクトのルートディレクトリにありますか?

③由于对刚刚初始化的组件模板没有做任何修改,我们现在修改新创建的小程序的根目录下的app.json文件,新增usingComponents字段:

"usingComponents": {
    "comp": "mineui/index"
},

在pages→index→index.wxml文件中最下方添加组件:

<comp />

编译后发现,我们的组件已经成功渲染到小程序页面中:

至此,初始化组件库模板、模板文件概述、模板上传npm、npm包文件下载至本地并运用到项目就讲解完了。

后续我会逐一讲解:基础UI组件库的搭建和丰富、如何在本地使用npm link调试npm包项目。

由于工作原因,后续不定时更新,请见谅、、

おすすめ

転載: www.cnblogs.com/e-cat/p/11260134.html