1. Welcome page
Supported CSS selectors : Although there are dozens of CSS1, CSS2 and CSS3 selectors combined, there are only 6 in the applet
Note : local resources cannot be used in wxss, you can use network pictures instead of local pictures
Flex layout : use display:flex. Its purpose is to make the style layout of the page simpler, and it can support responsive layout well. The traditional use of position and float properties to layout, it has shortcomings, such as vertical centering is not so easy to achieve, Flex can solve these problems very well.
Use display:flex to turn the view into a flexbox.
Then use flex-direction to specify the arrangement direction of the elements in the view. Properties .row and .row-reverse (the main axis is horizontal), .column and .column-reverse (the main axis is vertical)
Attribute align-items : center, can center the element horizontally. Note: It is the alignment in the direction of "Cross Axis". If the main axis is vertical, it is aligned horizontally.
Responsive unit rpx : You can make the component adapt to the height and width of the screen, but px will not. It is recommended to use the iPhone6 width of 750 physical pixels as the standard for design drawings
Global style file app.wxss : such as fonts
The root element page of the page : outside the container view, there is also a default container element, page, which represents the entire page, so you only need to set the background color for the page.
page {
background-color: #ECC0A8;
}
The window configuration item in app.json
: can be used to set the background color of the status bar, navigation bar, title and window.
2. Article list page
Carousel image : The image will automatically change every few seconds. The swiper component is mainly composed of multiple swiper-items, and the image component is added to the swiper-item.
Article list : <view> <text> <image>
image component : 4 zoom modes and 9 crop modes
The code structure of the .js file and the life cycle of the Page page : onload
Data binding : In a real project, business data is obtained by accessing the RESTFUL API. The traditional idea: get the DOM, assign values to the DOM tags, so as to realize the display of data. But in JSCore, the DOM is completely abandoned and only data binding can be used. The applet only implements one-way data binding. The data variable acts as a bridge for data binding. Calling setData will cause a rerender of the page
Bind complex objects :
List rendering wx:for : try to change all articles to data binding
<block wx:for= "{{postList}}" wx:for-item="item" wx:for-index="idx"> <block>
<block> has no real meaning and is not a component.
Page jump : wx.redirectTo (close the current page), wx.navigateTo (reserve), switchTap (tabbar page jump)
Bubbling and non-bubbling events :
3. Modules, templates and caching
template template
Initialize local database with storage cache
4. Article detail page
3 ways to pass parameters between pages : global, cache, url query parameter transmission
Dynamically set the title of the navigation bar : wx.setNavigationBarTitle(OBJECT)
5. Favorites, comments, likes and counting functions
wx:if and hidden controls
6. Background music playback
play music
7. Rich article pages
share with friends