Weapp 映画とテレビのスコアリングプロジェクトの開発 (04): サードパーティコンポーネントの使用

知識ポイント

三方组件库的安装与使用 computed 的安装与使用

新しいコードブランチ

masterベンチマークとしてgitee、新しいコードブランチcomponentを作成し、このブランチでコードを開発します。コマンドは次のとおりです。

git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发

1. Mind UI Weapp コンポーネントライブラリ

1. コンポーネントライブラリの紹介

このプロジェクトで使用するコンポーネントライブラリは、インストール方法をサポートする、Mind UI Weappこのプロジェクト用に私が開発したネイティブUIコンポーネント。npm

コンポーネントライブラリのソースコード:https://github.com/NameLi/mind-ui-weapp
コンポーネントライブラリのドキュメント:https://mind-ui-weapp.ixook.com

2. コンポーネントライブラリのインストール

コンポーネントライブラリのインストールnpm i mind-ui-weapp -S ※コンポーネントライブラリをビルドしてインストールすると、node_modulesフォルダ、WeChat Developer Tools のLocal Settingsをクリックし、npm modulesを使用するオプションにチェックを入れ、トップメニューのTools -> Build npm をクリックします。 build is complete, a miniprogram_npmdirectory will be generated . このディレクトリでは、ビルドされたコンポーネントライブラリファイルパッケージを表示し、コンポーネントをインポートして使用できます。
app.jsonファイル内usingComponentsのオブジェクトの下に登録をインポートすることにより、グローバル登録をグローバルに使用できます。通常、使用頻度の高い部品はグローバルに登録されます。{"usingComponents": {"m-button": "mind-ui-weapp/button/index",}} ・ページ・コンポーネントの登録ページやコンポーネントのxxx.jsonファイル（buttonコンポーネントを例にとる）"usingComponents": {"m-button": "/mind-ui-weapp/button/index"} 、テンプレートで使用する・<m-button type="primary">按钮</m-button> 画面下border.wxssのボーダーはコンポーネントライブラリに組み込まれており、スタイルはコンポーネントライブラリに基づいている疑似クラスとの実装。テンプレートのスタイルが既に疑似クラスを使用している場合は、要素のレイヤーを追加して外側にラップし、スタイルの競合が上書きされないようにしてください。*スタイルオーバーライド*内のすべてのコンポーネントが有効です。外部ページスタイルは、コンポーネントの内部スタイルを直接オーバーライドできます。また、コンポーネントスタイルの名前空間はです。プロジェクト内のスタイル名と競合しないようにしてください。* カスタムコンポーネントでコンポーネントコンポーネント場合、スタイルをオーバーライドする必要がある場合は、それを有効にする必要がありますRetina1pxcss::before::aftertransform/* app.wxss 或 app.scss */@import "miniprogram_npm/mind-ui-weapp/assets/style/border.wxss"; Mind UI WeappaddGlobalClass: truem-Mind UI WeappstyleIsolation: 'shared'
JS メソッドコンポーネントの使用は、現在JS、toast message modal呼び出される 3 種類のコンポーネントをサポートしています。コンポーネントコードはページまたはコンポーネントファイルに導入できますが、グローバルプロパティにインポートし.jsます。相対位置を使用すると、パスに問題が発生します。任意のページまたはコンポーネントで使用する場合は、対応するコンポーネントをページテンプレートに記述する必要があります。注: コンポーネントで使用する場合は、コンポーネントを導入するページテンプレートに対応するコンポーネントを記述する必要があります。無効です。### 2.プラグインimportapp.jswxapp.json// app.jsimport Toast from 'mind-ui-weapp/toast/toast'import Message from 'mind-ui-weapp/message/message'import Modal from 'mind-ui-weapp/modal/modal'wx.$toast = Toast; wx.$message = Message;wx.$modal = Modal; jswx.$toast('simple toast'); <m-toast id="toast" /> miniprogram-computed

1.`miniprogram-computed`はじめに

プラグインは WeChat アプレットによって公式に提供されており、公式の説明は次のとおりです。アプレットのカスタムコンポーネントの拡張機能behavior、計算属性computed、およびwatchリスナーの実装です。データまたはプロパティが変更されると、computedフィールドされ、watchリスナーがトリガーされます。簡単に言うと、との vue の実装に似computedています. との違いは、で使用できず、の値をパラメーターです. のサポートはありません.watchvuecomputedthisdatacomputedwatchVuehandle

公式ソースコード:https://github.com/wechat-miniprogram/computed

2.`miniprogram-computed`インストール

npm i miniprogram-computed -S

インストールが完了したら、それを使用するために開発者ツールnpm 构建も。

3.`miniprogram-computed`の使用

const = require('miniprogram-computed').behavior; // 引入计算属性组件

Component({behaviors: [computedBehavior],// 注入 mixins...
})

使用するcomputedBehaviorたびapp.jsに、のwxオブジェクトできます。

// app.js
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;

使用する：

// 组件中
Component({behaviors: [wx.computedBehavior],// ...
})

// 页面中
Page({behaviors: [wx.computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b;}},// ...
})

3.Git の設定

インストールされたサードパーティパッケージファイルはホストする必要gitがため.gitignore、関連ファイルはで無視する必要があります。

# .gitignore 文件中新增以下文件名称
package-lock.json// 本地包管理文件
/node_modules// 三方包
/miniprogram_npm // npm 构建后的三方包

ネイティブコードをオンラインで送信します。

git add . // 将本地代码添加到缓存区
git commit -m "UI 组件库与 computed 组件的安装与使用"// 将缓存区代码添加到本地仓库
git pull // 拉取远程代码
git push // 将代码提交到远程仓库

コンポーネントブランチコードをマスターにマージする

git checkout master // 切换到主分支
git merge component // 将 copmponent 分支代码合并到当前分支
git push// 将合并后的代码提交到远程分支

やっと

以上が本プロジェクトで使用するサードパーティ製コンポーネントライブラリの紹介ですが、詳しい使い方は次回以降の開発コードに反映させていただきます。

やっと

フロントエンド情報パッケージは、すべての人に用意されています。54冊、2.57Gフロントエンド関連の電子書籍「フロントエンドインタビュー集（回答・分析付き）」、難解・要点解説動画チュートリアル（フルセット）を収録。

困っている友達は、下のカードをクリックして無料で受け取り、共有できます