WeChat ミニ プログラム開発 - 実行の開始 (5)

プログラミング 2023-05-17 06:18:32 訪問数: null

記事ディレクトリ

1. 今日の目標

  1. vant-weappコンポーネントライブラリをインストールおよび構成する方法を知る能力
  2. を使用してグローバル データ共有MobXを実装する
  3. API小さなプログラムをPromise最適化する方法を知ることができる
  4. tabBarカスタムエフェクトを実現する方法を知る能力

2.npmの使用

2.1 ミニ プログラムの npm のサポートと制限
質問

  • ミニ プログラムに npm パッケージを使用する場合の制限は何ですか?

    現在、ミニ プログラムは、ミニ プログラムの開発効率を向上させるために、サードパーティ パッケージをインストールするための npm の使用をすでにサポートしています。ただし、アプレットで npm パッケージを使用するには、次の 3 つの制限があります。

  1. Node.js 組み込みライブラリに依存するパッケージはサポートされていません
  2. ブラウザの組み込みオブジェクトに依存するパッケージはサポートされていません
  3. C++ プラグインに依存するパッケージはサポートされていません

概要: npm には数千万のパッケージがありますが、小規模なプログラムで使用できるパッケージは「ほとんどありません」

2.2 vant Weapp とは何かを理解する
  1. VantYouzan のフロントエンド チームによるオープンソースのモバイル コンポーネント ライブラリで、2016 年に公開され、4 年間維持されています。VantYouzan のすべてのコア ビジネスを社内で担い、社外では 100,000 人を超える開発者にサービスを提供しており、業界で主流のモバイル コンポーネント ライブラリの 1 つです。
  2. MITオープンソースライセンス契約を採用し、より商用利用しやすくなりました
  3. 以下のアプレットの QR コードをスキャンして、サンプル コンポーネント ライブラリを体験してください

QR コードはここには投稿できません。Baidu で検索できます。

ここに画像の説明を挿入

2.3 Vant コンポーネント ライブラリのインストール
質問

  • Vant コンポーネント ライブラリをインストールするにはどうすればよいですか?

    アプレット プロジェクトでは、Vant コンポーネント ライブラリのインストールは主に次の手順に分かれています

  1. npmインストールすることで

    npm init -y

    npm i @vant/[email protected] -S --production

    --production を使用すると、依存関係のみがインストールされ、devDependences はインストールされません。

  2. ビルドnpmパッケージ関数

    • 微信开发者工具--> 详情--> 本地设置-->をクリックすることをお勧めします。使用 npm 模块
    • 次に、微信开发者工具--> 菜单栏--> 工具-->をクリックします。构建npm
    • プロンプトが表示され构建成功，耗时 xxx 秒、コンソールにエラーが表示されない場合は、パッケージが正常にビルドされ、使用できることを意味します。
      • それ以外の場合は、削除する必要node_modulesがありますminiprogram_npm
      • 削除した後、パッケージを再インストールし、工具[->]をクリックして构建npm 再構築します。

  3. 改訂app.json

    • 防止のため削除させてstyles: v2いただき小程序本身的 UI 样式和 Vant 的组件样式库 冲突

詳細な操作アドレス: vant のインストール

2.4 Vant コンポーネントの使用
質問
  • Vant コンポーネント ライブラリを使用するにはどうすればよいですか?

Vantコンポーネントライブラリをインストールした後、必要なコンポーネントをapp.jsonのusingComponentsノードに導入し、wxmlコンポーネントを直接使用できます。

ここに画像の説明を挿入

"usingComponents": {
    
    
  "van-button": "@vant/weapp/button/index"
}

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
2.5 CSS 変数の定義と使用
質問
  • CSS変数の使い方は？
  • CSS変数のスコープはどこまでですか?

Vant WeappCSS変数を使用してカスタム テーマを実装します。CSS変数の基本的な使用法については、MDNドキュメントを参照してください。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_propertiesopen

2.6 CSS 変数を使用して Vant のテーマ スタイルをカスタマイズする
質問
  • Vant のスタイルをカスタマイズするにはどうすればよいですか?

app.wxssに、CSSグローバルに有効になる変数を記述します。

ここに画像の説明を挿入

