WeChat ミニ プログラムのカスタム コンポーネントの詳細な紹介

この記事では主に WeChat ミニ プログラムのカスタム コンポーネントの関連情報を詳しく紹介します。興味のある方は参考にしてください

前書き

最近また WeChat ミニ プログラムに触れました。 -end 会社が以前使用していたフレームワークは Vue でした。比較した結果、小さなプログラムの開発にはさまざまな制限があり、開発者にとって非常に不親切であることがわかりました。文句のつけどころが多すぎるので、ここでは詳しくは述べませんが、次回は文句を言う特集記事を書こうと思います。今回は主にミニ プログラムのカスタム コンポーネントに関するいくつかのアイデアを共有します。ミニ プログラムが提供する公式フレームワークは比較的シンプルで原始的であり、再利用性が低く、カスタム コンポーネントの機能が実装されていないため、Vue を使用してフロントエンドに反応する人が多くいます。 -エンドの展開は非常に不快です。インターネット上にはさまざまな不満があり、カスタムコンポーネントの実装方法も共有されていますが、複雑すぎるか、アップグレード後にWeChatアプレットに互換性がないため、とにかく議論できないさまざまな罠があります。ここでは、私がそれをプロジェクトにどのように実装したかを共有したいと思います。修正や批判は歓迎されており、お互いから学ぶことができます。

トーストカスタムコンポーネントの実装

• 例として最も単純なトーストコンポーネントを示します

• 公式フレームワークはページテンプレート機能のみを提供します: WXMLはテンプレート(テンプレート)を提供し、その後、テンプレート フラグメントがさまざまな場所で呼び出されます。

• ただし、この関数は js、スタイルのカプセル化をサポートしておらず、対応するページで処理する必要があり、テンプレートにも独自のスコープがあり、データを使用して渡す必要があります。

• 関数を独立したコンポーネントにカプセル化します。これを使用する場合は、コンポーネントを対応するページにマウントします。そのため、コンポーネントはこの (Page) オブジェクトの実装をページに渡す必要があります。コードは次のとおりです
  

目次の構造

|------components
-toast.wxss


コード

toast.wxml

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

toast.js

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

方法使用する

1. wxmlリファレンスページテンプレート

2. jsファイルリファレンスtoast.js

import { toast } from '../../../project/component/toast/toast.js'

3.

toast(this, '填写详细信息')

の改良点とその他の拡張機能

・・・などの一般的なコンポーネントや多数の業務コンポーネントを一つのjsファイルに導入し、ページ読み込み(onLoadメソッド)にこの(ページ)を登録するだけで済みます。すべてのコンポーネントを一度使用すると、

toast(this,'填写详细信息'')

は

toast('填写详细信息'')

になります。 同じ考え方で、vue でのミックスと同様のことを実現できます ( mixin の機能により、複雑なビジネス プロジェクトにおけるコードの再利用性と保守性が大幅に向上します。

会社のミニプログラムの開発は私一人で行っており、複数人で共同してミニプログラムを開発することはありませんので、この点にはあまり力を入れておりません。

以上がWeChat ミニ プログラムのカスタム コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。