Simple example development of WeChat applet reader-Mini Program Development-php.cn

Simple example development of WeChat applet reader

高洛峰

Release： 2017-03-10 15:55:15

Original

2499 people have browsed it

This article mainly introduces relevant information on the development of simple examples of WeChat mini program readers. Friends who need it can refer to it

Today I was chatting with my friends about mini programs, and then I read a book, and then we will I made a small reading demo and share it now.

First, let’s look at the picture above:

Simple example development of WeChat applet reader

## Second, the following is the detailed description

First let’s talk about the tabBar below. The project uses data configuration in json format. I have to say that this is a trend now, and the configuration of .net core is also this way (revealing that I am in the .net camp) .

Many students here will find that many color configurations do not work. Yes, the available colors are limited now. You can check the official documents for details. How many tabBars are needed, just write them in the list. This article asked for three, so you saw three. The iconPath above is the icon of the tabBar. This size is also limited, 40kb. Then, pagePath is the page link corresponding to this tabBar. Text is to limit the content, so I won’t go into details here.

    "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": "最新"
  }]
 },

Copy after login

Open the project code directory, as follows:

Simple example development of WeChat applet reader

Here you will find all the styles, wxml and js files They have the same name. This is the default way of writing, so that the three files are associated by default. This is also called: default is greater than configuration.

We open the homepage index page

Simple example development of WeChat applet reader

　You can see the page life cycle above, and we can write the events we want to handle in the events.

　　The getApp(); method obtains the global instance.

　We open the view page

Simple example development of WeChat applet reader

　　Here we see the wx pointed by the arrow: for="", this is a loop method to get out an array or list object, And item is the default (again the default) single list element. You can also give an alias whether you want to use item or not.

Navigator is the navigation tag. Here, it is similar to the tag in HTML, so I won’t talk about it here. Click on the content page of the navigator to jump to the corresponding page, and the data is also transferred using the URL.

Simple example development of WeChat applet reader

We can see the background code:

Simple example development of WeChat applet reader

Data can be passed through the url, and the target page is passed through the onLoad method The parameter (object) is obtained. You can also see here that the details of the book are to obtain the global instance and data through global getApp. This data is in the global app.js, as shown below:

Simple example development of WeChat applet reader

　　Specific code:

//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;
        }
 
        
})

Copy after login

Then about page

Simple example development of WeChat applet reader

The above is the detailed content of Simple example development of WeChat applet reader. For more information, please follow other related articles on the PHP Chinese website!