利用可能なすべてのカラー バリエーションについては、Vant が提供する公式構成ファイルを参照してください。

https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less

2.7 ミニプログラムAPIの約束とは
  1. コールバックベースの非同期APIの 欠点
    • Mini Programs が公式に提供する非同期 API は、デフォルトではコールバック関数に基づいて実装されており、たとえばネットワーク リクエストの API は次のように呼び出す必要があります。
    • この種のコードの欠点は明らかで、コールバック地獄の問題が発生しやすく、コードの可読性と保守性が低いことです。そして、このタイプのコードを次のようにAPI Promise変換したい
  2. API Promise化学 とは何ですか
    • API Promise変換とは、コードの可読性と保守性を向上させ、コールバック 地獄の問題を回避するために、追加の構成を通じてAPI公式に提供されているコールバック ベースの非同期をPromise非同期を指します。API
2.8 miniprogram-api-promise のインストールとビルド

  1. アプレットでは、API Promise実装は主にminiprogram-api-promiseこのサードパーティnpmパッケージに依存します。

    npm i --save [email protected]

  2. ダウンロードが完了すると、このパッケージを直接使用することはできなくなり、npm パッケージを再度再構築する必要があります。

    • ビルドする前に元のファイルを削除することをお勧めしますminiprogram_npm
    • 次に、「ツール」、「ビルド」をクリックしますnpm
2.9 APIの約束を実現するための3つのステップ

ここに画像の説明を挿入

  1. アプレット エントリ ファイルでpromisifyAll()メソッドを

    import {
      
       promisifyAll } from 'miniprogram-api-promise'

  2. 定数を空のオブジェクトとして宣言する

    const wxp = wx.p = {
      
      }

  3. 呼び出しpromisifyAll()メソッド

    promisifyAll(wx, wxp)

  4. 上記のコードは何を意味するのでしょうか?

    • promisifyAll: 私たちが行うことは、が所有するすべてのプロパティとメソッドをこのwxことですcopywxp
    • ただし、wxpこれは現在のjsファイル、現在のファイル内でのみ使用できます。
    • したがって、プロパティwxをpそれが同じ空のオブジェクトwxpを指すします。
    • 他のページまたはコンポーネントではwx、グローバル オブジェクトをクリックすることでpアクセスできます。wxp
    • このとき、非同期リクエストwx.pが開始される、promiseオブジェクトが取得されます
    • その後、簡略化された構文async/awaitを使用できますPromise
2.10 Promise の後に非同期 API を呼び出す

ここに画像の説明を挿入

<van-button type="warning" bindtap="getInfo">警告按钮</van-button>

async getInfo () {
    
    
  const {
    
     data: res } = await wx.p.request({
    
    
    url: 'https://www.escook.cn/api/get',
    method: 'GET',
    data: {
    
    
      name: 'zs',
      age: 19
    }
  })

  console.log(res)
}

3. グローバルなデータ共有

3.1 グローバルデータ共有とは何ですか
  1. 全局数据共享、別名: は、問題を状态管理解決することです组件之间数据共享
  2. 開発時に一般的に使用されるグローバル データ共有スキームには、、、VuexなどReduxがMobXあります。
3.2 アプレットにおけるグローバルデータ共有スキーム
  1. アプレットでは、mobx-miniprogrammatesを使用してmobx-miniprogram-bindingsグローバルなデータ共有を実現できます。の：
    • mobx-miniprogramStoreインスタンスオブジェクトの作成に使用されます
    • mobx-miniprogram-bindingsStore共有データまたはメソッドをコンポーネントまたはページにバインドして使用するために使用されます

ここに画像の説明を挿入

3.3 Mobx 関連パッケージのインストールとビルド

プロジェクトで次のコマンドを実行して、MobX関連

npm install --save [email protected] [email protected]

注:MobX関連パッケージをインストールした後、miniprogram_npmディレクトリをnpm

3.4 Storeインスタンスオブジェクトの作成
質問
  • Storeのインスタンスオブジェクトを作成するにはどうすればよいですか?
  • グローバルに共有されるデータを定義するにはどうすればよいですか?
  1. プロジェクトのルートにstoreフォルダーを、そのフォルダー内にstore.jsファイルを作成します
  2. ファイル内でmobx-miniprogram、Storeインスタンスを作成するパッケージをインポートします。
  3. Storeウェアハウスの作成、グローバル共有データの宣言、インポート
