序文：
多くの友人は、小さなプログラムに初めて触れたとき、頭を悩ませています。彼らは、いくつかの npm パッケージを使用する必要があります。彼らは、それらのビルド方法を知りません。vue や React ほど便利ではありません。パッケージ名を npm インストールするだけで、importを通じて直接使用できます。次の記事では、主に WeChat ミニ プログラムで一般的に使用される vant フレームワークと、ミニ プログラム コンポーネント間の通信に一般的に使用されるフレームワーク パッケージ pubsub-js による例を示します。
バージョンナンバー
1. 現在の開発者ツールのデバッグベースライブラリのバージョン番号
2. vant および pubsub-js のバージョン番号
1. npmパッケージの基本ファイルpageage.jsonをビルドします。
npm init
このステップで何も変更する必要がない場合は、そのまま Enter キーを押し続けてください。
2.pubsub-jsをダウンロードする
npm install pubsub-js
3. ファイルのルート ディレクトリ ファイルを変更します: project.config.json
注:その他は基本的に変更されず、主に次の位置が変更されます。
この場所の最初のビルドが"srcMiniprogramRoot": "miniprogram/"
の場合は、次の形式に変更する必要があります。"compileType": "miniprogram"が存在しない場合は追加する必要があります。
"srcMiniprogramRoot": "miniprogram_npm/",
"compileType": "miniprogram"
以下は、小さなプログラムによって構築されたサンプルの project.config.json ファイルです。クラウド開発関連のファイルが追加されています。不要な場合は削除できます。削除しないと、プログラムがエラーを報告する可能性があります。
appid は私によって削除されました。個人の appid を使用する必要があります。
{
"cloudfunctionRoot": "cloudfunctions/",
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"setting": {
"urlCheck": true,
"es6": false,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": true,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"ignoreUploadUnusedFiles": true,
"useStaticServer": true
},
"compileType": "miniprogram",
"cloudfunctionTemplateRoot": "cloudfunctionTemplate/",
"condition": {
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 5
},
"libVersion": "2.24.0",
"packOptions": {
"ignore": [],
"include": []
},
"appid": "your appid",
"srcMiniprogramRoot": "miniprogram_npm/"
}
4.npmビルド
この手順は簡単な操作で、主な手順は次のとおりです。
WeChat 開発者ツールの上部バーを選択します-----> ツール-----> Build npm
ビルドが完了すると、ルート ディレクトリに次のファイルが生成されます。pubsub-js 関連ファイルがすでに存在していることがわかります。プロジェクト構造に注意してください。そうでないと、app.json ファイルでエラーが報告される可能性があります。見つからない。
5. pubsub-js を使用する
Vue または React を使用したことのある人は、この手順をよく知っているはずです。比較的単純です。スクリーンショットを撮るだけで理解できるはずです。1. 公開を使用してメッセージを公開します。2. サブスクライブ関数を使用してメッセージを購読し
ます
。
パブリッシュが呼び出されると、すぐにサブスクライブも呼び出されます。ここでの私の個人的な使用シナリオは、小さな妖精のためのプロジェクトです。ユーザーがユーザー インターフェイスをクリックしてログインし、タイミング学習を開始する小さなプログラムを通じて取得する必要があります。ユーザーの openid を取得し
、この openid をグローバル app.js に設定します。したがって、pubsub-js を使用するのが最も簡単で、さまざまなページ間の通信を設定する方がはるかに便利です。
6. Vant フレームワークの構築
WeChat ミニ プログラムの Vant フレームワーク アドレス: https://vant-contrib.gitee.io/vant-weapp/#/home
基本的な構築方法はpubsub-jsと同じで、大きな変更はありません. 重要な点は、vantはコンポーネントのエイリアスをグローバルに設定する必要があるということです. このファイルは、同じルートディレクトリにあるapp.jsonファイルですレベルは tabBar です。場所を間違えないでください。スクリーンショットを参照してください。
さらに、vant 関連のスタイル ファイルをグローバル wxss にインポートする必要もあります。例を参照してください。
app.json ファイルのソースコードの例
{
"pages": [
"pages/index/index",
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "诗词歌赋",
"navigationBarTextStyle": "black",
"onReachBottomDistance": 0,
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#000",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [
},
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-nav-bar": "@vant/weapp/nav-bar/index",
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index",
"van-transition": "@vant/weapp/transition/index",
"van-tree-select": "@vant/weapp/tree-select/index",
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index",
"van-notify": "@vant/weapp/notify/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-empty": "@vant/weapp/empty/index",
"van-collapse": "@vant/weapp/collapse/index",
"van-collapse-item": "@vant/weapp/collapse-item/index",
"van-search": "@vant/weapp/search/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-image": "@vant/weapp/image/index",
"van-loading": "@vant/weapp/loading/index",
"van-icon": "@vant/weapp/icon/index",
"van-sticky": "@vant/weapp/sticky/index",
"van-field": "@vant/weapp/field/index"
},
"lazyCodeLoading": "requiredComponents"
}
その後、関連コンポーネントをグローバルに使用できます。基本的な例を参照してください。
ビルドされたすべてのパッケージは下の図のようになります。親フォルダー名は miniprogram_npm であることに注意してください。
やっと
今のところはここまでです。ご視聴いただきありがとうございます。
他のnpmパッケージの構築方法についても、この記事が実際の仕事や勉強のお役に立てれば幸いです。