2日間で独自のWeChatアプレットを素早く開発してみませんか?

なぜミニプログラム開発を学ぶ必要があるのでしょうか?開発のために何を準備すればよいですか?ミニプログラムの開発は難しいですか？ ！

フロントエンド、サーバー、データベースを含む、必要なミニプログラムとパブリックアカウントプロジェクトの完全なセットがここにあります

エフェクト画像をいくつか添付します。コードはコードクラウドにアップロードされています。気に入ったら、スターを付けたり、報酬を与えたり、いいねしたり、コインを投げたり、バナナを投げたりできます〜

コードアドレス: https://github.crmeb.net/u/demo

1つ。前面に書かれた

1. なぜミニプログラム開発を学ぶ必要があるのですか?

フロントエンド開発において、WeChat ミニプログラムは、そのシンプルさ、スピード、開発コストの低さ、そして膨大なユーザートラフィックにより、フロントエンド開発エンジニアにとって必須のスキルとなっています。

2. 開発準備：

(1) Vueアプレットを学ぶ必要すらない、と冗談を言う人もいます。

WeChat ミニプログラムは Tencent 自身によって開発されていますが、基本的な考え方は Vue や他のフレームワークと同じです。

（２）精巧な小さなコンポーネントを集めるのが得意：「私たちはコードを作るのではなく、コードポーターに過ぎません。」必要なコンポーネントを見つけ、それを巧みにエレガントに組み立てて大きなプロジェクトにするのが得意であることも、プログラマーの基本的なスキルです。

必要なミニプログラムのデモを見つけるにはどうすればよいでしょうか? 記事の最後で、ミニプログラムのリソースをお勧めします。素晴らしい人々によるプロジェクトがたくさんあります。

さっそく、本題に入りましょう。

1. ミニプログラムアカウントを登録し、IDEをダウンロードする

1. 公式サイト https://mp.weixin.qq.com/ に登録し、IDE をダウンロードします。

2. 公式文書は常に最高の学習教材です。

知らせ：

（1）アカウントを登録すると、新しいプロジェクトを作成するときに入力する必要があるappidが付与されます。そうしないと、プレビュー、コードのアップロードなど、多くの機能が使用できなくなります。

（2）WeChat公式アカウントを登録している場合、WeChat公式アカウントとミニプログラムは2つのアカウントであり、それぞれのappIDも異なることに注意してください。ミニプログラムの開発では、ミニプログラムのappIDを使用する必要があります。

画像の説明

2. ミニプログラムフレームワークとその動作メカニズムの紹介

1. 「通常のクイック スタート テンプレート」を作成しました。プロジェクト ディレクトリ全体は次のようになります。

画像の説明

2.app.js

コメントされているように、プロジェクト全体のスタートアップ ファイルには、データの保存と取得のためのブラウザー キャッシュ、ログイン成功時のコールバック、ユーザー情報の取得という 3 つの主要な機能があります。

globalData は、プロジェクト全体を定義するグローバル変数または定数です。

画像の説明

3.app.json

登録ページ、構成タブ ページ、プロジェクト全体のスタイルの設定、ページ タイトルなど、プロジェクト全体の構成ファイル。

！注: ミニプログラムが起動されたときのデフォルトの最初のページは、app.json のページの最初のページです。

4.ページ

ミニプログラムのページ コンポーネントには、ページの数と同じ数のサブフォルダーが含まれます。たとえば、クイックスタートテンプレートには、インデックスとログの2つのページがあります。

5. インデックスディレクトリを開く

3 つのファイルがあり、実際には Web 用に開発したファイルと 1 対 1 で対応していることがわかります。

index.wxml は index.html に対応します。

index.wxss は index.css に対応します。

index.js は js ファイルです。

一般的には、ページタイトルなどの機能を設定するために、ページコンポーネントの設定ファイルとして各ページコンポーネントに .json ファイルも追加します。

6. index.jsファイルをダブルクリックします

（１）var app = getApp();

プロジェクト全体の app.js ファイルをインポートして、その期間のパブリック変数やその他の情報を取得します。

