Today, I chatted with a friend about applets, read a book, and then we got a demo for a little book, and now we'll share it.
First come to the picture above:
2. Then the following is a detailed explanation
Start with the tabBar below, which uses json-formatted data configurations for the project. I have to say that this is the trend now, and the.net core configuration is the same way (exposing me to the.net camp).
Many students here will find that a lot of color configurations are not useful. Yes, there are limitations on effective colors. Everyone can go into the official documents to view them.Need a few tabBars, just write a few in the list, this article asks three, so you see three.The iconPath above is the tabBar icon, which is also limited in size, 40kb.Then pagePath is the page link for this tabBar.text is just restricting content, let's not 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": "homepage"
},{
"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": "Newest"
}]
},
Open the project code directory as follows:
The style is found to have the same name as the wxml and js files. This is the default writing so that the default three files are associated.This is also called: default is greater than configuration.
Let's open the first index page
You can see the page life cycle above and we can write our own events in the event.
Where getApp(); method to get a global instance.
* Let's open the view page
Here you see the wx:for="" arrow pointing to, which is a looping method for array or list objects, and item is the default (and again the default) single list element.Aliases can be made without needing to use an item.
Navigator is the navigation label, which is similar to <a>label in html, let alone say.Click on the content page of the navigator to jump to the corresponding page, which also uses the url to transfer data.
* We can see the code behind the scenes:
The data can be passed through a url, and the target page is obtained through the parameters (objects) in the onLoad method.Here you can also see the details of the book by getting a global instance through the global getApp to get data.This data is in the global app.js, as shown below:
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:"History of Western Philosophy",
bookInfor:"About 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:"The Universe in a Nutshell",
bookInfor:"About Science"
},
{
id:"5",
bookUrl:"../images/dream.jpg",
bookName:"Utopia",
bookInfor:"About Philosophy"
},
{
id:"6",
bookUrl:"../images/out.jpg",
bookName:"Be out of control",
bookInfor:"About the economy"
}
];
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:"Talmud",
bookInfor:"About Faith"
},
{
id:"3",
bookUrl:"../images/holy.jpg",
bookName:"Bible",
bookInfor:"About Faith"
},
{
id:"4",
bookUrl:"../images/yuz.jpg",
bookName:"The Universe in a Nutshell",
bookInfor:"About Science"
},
{
id:"5",
bookUrl:"../images/dream.jpg",
bookName:"Utopia",
bookInfor:"About Philosophy"
},
{
id:"6",
bookUrl:"../images/out.jpg",
bookName:"Be out of control",
bookInfor:"About the economy"
}
];
return indexList;
}
})
* Then about page
There's not much. Interested in downloading the source code to view it. Place the source address below.
3. Last
Make an advertisement so that you can find the organization that develops the WeChat program. Thank you for the blog Park platform!
If you want to discuss or look for information about the development of WeChat, you can add the qq group of WeChat applets (application number): 390289365 if you are interested.
In addition, WeChat Applet Development Community The website was launched on September 25, 16 with a link address: www.cwechat.org Welcome to the Learning Exchange WeChat Applet Development.
Finally, place the source address of the program: http://www.cwechat.org/thread-25-1-1.html
Reprinted at: https://www.cnblogs.com/muyixiaoguang/p/5917986.html