import {
    
     observable } from 'mobx-miniprogram'

export const store = observable({
    
    
  numA: 1,
  numB: 2
})
3.5 計算されたプロパティの定義
質問
  • 計算されたプロパティを定義するにはどうすればよいですか?
  1. 属性を計算するメソッドの前に、get修飾子を。これはsum、 の値が読み取り専用であり、変更できないことを意味します。
  2. 計算されたプロパティsumはnumAとnumBの値に依存するため、sum関数の戻り値が最終値になります

ここに画像の説明を挿入

import {
    
     observable } from 'mobx-miniprogram'

export const store = observable({
    
    
  // 数据字段
  numA: 1,
  numB: 2,

  // 计算属性
  get sum() {
    
    
    return this.numA + this.numB
  }
})
3.6 アクションメソッドの定義
質問
  • グローバル共有データを更新するにはどうすればよいですか?
  1. インポートaction機能
  2. actionデータの値を変更するためstoreに

ここに画像の説明を挿入

import {
    
     observable, action } from 'mobx-miniprogram'

export const store = observable({
    
    
  // 数据字段
  numA: 1,
  numB: 2,

  // 计算属性
  get sum() {
    
    
    return this.numA + this.numB
  },

  // actions 方法，用来修改 store 中的数据
  updateNumA: action(function (step) {
    
    
    this.numA += step
  }),

  updateNumB: action(function (step) {
    
    
    this.numB += step
  })
})
3.7 ストア内のメンバーをページにバインドする実装アイデア
質問
  • ページ内ストアを使用するにはどうすればよいですか?
  1. createStoreBindings方法
    • パラメータ 1: バインド先: 現在のページthis、現在のページのインスタンス オブジェクト
    • パラメータ 2: オブジェクト {ストア (コンテナ), fields(数据), actions(修改方法)}
      • マップコンテナのインスタンス
      • コンテナのデータフィールドをマッピングする
      • コンテナの変更をマッピングするためのメソッド
  2. destroyStoreBindings メソッド
    • createStoreBindingsメソッドの戻り値をクリーンアップして破棄します。

ここに画像の説明を挿入

3.8 ストア内のメンバーをページにバインドする
import {
    
     createStoreBindings } from 'mobx-miniprogram-bindings'
import {
    
     store } from '../../store/store'

Page({
    
    

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.storeBindings = createStoreBindings(this, {
    
    
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNumA']
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    
    this.storeBindings.destroyStoreBindings()
  }
})
3.9 ページ内でのストアメンバーの使用

ここに画像の説明を挿入

<view>{
   
   { numA }} + {
   
   { numB }} = {
   
   { sum }}</view>

<van-button type="warning" bindtap="btnHandler1" data-step="{
     
     { 1 }}">
  numA + 1
</van-button>

<van-button type="primary" bindtap="btnHandler1" data-step="{
     
     { -1 }}">
  numA -1
</van-button>

btnHandler1 (e) {
    
    
  this.updateNumA(e.target.dataset.step)
}
3.10 Storeのメンバーをコンポーネントにバインドする実装アイデアを理解する
質問
  • コンポーネントでストアメンバーを使用するにはどうすればよいですか?

ここに画像の説明を挿入

3.11 ストア内のメンバーをコンポーネントにバインドする
import {
    
     storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {
    
     store } from '../../store/store'

Component({
    
    
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    
    
    store, // 指定要绑定的 Store
    // 指定要绑定的字段数据
    fields: {
    
    
      numA: () => store.numA, // 绑定字段的第 1 种方式
      numB: (store) => store.numB, // 绑定数据的第 2 个方式
      sum: 'sum' // 绑定数据的第 3 个方式
    },
    // 指定要绑定的方法
    actions: {
    
    
      updateNumA: 'updateNumA'
    }
  }
})
3.12 コンポーネントでの Store メンバーの使用
<!--components/numbers/numbers.wxml-->
<view>{
   
   { numA }} + {
   
   { numB }} = {
   
   { sum }}</view>