util.js ツール ライブラリのメソッドを使用する場合は、util.js の module.exports でエクスポートし、必要なページで要求します。

（2）例えば、特定の局から映画を取得したい場合、そのAPIを呼び出す必要があります。まずapp.jsのgloabDataにdoubanBaseを定義します。

次に、index.js の app.globaData.doubanBase を使用してこの値を取得します。

もちろん、ページで必要な場合はこれらの定数にハードコードされた値を使用することもできますが、プロジェクト全体のメンテナンスのために、このような共通パラメータは構成ファイルに書き込むことをお勧めします。

画像の説明

（３）次に、ページ全体（{}）で、ページコンポーネントの内部データである最初のデータが、vueやreactと同様に、ページのwxmlファイルにレンダリングされます。

setData を通じてデータを変更し、ページのレンダリングを実行します。

（４）ライフサイクル機能

たとえば、onload()、onready()、onshow()、onhide() などは、ページの読み込み、ページの初期レンダリング、ページの表示、ページの非表示などを監視します。

詳細については、公式ウェブサイトのAPIをご確認ください。最もよく使用されるメソッドは onload() と onShareAppMessage() (ページで共有される情報を設定する) です。

7. wxml テンプレートの使用。

たとえば、このプロジェクトの映画ページでは、最小の星評価コンポーネント wxml をテンプレートとして使用し、星から映画、映画リストまで、一度に 1 レベルずつネストされています。

star-template.wxmlページにname属性を記述し、インポート時に名前で取得します。

8. よく使われるwxmlタグ

ビュー、テキスト、アイコン、スワイパー、ブロック、スクロールビューなど。これらのタグについては、公式ウェブサイトのドキュメントを直接確認できます。

3. ミニプログラムのフレームワーク、ページ、起動時の注意

1. フレームワーク全体における留意点

（1）wxmlページ全体では、最下位タグは<page></page>です。

(2) 各ページの上部にあるナビゲーションバーの色、タイトルはこのページのjsonで設定されます。設定されていない場合は、app.jsonの全体の設定が使用されます。

（3）jsonではコメントを書くことはできません。書くとエラーが報告されます。

（4）ルーティング関連

画像の説明

1) wx.SwitchTab を使用してタブ ページにジャンプする場合、app.json にページを登録するだけでなく、tabBar にもタブ ページを登録して有効にする必要があります。

注: タブは最大 5 つあります。つまり、上部または下部に最大 5 つのメニューがあることになります。他のページは、他のルーティング方法でのみ開くことができます。

2)navigateTo は、ウェルカムページ、映画の詳細ページ、都市選択ページなどのタブ以外のページにジャンプするためのものです。app.json に登録した後、tabBar に登録することはできません。登録しないとジャンプしません。

3) 再起動するとジャンプします。新しく開いたページの左上隅に戻るボタンはありません。このプロジェクトでは、都市を切り替えるときに一度だけこのボタンを使用しました。

（５）ページ間でパラメータを渡す

パラメータはリダイレクトされた URL に書き込まれ、他のページは onload メソッドのパラメータ オプションでそれを受け取ります。次のようにパスしてIDを取得します

（６）データから始まるカスタム属性の使用

例えば、wxmlではどのように記述するのでしょうか

クリック イベント オブジェクトは次のように取得できます: var postId = event.currentTarget.dataset.postid;

注: 大文字は小文字に変換され、_ 記号の付いた文字はキャメルケースに変換されます。

(7) イベントオブジェクトevent、event.target、event.currentTargetの違い:

target は現在クリックされているコンポーネントを参照し、currentTarget はイベントがキャプチャされたコンポーネントを参照します。

たとえば、カルーセル コンポーネントでは、画像がクリックされたかどうかを監視できるように、クリック イベントをスワイパーにバインドする必要があります。

このとき、targetはimageを参照します（imageがクリックされているため）、currentTargetはswiperを参照します（clickイベントがswiperにバインドされているため）

（８）空きネットワークインターフェースを使用する：

