WeChat ミニプログラムの面接の質問の概要

HTML
CSS記事
JS記事
Vue篇
TypeScript篇
反応する
フロントエンドのインタビューの質問の概要 (非常に詳細な回答、HTML、JS、CSS の概要を含む) -- 継続的な更新
フロントエンドのインタビューの質問の概要 II (非常に詳細な回答、Vue、TypeScript、React、Webpack の概要を含む) -- 継続的な更新
WeChat ミニプログラムの面接の質問の概要

1. WXML と標準 HTML の類似点と相違点について話してください。

(1) WXML はアプレットのフレームワークによって設計された一連のラベル言語であり、アプレットページの構造を構築するために使用され、その機能は Web 開発における HTML に似ています。

①はページの構造を記述するために使用されます。

②どちらもラベルや属性などで構成されます。

③ ラベル名が異なり、アプレットラベルが減り、シングルラベルが増えています。

④ アプレットには、wx:if などの属性や { {}} などの式が追加されています。

⑤ WXML は WeChat アプレット開発者ツールでのみプレビューできますが、HTML はブラウザでプレビューできます

⑥ コンポーネントのパッケージ化が異なります。WXML はコンポーネントを再パッケージ化します

⑦ アプレットは JS Core で動作します。DOM ツリーとウィンドウオブジェクトは存在せず、アプレット内でウィンドウオブジェクトとドキュメントオブジェクトを使用することはできません。

2. WXSS と CSS の類似点と相違点について話してください。

(1) rpx サイズ単位が追加され、rem などの CSS でピクセル単位の変換を手動で実行する必要があります

(2) WXSS は新しいサイズ rpx をサポートし、アプレットは異なるサイズの画面上でそれを自動的に変換します。

(3) グローバルスタイルとローカルスタイルを提供します。プロジェクトのルートディレクトリにある app.wxss はすべてのアプレットページに作用し、ローカルページの .wxss スタイルは現在のページにのみ有効です。

(4) WXSS は一部の CSS セレクターのみをサポートします。

①クラスセレクター、IDセレクター

②要素セレクター

③和集合セレクター、子孫セレクター

④::after、::beforeなどの疑似クラスセレクター

3. WeChat ミニプログラムのメインディレクトリとファイルの役割について話してください。

(1) project.config.json: プロジェクト構成ファイル。最も使用されるのは、https 検証を有効にするかどうかを構成することです。

(2) App.js: いくつかのグローバル基本データなど、ページのスクリプトファイル、ページのデータの保存、イベント処理関数などを設定します。

(3) App.json: 現在のページの設定ファイル、設定ウィンドウの外観やパフォーマンスなど、ページ内の設定項目は app.json を上書きします。

(4) App.wxss: パブリックスタイル、インポートアイコンフォントなど。

(5) ページ: 特定のページが 1 つずつ含まれています。

(6)index.json：（現在のページのタイトルを設定し、コンポーネントなどをインポートします）;

(7)index.wxml: ページのテンプレート構造ファイル。

(8) .wxss ファイル: 現在のページのスタイルシートファイル。

(9)index.js：（ページロジック、リクエスト、データ処理など）

4. アプレットと Vue の双方向バインディングの類似点と相違点について話してください。

(1) ミニプログラムの双方向バインド: まず、bininput を通じてテキストボックスの入力イベントをバインドします。

① データ内で変数内容を宣言し、テキストボックスの値に動的にバインドする

②bininputイベントでは、イベントパラメータe.detail.valueによりテキストボックス内の最新の値を取得できます。

③ this.setDataを通じて動的にバインドされた値の内容にテキストボックスの最新の値を代入し、データの双方向バインディングを実現します

(2) Vue 双方向バインディング: 最初に @input をテキストボックスにバインドして、テキストボックスの入力イベントをリッスンします。

① data で定義された変数を値とする value 属性をテキストボックスに動的にバインドします。

② @inputでバインドされたイベントでは、入力ボックスの最新の値をイベントパラメータevent.target.valueを通じて取得できます。

③ 取得した値を動的にバインドされた変数に代入する

(3) 一般に、違いは大きくなく、バインディングイベントが異なり、値を取得する具体的な方法が異なります。アプレット内のデータにデータを設定するには、 this.setData メソッドを呼び出す必要があります
。設定

5. WeChat ミニプログラムの関連ファイルの種類を簡単に説明します。

(1) WXML (weixin Markup Language) は、フレームワークによって設計されたマークアップ言語のセットであり、基本コンポーネントとイベントシステムを組み合わせて、ページの構造を構築できます。コンテンツは主に、WeChat 自体によって定義されたコンポーネントのセットです。

