WeChatアプレットに小説閲覧アプレットを実装

この記事では主に WeChat アプレット読み取りアプレットのサンプル (デモ) を紹介します。内容は非常に優れているので、参考として共有します。

今日、私は友達と小さなプログラムについて話し、それから本を読みました。そして、小さな読書のデモを作りました。今からそれを共有します。

まず、上の写真を見てみましょう:

次に、以下は詳細な説明です

まず、このプロジェクトでは、以下のjson形式のデータ構成について説明します。今はこうなっていると言うのは、.netコアの構成もこうなっている傾向にあります（私が.net陣営にいることを明らかにしています）。

ここにいる多くの学生は、多くの色設定が機能しないことに気づくでしょう。はい、現在利用できる色は限られています。詳細については公式ドキュメントを確認してください。 tabBar がいくつ必要かは、リストに記入するだけです。この記事では 3 つ必要なので、3 つ表示されています。上の iconPath は tabBar のアイコンです。このサイズも 40kb に制限されています。そして、pagePathはこのtabBarに対応するページリンクになります。本文は内容を制限するためのものなので、ここでは詳しく説明しません。

 "tabBar": {

  "color": "#dddddd",

  "selectedColor": "#d92121",

  "borderStyle": "white",

  "backgroundColor": "#fff",

  "list": [{

   "pagePath": "pages/index",

   "iconPath": "images/main.png",

   "selectedIconPath": "images/main-s.png",

   "text": "主页"

  },{

   "pagePath": "pages/layout/hot",

   "iconPath": "images/hot.png",

   "selectedIconPath": "images/hot-s.png",

   "text": "最热"

  },{

   "pagePath": "pages/layout/new",

   "iconPath": "images/new.png",

   "selectedIconPath": "images/new-s.png",

   "text": "最新"

  }]

 },

次のようにプロジェクト コード ディレクトリを開きます。

ここで、style、wxml、および js ファイルがすべて同じ名前であることがわかります。つまり、3 つは同じ名前です。デフォルトのファイルが関連付けられています。これは、「デフォルトが設定よりも大きい」とも呼ばれます。

ホームページのインデックスページ

を開くと、上にページのライフサイクルが表示され、イベント内に処理したいイベントを書き込むことができます。

getApp() メソッドはグローバル インスタンスを取得します。

ビューページを開きます

ここで、矢印で示されたwxが表示されます: for=""、これは配列またはリストオブジェクトを取得するループメソッドであり、itemがデフォルトです(再びデフォルト)単一のリスト要素。アイテムを使用するかどうかにかかわらず、エイリアスを与えることもできます。

navigator は、HTML の タグに似ているため、ここでは説明しません。ナビゲーターのコンテンツページをクリックすると該当ページにジャンプし、データもURLを使用して転送されます。

舞台裏のコードを確認できます:

データは URL を通じて渡すことができ、ターゲット ページは onLoad メソッドのパラメーター (オブジェクト) を通じて取得されます。ここでも、本書の詳細がグローバル getApp を通じてグローバル インスタンスとデータを取得することであることがわかります。このデータは、以下に示すように、グローバル app.js にあります:

具体的なコード:

//app.js

App( {

  getBanner:function(){

    var bannerUrl=["../images/banner.jpg"];

    return bannerUrl;

  },

  getOneBook:function(id){

    var abook;

   var books = [

          {  id:"1",

            bookUrl:"../images/img1.jpg",

            bookName:"西方哲学史",

            bookInfor:"关于哲学"

          },

          {  

            id:"2",

            bookUrl:"../images/tmd.jpg",

            bookName:"塔木德",

            bookInfor:"关于信仰"            

          },

          {

            id:"3",

            bookUrl:"../images/holy.jpg",

            bookName:"圣经",

            bookInfor:"关于信仰" 

          },

          {

            id:"4",

            bookUrl:"../images/yuz.jpg",

            bookName:"果壳中的宇宙",

            bookInfor:"关于科学"

          },

          {

            id:"5",

            bookUrl:"../images/dream.jpg",

            bookName:"理想国",

            bookInfor:"关于哲学"

          },

          {

            id:"6",

            bookUrl:"../images/out.jpg",

            bookName:"失控",

            bookInfor:"关于经济"

          }

          ];

        for(i=0;i<books.length;i++){

          if(books[i].id == id){

            abook = books[i]; 

          }

        }

         return abook;

 },

  getBoookList:function(){

    var indexList = [

          {  id:"1",

            bookUrl:"../images/img1.jpg",

            bookName:"西方哲学史",

            bookInfor:"关于哲学"

          },

          {  

            id:"2",

            bookUrl:"../images/tmd.jpg",

            bookName:"塔木德",

            bookInfor:"关于信仰"            

          },

          {

            id:"3",

            bookUrl:"../images/holy.jpg",

            bookName:"圣经",

            bookInfor:"关于信仰" 

          },

          {

            id:"4",

            bookUrl:"../images/yuz.jpg",

            bookName:"果壳中的宇宙",

            bookInfor:"关于科学"

          },

          {

            id:"5",

            bookUrl:"../images/dream.jpg",

            bookName:"理想国",

            bookInfor:"关于哲学"

          },

          {

            id:"6",

            bookUrl:"../images/out.jpg",

            bookName:"失控",

            bookInfor:"关于经济"

          }

          ];

 

           return indexList;

        }
       
})

あまり多くはありませんが、興味がある場合は、ソース コードをダウンロードして表示できます。ソースコードのアドレスは以下です。

3. 最後に

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat ミニ プログラムの Xiaodouban Books の紹介

WeChat ミニ プログラムで独自のウィジェットを作成する

WeChat ミニ プログラムの WeChat Payment の手順について

以上がWeChatアプレットに小説閲覧アプレットを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。