table of Contents
1. Interface display
Click not logged in, click here to log in button to get WeChat avatar and nickname
Click on the news list on the homepage to enter the details page
Click the favorite button to favorite this news
View favorite news on my page
You can still jump to the details page of this news by clicking on the favorite news
2. Code implementation
app.json
app.wxss
common.js
index.wxml
index.wxss
index.js
detail.wxml
detail.wxss
detail.js
my.wxml
my.wxss
my.js
3. Function analysis
First, windows and tabbar are defined in app.json, and the corresponding interface effects are as follows.
Then, a common style is defined in app.wxss, which means that all pages can be used, and the priority is lower than the page style. The style is News list layout
Common.js is defined under the utils page, all public data is stored on this page, so that other pages can call the data of this page, making the code more concise
3.1 index page
When the index page is loaded, the onLoad function will be called first. At this time, the function of this function is to pass the news list data in common.js into index.js
The upper part of index.wxml shows the carousel picture. By traversing swipeImg to obtain each item.src, the final rendering effect is the carousel picture.
The news list is displayed below index.wxml. At this time, clicking the text content in the text component on the interface will trigger the goToDetail function in index.js, and data-id means that the corresponding parameter id is passed into this function.
The function of the goToDetail function is to carry the corresponding id value to jump to the detail page
3.2 detail page
When you jump to the detail page, the page load onLoad function will be executed first. At this time, options is the object passed in. By let id = options.id, the id value carried by the passed object can be assigned to the variable id, and then it will be brought by WeChat. The function wx.setStorageSync judges whether the object corresponding to the id value is in the cache, regardless of whether it is in the cache, the object corresponding to the id value will be passed to the object article to facilitate the display of the data on the page. The difference is only the value of isAdd , Is used to control the difference between whether the bottom display is favorited or not favorited when loading the detail page, if it is favorited, the object corresponding to the id value is in the cache, if it is not favorited, the id value object is not in the cache in.
At the bottom of the details page, the favorite and unfavorite buttons are set, and the cancelFavorites and addFavorites functions are respectively bound. When the unfavorite
button is clicked, the addFavorites function is triggered. The function of this function is to store the article object in the data into the cache, and Change isAdd to true, and the unfavored button on the screen will become favorited.
This is a favorited state. When the button is clicked again, the cancelFavorites function will be triggered. The function of this function is to store the article that has just been stored in the cache. The object is cleared from the cache, and isAdd is changed to false,
at this time the favorite button on the screen will become unfavored
3.3 my page
When entering the my page, the initial value of isLogin is false. At this time, the login interface shows that you are not logged in. Click here to log in, open-type="getUserInfo is equivalent to a switch, which means that we can get user data. Clicking this button will trigger getMyInfo The function
getMyInfo function is to obtain the information of the user's avatar and nickname. At this time, the isLogin value is changed to true, and the login interface will display the user's avatar and nickname. After executing this function to obtain the user information, the getMyFavorites function will be called to obtain further news information.
The function of getMyFavorites function is to store the news information in the cache in the newsList array, assign the number of news to number, and display it
in the favorites list. The news information in the cache is stored in the favorites list. Click the text component at this time The content in will trigger the goToDetail function
The function of the goToDetail function is to carry the id of this news to jump to the detail page, that is to say, click on the favorite news information in the favorite list to jump to the corresponding detail page.
This function is executed when the page is switched, such as switching from the homepage to me Page, this function means that the favorite list will be obtained only when you switch to this page in the logged-in state. If you are not logged in, switch to this page without displaying the favorite list
