WeChatアプレットに小説閲覧アプレットを実装-ミニプログラム開発-php.cn

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

不言

リリース： 2018-06-26 17:20:47

オリジナル

22233 人が閲覧しました

この記事では主に 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. 最後に