(2) WXSS (WeiXin Style Sheets) は、主に WXML コンポーネントのスタイルを記述するために使用されるスタイル言語です。

(3) JSロジック処理、ネットワークリクエスト

(4) jsonアプレット設定、静的設定

(5) app.json にはこのファイルが必要です。このファイルは、WeChat アプレットのグローバルな構成、ページファイルのパス、ウィンドウのパフォーマンスの決定、ネットワークタイムアウト時間の設定、および少なくとも 2 つの tabBar の設定に使用されます。

6. WeChat アプレットの値の受け渡し (データ転送) メソッドは何ですか?

(1) グローバル変数を使用してデータを渡す

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-sz0bA7rH-1685933800252)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps1.jpg)]$

(2) ローカルストレージのデータ転送を利用する

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-nuOfAZKQ-1685933800254)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps2.jpg)]$

(3) ルーティングを使用してデータを渡す

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-w0Je0oG7-1685933800254)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps3.jpg)]$

7. Bindtap と catchtap の違いは何ですか?

(1) Bindtap と catchtap は両方とも、イベントをコンポーネントにバインドするクリックイベント関数に属しており、コンポーネントがクリックされた後に関数をトリガーできます。

bindingtap : 子要素が bindingtap を使用してイベントをバインドした後、実行時に親要素にバインドされます (親要素にバインドされた bingtap イベントをトリガーします)。

catchtap : 親要素にバブリングしないため、イベントのバブリングが防止されます。

8. wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack()、wx.reLaunch()の違いは何ですか?

(1) wx.navigateTo(Object): 現在のページを保持し、アプリケーション内のページにジャンプします。ただしタブバーページにはジャンプできません。元のページに戻るには、wx.navigateBackを使用します。アプレット内のページスタックには最大 10 個のレイヤーを含めることができます

(2) Wx.navigateBack(): 現在のページを閉じて、前のページまたは複数レベルのページに戻ります。現在のページスタックはgetCurrentPagesを通じて取得して、返す必要があるレイヤーの数を決定できます。

(3) wx.redirectTo(): 現在のページを閉じて、アプリケーション内のページにジャンプします。ただし、タブバーページへのジャンプは許可されていません

(4) wx.switchTab(): tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます。

(5) wx.reLaunch(): すべてのページを閉じて、アプリケーション内のページを開きます

9. WeChat ミニプログラムと h5 の違いは何ですか?

(1) 開発の観点から: H5 とアプレットの開発ツールは大きく異なり、アプレットはすべて WeChat クライアントに依存しているため、相対的に言えば、H5 ほど多くの開発ツールはなく、標準の H5 とは異なります。また、独自のネイティブアプリコンポーネントも多数備えているため、コンポーネントのパッケージ化の点でも H5 とは異なります。

(2) 動作環境から：Web 開発者は、PC 側では IE、Chrome、QQ ブラウザなど、モバイル側では Safari、Chrome、iOS、Android の各種 WebView など、さまざまなブラウザに対応する必要があります。システム。小規模プログラムを開発する過程で直面する必要があるのは、iOS と Android という 2 つの主要なオペレーティングシステムの WeChat クライアントと、開発を支援するために使用される小規模プログラム開発ツールです。違う。

(3) サーバー構成: アプレットのパフォーマンスが H5 よりも高くなるため、サーバー構成要件に関しては、アプレットの要件が H5 よりも高くなりますシステム権限: WeChat がより多くのシステム権限を取得できるため、ネットワーク通信ステータス、データキャッシュ機能など、これらのシステムレベルの権限は WeChat アプレットとシームレスに接続できます。これは、WeChat アプレットがネイティブアプリ (ネイティブ APP) のスムーズなパフォーマンスを実現できるという公式の主張です。ただし、H5 Web アプリケーションはシステム自体の権限へのアクセスが比較的少なく、H5 Web アプリケーションがしばしば批判されるのはこのためです。したがって、H5 のほとんどのアプリケーションは、単純なビジネスロジックと単一機能の範囲に限定されます。

(4) タグ名：HTMLを書くときによく使うタグはdiv、p、span、アプレットのWXMLタグはview、button、textなどです。これらのタグは開発者向けにパッケージ化された基本的なアプレットです。能力。アプレットには、wx:if などの属性や { { }} などの式がさらにあります。Web ページの一般的な開発プロセスでは、通常、JS を介して DOM (HTML 記述によって生成されたツリーに対応) を操作して、インターフェースに何らかの変更を加えます。 . ユーザーの行動に応じて変化します。