このプロジェクトでは、Hefeng Weather API、Tencent Map API、Baidu Map API、Douban Movie API、Aggregate Headline News API などを使用します。具体的な使用方法については、各公式 Web サイトの非常に詳細なインターフェース ドキュメントを参照してください。

注意: 無料のインターフェースにはアクセス制限があるため、このインターフェースを他の人のコンポーネントで使用する場合は、新しいキーを登録して置き換えることをお勧めします。

無料のインターフェースコレクションを添付します:

https://github.com/jokermonn/…

8) wxss には落とし穴があります。ローカル リソースを読み取ることができないため、たとえば、背景画像がローカルで使用されるとエラーが報告されます。

ローカル写真をオンライン写真に変換するには、個人の Web サイトにアップロードしたり、QQ スペース アルバムにアップロードしたりするなど、いくつかの方法があります。

2. 都市ページに切り替えます。

(1)ホームページはnavigateToを使って都市切り替えページにジャンプします。ホームページは閉じられていないので、都市を切り替えて戻っても天気情報は古いままです。

正しい処理ロジックは次のとおりです。

1) reLaunch を使用して都市切り替えページに移動します。これにより、すべてのページが閉じられ、新しいページが開きます。

2) 都市ページを切り替え、パブリック変数内の都市情報を手動で切り替えた都市エリアに更新し、スイッチタブでホームページに戻り、ホームページの再読み込みをトリガーします。

3) ホームページで都市情報を取得する際に、判断を追加します。グローバル情報が利用できない場合は、位置情報を使用します。グローバル情報が利用できる場合（先ほど設定した情報など）は、グローバル情報を使用します。

（２）都市リストの先頭までスクロールして戻る

スクロールビューコンポーネントのスクロールトッププロパティに基づいて、初期値は0で、スクロールが増加します。一番上に戻るには、一番上をクリックして0に設定します。

3. マップサービスページ

（1）百度地図のさまざまなサービスに電話をかけて、ホテル、食事、生活サービスに関する情報を問い合わせます。詳細については、百度地図のドキュメントを参照してください。

（２）クリックすると、クリックしたアイコンに境界線を追加します。ビューはデータによって駆動されるため、長さ3の配列を使用して、3つのアイコンが現在クリックされているかどうかの状態を保存します。

次に、wxml はデータに基づいてクラスと境界線スタイルを動的に追加します。

4. その他のページ

（１）現在、ミニプログラム内で外部リンクを開く機能は、企業が主催するミニプログラムにのみ開放されており、個人の開発者は依然として外部リンクを利用することができません。

（２）イースターエッグページ、ユーザー情報取得

wx.setStorageSync('userInfos', userInfos); を使用すると、アプレットにログインしたユーザーの個人情報を取得できます。この情報はバックエンドに送信され、データベースに保存されるため、ユーザーを簡単に分析できます。

私はそれをブラウザのキャッシュに保存します。最大キャッシュは 10 MB である必要があります。ユーザーがアプレット リストからこのアプレットを削除すると、キャッシュはクリアされます。

5. リリース通知

（1）ミニプログラムの新しいバージョンでは、リリース制限が2Mです。通常、画像が最も多くのスペースを占めるので、インターネットから画像を使用するようにしてください。

ローカル画像をオンライン画像に変換する具体的な方法については上記で説明しました。

（2）開発者ツールでのプレビューテストに問題がなければ、「アップロード」をクリックします。ミニプログラムのWebバージョンでは、個人センターの左側にある「開発管理」メニューをクリックすると、3番目のセクション-開発バージョンにコンテンツが表示されます。

（3）「送信」をクリックし、ミニプログラムの関連情報を入力して、審査のために送信します。

注意: 審査を早く通過できるように、分類を正確に記入することをお勧めします。私の小さなプログラムは1日半で承認され、開始されました。

ここまで、2日間の開発で落とし穴や注意点をすべて見てきました。まだまだ落とし穴はあるとのことなので、より深く開発を進めてから検討していきたいと思います。