WeChat公式アカウントでReactプロジェクトを実行する方法

1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリックしても反応がなく、パソコンでクリックするとウェブページがクラッシュする、というものです。
2. antd-mobile の長いリストの listView を使用して長いリストを読み込みます。 (モバイルデバイス上の長いリストに対する代替ソリューションを提供します)
4. Echartsは地図と棒グラフを描画します
5. useRef を使用して値をバインドし、DOM に直接バインドできる操作を実行します。
6. コンポーネントをパッケージするための小さなアイデア

注: このプロジェクトは、create-react-app と antd-mobile を組み合わせて作成された H5 であり、WeChat 公式アカウントで実行されます。

1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリックしても反応がなく、パソコンでクリックするとウェブページがクラッシュする、というものです。

<a href='pdf または画像パス'>
  PDF または画像名</a>

理由は、ブラウザが安全でないアクセスを検出し、ブロックしたためです。したがって、エラープロンプトに従って、2 つの新しい属性 target と rel を追加し、次のように記述します。

<a href='pdf または画像パス' target='_blank' rel="noreferrer">
  PDF または画像名</a>

パソコンでもiOSでも正常に閲覧できます。

ただし、Android ではいくつかの状況があります。

a) 携帯電話には QQ ブラウザが搭載されており、PDF を直接開くことができます。（通常のプレビューです）

b) 携帯電話に QQ ブラウザがインストールされていないが、他のブラウザがインストールされている場合は、QQ ブラウザをダウンロードするか、他のブラウザで開くように求めるボックスが表示されます。（これも通常のプレビューダウンロードです）

c) 携帯電話には QQ ブラウザはありませんが、他のブラウザはあります。PDF ファイルをクリックすると、読み込みバーが表示されますが、その後プレビューやプロンプトは表示されません。 (これは異常であり、WeChat によって禁止されています) a タグにダウンロード属性を追加すると、効果 b) が発生する可能性があります。

<a href='pdf または画像パス' target='_blank' rel="noreferrer" ダウンロード>
  PDF または画像名</a>

また、PDFを直接プレビューする必要がある場合は、 react-pdf-js プラグインを使用できます。欠点は、PDFファイルが少し大きい場合、読み込みと表示が非常に遅くなることです。そのため、上記の方法をお勧めします。

2. antd-mobile の長いリストの listView を使用して長いリストを読み込みます。 (モバイルデバイス上の長いリストに対する代替ソリューションを提供します)

3. プロジェクト開始当初、実行した途端に babel プラグインが不足しているというさまざまな問題が報告されました。原因を突き止めるのに 2 時間以上かかりました。webpack 設定ファイルでは、plugins にさらに 2 つのプラグインが設定されていましたが、この 2 つのプラグインはプロジェクトにインストールされておらず、必要ありませんでした。そのため、設定から削除して再度実行したところ、エラーは発生しませんでした。

4. Echartsは地図と棒グラフを描画します

a) 中国の地図を描く

v5 以降では、マップアウトラインデータは提供されません。バージョン v4.9.0 を使用する利点は、マップアウトラインデータがあり、マップ上の州名も中央揃えになることです。マップ上のフローティングレイヤーはツールチップで設定します。特に位置を追加する必要はありません。デフォルトの表示位置は柔軟です。

b) 縦棒グラフを描く

v4 バージョンには並べ替え API がありません。縦棒グラフのデータを並べ替える必要がある場合は、バックエンドの同僚と通信して、データを並べ替えて返すように依頼してください。誤解が生じた場合は、ここでソート関数を記述して対処できます。

5. useRef を使用して値をバインドし、DOM に直接バインドできる操作を実行します。

バックエンドシステムを書く場合、通常はUIコンポーネントを直接導入します。しかし、モバイル側のUIには要件があり、UIライブラリにコンポーネントを導入してスタイルを変更するのも面倒です。入力タグを例に挙げます。

UI ライブラリの Input コンポーネントは双方向バインディングを簡単に実現できますが、独自のスタイルを持っているため、入力ボックスのスタイルをデザイナーが描画したものと同じに保つのは困難です。

ネイティブ HTML タグ - 入力。スタイルをカスタマイズできますが、双方向バインディングはありません。たとえば、ログインページでは、アカウントのパスワードを入力する必要があります。js を使用してアカウントのパスワードを取得できますが、自分で多くのコードを記述する必要があります。現時点では、useRef の方が適しています。useState や useEffect と同様に、これは react のフック関数です。次のように使用します。

import { useState,useRef } from 'react'; //はじめに
const inputRef = useRef<any>(); //const [phone, setPhone] = useState(""); を定義します。

エクスポートデフォルトconstLogin=（）=> {
  定数changePhone = () => {
    setPhone(inputRef?.current?.value)
  }
    戻る （
       /*入力タグにバインド*/
       <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='電話番号を入力してください' />
        ）
}