10. アプレットと Vue の違いは何ですか?

(1) イベント定義の違い: Vue は @ を使用してイベントをバインドしますが、アプレットはバインドを使用します

(2) イベント関数のパス値: Vue のパス値は関数括弧内に直接記述されます。WeChat アプレットのパス値は data-custom name={ {{ 渡される値}}を使用する必要があります。

(3) キーワード参照: vue の属性名の前に「:」または v-bind を追加し、WeChat アプレットの属性値に「{ {}}」を追加して終了するだけです。

(4) 命令の使用方法: vue では v- を使用、アプレットでは wx: を使用

11. Rpx についての理解:

(1) Rpx は WeChat アプレットの応答単位です

(2) rpx は、WeChat アプレットが画面適応を解決するための固有のサイズ単位です。

(3) 画面幅に合わせて調整可能画面サイズに関わらず指定画面幅は750rpx、ページ幅が750pxの場合は1rpx = 1pxとなります。

12. WeChat アプレットは DOM 操作を実行できますか?

(1) WeChat アプレットのレンダリング層とロジック層は独立しているため、WeChat アプレットは要素を取得するための document.querySelect をサポートしていませんが、要素を取得するための 2 つの組み込みメソッドがあります。

① wx.createSelectorQuery() で dom 要素を取得
ここに画像の説明を挿入

13. ミニプログラムと Vue の違いは何ですか?

(1) ライフサイクルは異なりますが、WeChat アプレットのライフサイクルは比較的単純です

(2) データバインディングも異なります。Wechat アプレットのデータバインディングには { {}} を使用する必要がありますが、vue を直接使用する必要があります。

(3) 要素の表示・非表示 vue では v-if と v-show で要素の表示・非表示を制御アプレットでは wx-if と hidden で要素の表示・非表示を制御

(4) イベント処理が異なります。小規模なプログラムでは、bindtap(bind+event) または catchtap(catch+event) を使用してイベントをバインドし、vue: v-on:event を使用してイベントをバインドするか、@event を使用してイベントをバインドします。

(5) データの双方向バインディングも異なり、vue では form 要素に v-model を追加し、対応する値を data にバインドするだけで済み、form 要素の内容が変更されると、対応する値がバインドされます。データの値の値もそれに応じて変化します。これは vue の非常に優れた点です。WeChat アプレットは、フォーム要素を取得し、値を変更し、その値を data で宣言された変数に割り当てる必要があります。

14. ミニプログラムのカスタムタブバーについて理解していますか?

(1) まず App.json でタブバーを構成し、カスタムカスタムタブバーを有効にし、構成後にカスタムタブバーファイルを作成します。このとき、ファイルの内容はアプレットの下部に生成され、構造コードを追加しますtabBarのindex.wxmlへのデータ設定とイベントメソッドのindex.jsへの追加

15. WeChat アプレットのキャッシュを設定するにはどうすればよいですか?

(1) wx.getStorage/wx.getStorageSync はローカルキャッシュを読み取り、wx.setStorage/wx.setStorageSync を通じてキャッシュにデータを書き込みます。ここで、Sync サフィックスが付いたインターフェイスは同期インターフェイスを示します。

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-UjVVNhG7-1685933800255)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps6.jpg)]$

16. WeChat ミニプログラムはどのようにネットワークリクエストを行うのですか?

(1) wx.request(Object object) はネットワークリクエストの送信に使用されます。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-6vERk9ZA-1685933800256)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps7.jpg)]$
ここに画像の説明を挿入

17. ミニプログラムのライフサイクルは 3 つの部分に分かれています

(1) アプリケーションレベル:

① onLaunch: ミニプログラムの初期化時にトリガーされ、グローバルに 1 回だけトリガーされます。

② onShow: アプレットの起動時または最前面表示への切り替え時にトリガーされます。

③ onHide: アプレットがフォアグラウンドからバックグラウンドに入ったときにトリガーされます (他のアプリへの切り替えなど)

④ onError: アプレット内でスクリプトエラーが発生した場合、または API 呼び出しでエラーが報告された場合にトリガーされます。

(2) ページレベル:

① onLoad: ページの読み込み時に一度だけ実行されます。

②onShow：ページ表示時に実行、複数回実行

③ onReady: ページの初回レンダリング時に 1 回だけ実行されます。

④ onHide: ページが前景から背景に入ったときに実行されます。

⑤ onUnload: ページのアンロード時に実行されます。

(3) コンポーネントレベル:

①作成済み (重要): コンポーネントインスタンスが作成された直後にトリガーされます。

