Shulou(Shulou.com)05/31 Report--

This article mainly explains "how WeChat Mini Programs realizes the novel reading Mini Program", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how WeChat Mini Programs realizes the novel Reading Mini Program".

First, let's start with the picture above:

Second, then the following is a detailed description

First of all, let's talk about the following tabBar, the project uses the data configuration in json format, I have to say, now this is the trend, and the configuration of .net core is also in this way (exposing that I am in the. Net camp).

Here many students will find that a lot of color configuration does not work, yes, now the valid color is limited, the specific you can go to the official document to check. If you need a few tabBar, just write a few in list. In this article, there are three, so you read three. The iconPath above is the icon of tabBar, and this size is also limited, 40kb. Then, pagePath is the page link corresponding to this tabBar. Text is to restrict content, so I won't say much here.

"tabBar": {"color": "# dddddd", "selectedColor": "# d92121", "borderStyle": "white", "backgroundColor": "# fff", "list": [{"pagePath": "pages/index", "iconPath": "images/main.png", "selectedIconPath": "images/main-s.png", "text": "Home page"}, {"pagePath": "pages/layout/hot" "iconPath": "images/hot.png", "selectedIconPath": "images/hot-s.png", "text": "hottest"}, {"pagePath": "pages/layout/new", "iconPath": "images/new.png", "selectedIconPath": "images/new-s.png", "text": "latest"}]}

Open the project code directory as follows:

It is found that the style has the same name as the wxml and js files, which is written by default, so that the three files are associated by default. This is also called: the default is greater than the configuration.

Let's open the home page, index page.

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

Where the getApp (); method gets the global instance.

Let's open the view page.

Here you see the wx:for= "" pointed to by the arrow, which is a loop method that comes out of an array or list object, and item is the default (and default) single list element. You can also have an alias if you don't want to use item.

Navigator is the navigation tag, here, similar to the tag in html, is no longer said. Click on the content page of navigator to jump to the corresponding page, and the data is also transmitted using url.

We can see the code in the background:

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

Specific code:

/ / app.jsApp ({getBanner:function () {var bannerUrl= [".. / images/banner.jpg"]; return bannerUrl;}, getOneBook:function (id) {var abook Var books = [{id: "1", bookUrl: ".. / images/img1.jpg", bookName: "History of Western philosophy", bookInfor: "on philosophy"}, {id: "2", bookUrl: ".. / images/tmd.jpg", bookName: "Talmud" BookInfor: about faith}, {id: "3", bookUrl: ".. / images/holy.jpg", bookName: "Bible", bookInfor: "about faith"}, {id: "4" BookUrl: ".. / images/yuz.jpg", bookName: "Universe in the Fruit Shell", bookInfor: "about Science"}, {id: "5", bookUrl: ".. / images/dream.jpg", bookName: "Republic", bookInfor: "about philosophy"} {id: "6", bookUrl: ".. / images/out.jpg", bookName: "out of control", bookInfor: "about the economy"}] For (iSuppli)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.