Getting Started with WeChat Mini Programs Development of Mini Programs for Finding Pictures for You

build tabbar

page path

page name	path
front page	index
Horizontal screen	horizontal
Exquisite video	video
search	search
mine	mine

Home Module

1. const , let , var of es6
2. Arrow function relationship
3. Array splicing (merging)

tabs component

need

1. Implement a custom component tabs
2. The function is similar to the previous class package

Recommended components

Featured Big Picture

1. Use the built-in applet to send asynchronous code requests to get data
2. Cycle through to the page

month

1. Use the built-in applet to send asynchronous code requests to get data
2. Simple processing time format rendering to the page

popular

1. Send an asynchronous request to get data and render the page
2. paging function

1. Use the scroll-view component to achieve partial scrolling of the page
2. Use css calc to calculate container height
3. Use throttle to control paging requests
4. Use wx-showLoadding and wx-showToast to display friendly pages

classification module

need

1. Send a request to get classification data
2. Realize dynamic rendering of data
3. Use the scroll-view tag to scroll the page
4. Click on the category picture to jump to the category details page

Jump according to the id of the classified image

<navigator url="/pages/categoryDetail/categoryDetail?id=xxxxxxxxxxxxxxxx" >
</navigator>

Category details

business

1. Reference custom tabs component
2. Get the id on the url
3. Splicing request parameters, sending requests to get data
4. Implement pagination loading
5. When clicking on the tabs title, resend the request to get the corresponding data

Home Module

album module

need

1. Send a request, get album data, and complete page rendering
2. Use scroll-view to implement pagination
3. Click to enter the album details page

1. Carry the current album data and store it in the global, which is convenient to obtain on the album details page
2. Global Data``

getAPP().globalData.album=album;

album details

1. Get album information in global data
2. Get the album album according to the album information
3. Implement top carousel map swiper
4. Implement page scrolling and paging scroll-view

Exquisite video

need

1. Send a request to get data page rendering
2. Click on the picture to enter the video details page
3. While jumping to the page, use the built-in global data sharing method getApp().globalData in the applet for data transfer

Video details

need

1. Get the video data passed over from the previous page

1. Get it in getApp()

2. Render background images and videos

1. Use css filter to achieve filter effect
2. Use the video tag to implement video playback

3. Binding download click event

1. Use wx.downloadFile to download the video on the server into the cache
2. Use wx.saveVideoToPhotosAlbum to download the video in the cache to the phone

Picture details

need

1. Replace the parent container of all images with the navigator tag

1. Set the jump path of the page to /pages/picture/picture
2. At the same time, set the carried parameter as the path of the picture

2. Binding the click event to realize the click download of the picture

1. Use a function similar to downloading videos