kingdex
1.0.0
インスピレーションは、今年人気のモバイルゲーム「Honor of Kings」から来ています。時々、携帯電話を使用してオンラインでゲームデータを検索するのはあまり便利ではないため、「King of Kings Illustrated Book」の開発を思いつきました。 「アプレット。公式 Web サイトからデータをクロールし、ヒーロー、装備、碑文、その他の情報を WeChat アプレットに統合し、いつでもどこでもゲーム情報をクエリできます。
WeChat で以下のミニ プログラム コードをスキャンして、すぐに体験してください。
まず、 Forkクリックするか、右上隅にある緑色のボタンClone or downloadをクリックしてソース コードをダウンロードし、デバッグと開発には WeChat 開発者ツールを使用します。 WeChatはミニプログラムの開発ドキュメントも提供しており、ミニプログラムの登録、開発ツール、開発とデバッグからリリースまでの完全なソリューションを提供し、Appleと同様の独自のエコシステムを構築しています。
プロジェクトは全9ページで、リスト表示、ヒーロー詳細、装備分類、刻印条件フィルタリングなどの機能がバックグラウンドでleancloudのストレージサービスを利用しているため、ミニプログラムのajax APIは使用しておりません。リーンクラウドが導入されました。この SDK は、 utilsフォルダーに配置されているleancloud.config.jsという名前のファイルに依存する必要があります。leancloud などのサードパーティ サービスは通常柔軟に料金が支払われ、王様の図鑑は WeChat で正式にリリースされたため、プッシュしました。コードleancloud.config.jsは無視されました。ご理解ください。
leancloud.config.js 、leancloud アプリケーションの AppID と AppKey 情報が含まれています。
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
}プロジェクトを使用する前に、独自の leancloud アプリケーションを作成し、以前に作成した王者荣耀官网爬虫を構築してデータを取得する必要があります。どちらもleancloud.config.jsファイルが必要です。
WeChat ミニ プログラムの開発について簡単に話しましょう。しばらくインターネット上で話題になっていましたが、時間をかけて開発ドキュメントを確認してみました。これは Vue.js ではないでしょうか。 ！以下の例を見てください。
ミニプログラム：
Page ( {
data : {
list : [ ]
} ,
onload : function ( ) {
this . setData ( {
list : [ 1 , 2 , 3 ]
} )
}
} ) < view wx:for =" {{ list }} " > {{ item }} </ view >Vue.js:
new Vue ( {
data : {
list : [ ]
} ,
mounted : function ( ) {
this . list = [ 1 , 2 , 3 ]
}
} ) < view v-for =" item in list " > {{ item }} </ view >API は似ていますが、明らかな違いがあります。
wx:for="item in list"エラーが報告されます。アプレットには 2 つのスレッドがあり、View (ビュー) と AppService (ロジック) という 2 つの独立したモジュールに対応します。 View はテンプレートとスタイルのレンダリングに使用され、AppService はビジネス ロジック、データ リクエスト、API 呼び出しなどの処理に使用されます。興味のある学生は、「WeChat ミニ プログラム アーキテクチャの分析」を参照してください。また、ミニオンフードデリバリーチームのミニ番組記事も充実しています。
「王様の図鑑」といえば、これは私にとって初めての小さなプログラムで、経験豊富なフロントエンドユーザーであれば、公式ドキュメントに従えば1日で始めることができます。コーディングに比べて、レイアウト、カラーマッチング、インタラクションなど、プロダクト全体のプロトタイプのUIデザインを完成させるのは大変で、10日以上かけて多くのプロダクトを参照し、デザインをより深く理解しました。最終結果はまだ満足しています。
このプロジェクトのオープンソース コードは学習の参考のみを目的としており、商用利用は禁止されています。
GPL