②アタッチ (重要): コンポーネントが完全に初期化され、ページノードツリーに入った後にトリガーされます。

③ready：ビューレイヤーのコンポーネントの配置が完了した後に実行されます。

④moved: コンポーネントインスタンスがノードツリー内の別の場所に移動されたときに実行されます。

⑤デタッチ (重要): コンポーネントがページノードツリーから離れた後にトリガーされます。

⑥ エラー: コンポーネントメソッドがエラーをスローするたびに実行されます。

18. WeChat ミニプログラムをモジュール化するにはどうすればよいですか?

(1) 一部の共通コードは、モジュールとして別の js ファイルに抽出できます。モジュールは module.exports またはエクスポートを通じてのみインターフェイスを公開できます

(2) これらのモジュールを使用する必要があるファイルで、require を使用して共通のコードを導入します。

19. WeChat のすべての API といくつかの簡単な紹介はどこにありますか

(1) アプレットのグローバルオブジェクトは次のとおりです: wx、すべての API は wx オブジェクトに格納されます

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-mRW0ErKF-1685933800257)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps9.jpg)]$

20. WeChat ミニプログラムのアプリケーションとページのライフサイクルがトリガーされる順序は何ですか?

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-SetOuL28-1685933800257)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps10.jpg)]$

21. WeChat Mini プログラムのカスタムコンポーネントの使用

(1) コンポーネントフォルダーの作成

(2) コンポーネントファイル(タブなど)を作成し、コンポーネント形式で新規コンポーネントを作成します

(3) タブのjsonファイルにcomponent: trueを設定

(4) インポートするコンポーネントページのjsonファイルに、usingComponent、コンポーネント名:パスにキーと値のペアを記述します。

(5) 必要なページにタグを記述する

注: WXML ノードラベル名には、小文字、ダッシュ、アンダースコアの組み合わせのみを使用できます。

22. WeChat アプレットイベントチャネルの使用法

WeChat ミニプログラムイベントチャネル (イベントバス) は、イベントをトリガーすることによって、ミニプログラムの複数のページまたはコンポーネント間で通信するためのメカニズムです。wx.navigateTo メソッドまたは wx.redirectTo メソッドを通じてターゲットのページまたはコンポーネントにジャンプする場合、 events パラメータを渡してイベントチャネルオブジェクトに割り当てます。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-LWAz2h0q-1685933800257)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps11.jpg)]$

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-VzfZh1kT-1685933800258)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps12.jpg)]$

23. アプレット用の vant コンポーネントライブラリの使用方法

Web ページのスクリプト言語として js を使用して小さなプログラムが作成されており、package.json ファイルがない場合、npm コマンドは使用できません。

まず、npm init を通じて npm を初期化し、package.json ファイルを生成します。

vantweapp 公式 Web サイト npm からコンポーネントライブラリをダウンロードします。

WeChat アプレットのツールを使用して npm を構築する

app.json の "style": "v2" を削除して、アプレットのスタイルが vant よりも高いことによって引き起こされるスタイルの混乱を回避します。

app.json のコンポーネントを使用してコンポーネントを登録する

24. WeChat アプレットの親子転送

父传子: 親コンポーネントのタグを通じて属性をバインドし、子コンポーネントはプロパティで属性を受け取ります

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-SGnddbyV-1685933800258)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps13.jpg)]$

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-pWFBQ4kf-1685933800258)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps14.jpg)]$

子传父: 親コンポーネントのバインドカスタムイベントを通じて、独自の関数をバインドし、子コンポーネントはトリガー関数で this.triggerEvent('親コンポーネントバインドイベント名'、パラメータを渡します) を親コンポーネントバインド関数に渡します。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-ETaDRfy0-1685933800259)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps15.jpg)]$

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-JdwsmEfU-1685933800259)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps16.jpg)]$

$[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-ktuN3Bwn-1685933800259)(file:///C:\Users\lenovo\ AppData\Local\Temp\ksohtml14876 \wps17.jpg)]$

25. ミニプログラム認証ログイン

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-baqj9O2a-1685933800260)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps18.jpg)]$

26. ウェブビュー

web-view は、Web ページをホストするために使用できる Web ブラウザコンポーネントであり、ページ全体を自動的に埋めます。

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-VbtijeOG-1685933800260)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps19.jpg)]$

$[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-kPrz1aPz-1685933800260)(file:///C:\Users\lenovo\AppData) \Local\Temp\ksohtml14876 \wps20.jpg)]$

ここに画像の説明を挿入