WeChat mini-app-Example of Novel Reading mini-app (demo) and mini-app demo

Mini-app-demo of Novel Reading mini-app

Today, I chatted with my friends about the mini-app and read the book. Then we got a demo of the mini-book, and now I will share it with you.

I. First come:

II. The following is a 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 ,. net core configuration is also in this way (exposure I am. net camp ).

Many students have found that many colors do not work. Yes, valid colors are restricted. For details, refer to the official document. A few tabbars are required, so you can write a few in the list. There are three in this article, so you have read three. The above iconPath is the tabBar icon, which is also limited in size, 40 kb. Then, pagePath is the page Link corresponding to the tabBar. Text is the restricted content.

"TabBar": {"color": "# dddddddd", "selectedColor": "# d92121", "borderStyle": "white", "backgroundColor": "# fff ", "list": [{"pagePath": "pages/index", "iconPath": "images/main.png", "selectedIconPath": "images/main-s.png", "text ": "Homepage" },{ "pagePath": "pages/layout/hot", "iconPath": "images/hot.png", "selectedIconPath": "images/hot-s.png ", "text": "Most Popular" },{ "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 and wxml and js files are all of the same names. This is the default method, so the three files are associated by default. This is also called: The default value is greater than the configuration.

Go to the index page of the homepage.

We can see the lifecycle of the page above. We can write the event we want to handle in the event.

The getApp () method obtains the global instance.

Open the view page.

Here we can see the wx: for = "" pointed by the arrow. This is a loop method of the array or list object, and item is a single list element by default (also the default. Aliases can also be used if you do not want to use items.

Navigator is the navigation label. Here, similar to the <a> label in html, we will not talk about it. Click the content page of the navigator to jump to the corresponding page. Data is also transmitted using a url.

We can see the background code:

Data can be transmitted through url, and the target page can be obtained through parameters (objects) in the onLoad method. Here, we can see that the book details are obtained by using the Global getApp to obtain global instances and data. This data is in global app. js, such:

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:" about philosophy "}, {id:" 2 ", bookUrl :".. /images/tmd.jpg ", bookName:" tamude ", bookInfor:" about Faith "}, {id:" 3 ", bookUrl :".. /images/holy.jpg ", bookName:" Bible ", bookInfor:" about Faith "}, {id:" 4 ", bookUrl :".. /images/yuz.jpg ", bookName:" universe in the shell ", bookInfor:" about science "},{ id:" 5 ", bookUrl :".. /images/dream.jpg ", bookName:" ideal country ", bookInfor:" about philosophy "}, {id:" 6 ", bookUrl :".. /images/out.jpg ", bookName:" out of control ", bookInfor:" about economics "}]; 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:" History of Western philosophy ", bookInfor:" about philosophy "}, {id:" 2 ", bookUrl :".. /images/tmd.jpg ", bookName:" tamude ", bookInfor:" about Faith "}, {id:" 3 ", bookUrl :".. /images/holy.jpg ", bookName:" Bible ", bookInfor:" about Faith "}, {id:" 4 ", bookUrl :".. /images/yuz.jpg ", bookName:" universe in the shell ", bookInfor:" about science "},{ id:" 5 ", bookUrl :".. /images/dream.jpg ", bookName:" ideal country ", bookInfor:" about philosophy "}, {id:" 6 ", bookUrl :".. /images/out.jpg ", bookName:" out of control ", bookInfor:" about economics "}]; return indexList ;}})

There are not many items. If you are interested, you can download the source code and view them. The Source Code address is shown below.

Iii. Final

Finally, put the Source Code address of the program: demo

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.