<van-button type="warning" bindtap="btnHandler1" data-step="{
     
     { 1 }}">
  numA + 1
</van-button>

<van-button type="primary" bindtap="btnHandler1" data-step="{
     
     { -1 }}">
  numA -1
</van-button>

import {
    
     storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import {
    
     store } from '../../store/store'

Component({
    
    
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    
    
    store, // 指定要绑定的 Store
    // 指定要绑定的字段数据
    fields: {
    
    
      numA: () => store.numA, // 绑定字段的第 1 种方式
      numB: (store) => store.numB, // 绑定数据的第 2 个方式
      sum: 'sum' // 绑定数据的第 3 个方式
    },
    // 指定要绑定的方法
    actions: {
    
    
      updateNumA: 'updateNumA'
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
    
    btnHandler1 (e) {
    
    
      this.updateNumA(e.target.dataset.step)
    }
  }
})

4. 下請け

4.1 下請けの概念と利点を理解する
質問
  • 下請けとは何ですか? メリットは何ですか？

  1. 下請けとは何ですか

    サブパッケージとは、構築時に完整的小程序项目要件に応じて1 つの パッケージを別のサブパッケージにパッケージ化することを指します。划分为不同的子包按需进行加载

  2. 下請けのメリット

    • アプレットの初回起動時のダウンロード時間を最適化できます。
    • 複数のチームが一緒に開発する場合の分離とコラボレーションの向上
4.2 委託前後のプロジェクト構成

  1. 委託前のプロジェクトの構成

    下請け前所有的页面とパッケージ化されるため、アプレット资源全体が影響を受ける项目体积过大首次启动的下载时间

    ここに画像の説明を挿入

  2. 委託後のプロジェクト構成

    • 下請け後のアプレット プロジェクトは 1 个主包+で構成されます多个分包。
      • 主包: 通常项目的启动页面、 またはTabBar 页面、および使用する必要がある一部のサブパッケージのみが含まれます公共资源
      • 分包: 現在のサブパッケージに関連するページとプライベート リソースのみが含まれます
4.3 サブパッケージのロードルール
  1. アプレットが起動すると、デフォルトでダウンロードされます主包并启动主包内页面
    • tabBar ページはメイン パッケージに配置する必要があります
  2. ユーザーがサブパッケージ内のページを入力し、客户端会把对应分包下载下来ダウンロードの完了後にそのページを表示すると
    • tabBar 以外のページは、さまざまな機能に応じてさまざまなサブパッケージに分割し、オンデマンドでダウンロードできます。
4.4 下請けの数量制限
質問
  • サブパッケージの容量の制限はどれくらいですか?
  1. 現在、ミニ プログラムのサブパッケージのサイズには 2 つの制限があります。
    • アプレット全体のすべてのサブパッケージのサイズは 16M (メイン パッケージ + すべてのサブパッケージ) を超えません。
    • 1 つのサブパッケージ/メイン パッケージのサイズは 2M を超えることはできません
4.5 下請けの構成方法を学ぶ
質問
  • 下請けに出す前にどのように設定すればよいですか?
  1. プロジェクトのディレクトリを変更する
  2. app.jsonのsubpackagesノードでパッケージ化された構造体を宣言します。

ここに画像の説明を挿入

4.6 プロジェクト内で下請けを構成する方法をデモンストレーションする
  1. サブパッケージが設定されると、対応するディレクトリがデフォルトで生成されます。
{
    
    
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subPackages": [
    {
    
    
      "root": "pkgA",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
    
    
      "root": "pkgB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ]
  "sitemapLocation": "sitemap.json"
}
4.7 サブコントラクトのエイリアスを設定し、サブコントラクトのボリュームを表示する
  1. 各サブパッケージにname属性をエイリアスを設定します
  2. 微信开发者工具 --> 基本信息 --> 本地代码下請けの量を確認できます。
{
    
    
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shoplist/shoplist"
  ],
  "subPackages": [
    {
    
    
      "root": "pkgA",
      "name": "A",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
    
    
      "root": "pkgB",
      "name": "B",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ]
  "sitemapLocation": "sitemap.json"
}
4.8 梱包原則
  1. アプレットは設定subpackagesに従って、subpackages他のディレクトリはメイン パッケージにパッケージ化されます。
  2. メインパッケージには独自のpages(つまり、最も外側のpagesフィールド) を持つこともできます。
  3. tabBarページはメイン パッケージ内にある必要があります
  4. サブパッケージを相互にネストすることはできません
4.9 引用の原則
  1. メインパッケージはサブパッケージ内のプライベートリソースを参照できません
  2. サブパッケージ間でプライベート リソースを参照することはできません
  3. サブパッケージはメインパッケージ内のパブリックリソースを参照できます
4.10 独立下請けとは何か、およびそれと共通の下請けとの違いを理解する
  1. 独立下請けとは
    • 独立したサブパッケージは本質的にはサブパッケージですが、特別であり、メイン パッケージや他のサブパッケージから独立して実行できます。
  2. 単独下請けと一般下請けの違い
    • 主な違い:是否依赖于主包才能运行
      • 通常のサブパッケージは実行するメイン パッケージに依存する必要があります
      • 独立したサブパッケージは、メイン パッケージをダウンロードせずに独立して実行できます。
4.11 独立下請けの適用シナリオを理解する
  1. 開発者は、必要に応じて、機能的に独立した特定のページを独立したサブパッケージに構成できます。その理由は次のとおりです
    • アプレットが通常のサブパッケージ ページから起動される場合、最初にメイン パッケージをダウンロードする必要があります
    • 独立したサブパッケージはメインパッケージに依存せずに実行できるため、サブパッケージページの起動速度が大幅に向上します。
  2. 注: 小さなプログラムには複数の独立したサブパッケージが存在する場合があります。
4.12 通常の下請けを独立した下請けに転換する
質問
  • 独立した下請けを構成するにはどうすればよいですか?
  1. 通常のサブコントラクトと独立したサブコントラクトの違いは、この属性が subpackages配列に設定されているかどうかです。independent
    • 通常のサブパッケージと比較して、独立サブパッケージは、サブパッケージ配列の要素に独立を true として設定します。

ここに画像の説明を挿入

4.13 独立下請けの引用原則
質問
  • 独立したサブパッケージ参照の制限は何ですか?
  1. 独立したサブパッケージ、共通のサブパッケージとメイン パッケージの間では、はい相互隔绝、不能相互引用彼此的资源! 例えば：
    • メインパッケージ无法引用の独立したサブパッケージ内のプライベートリソース
    • 独立した下請け業者間、不能相互引用民間リソース
    • 独立した下請けと共通の下請け間の不能相互引用プライベートリソース
    • 特别注意：メインパッケージ内のパブリックリソースは、独立したサブパッケージでは参照できません
4.14 サブパッケージの事前ダウンロードの概念と利点の紹介
  1. サブパッケージの事前ダウンロードとは何ですか
    • サブパッケージの事前ダウンロードとは、アプレットの特定のページに入るときに、由框架自动预下载可能需要的分包後続のサブパッケージ ページに入るときの起動速度を向上させることを意味します。
  2. サブパッケージの事前ダウンロードの利点
    • 後続のサブパッケージ ページに入るときの起動速度を向上させます。
4.15 サブパッケージの事前ダウンロードを構成する
  1. サブパッケージの事前ダウンロードの動作は、指定されたページに入るときにトリガーされます。app.jsonでは、preloadRuleノードを使用してサブパッケージの事前ダウンロード ルールを定義します。

ここに画像の説明を挿入

// 分包预下载的规则
"preloadRule": {
    
    
  // 触发分包预下载的页面路径
  "pages/contact/contact": {
    
    
    // network 表示在指定的网络模式下进行预下载
   // 可选值有： all(不限网络)和wifi(仅 wifi 模式下进行预下载)
   // 默认值为： wifi
    "network": "all",
     // packages 表示进入页面后， 预下载哪些分包
     // 可以通过root 或name 指定预下载哪些分包
    "packages": [
      "pkgA"
    ]
  }
}
4.16 サブパッケージの事前ダウンロードの制限事項
  1. 同じサブパッケージ内のページは、共通の事前ダウンロード サイズ クォータを共有します。2M

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_46862327/article/details/128439964
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com