Before, the data set of small projects was still being collected and produced, which was a little troublesome. Finally, we prepared to make a small toy (in the form of small program). However, it is a little complicated to use the ready-made small program template, and many grammars are different from those used in web page development. Therefore, while learning, sort out the content of WXML+wxss..
brief introduction
-
Difference from ordinary web page development
- Different operating environment
- Different APIs (you can call various APIs provided by wechat)
- Different development modes (using wechat developer tools)
-
Host environment - Mobile wechat
- Communication model: rendering layer and logic layer, logic layer and communication server
- operating mechanism
- Start: download the code package to the local \ (\ longrightarrow \) to parse the app JSON global configuration file \ (\ longrightarrow \) execute app JS entry file (call App() to create an applet instance) \ (\ longrightarrow \) render the homepage of the applet and start it
- Page rendering: loading json\(\longrightarrow \) loading wxml templates and wxss style \ (\ longlightarrow \) execution js, call Page() to create a page instance, and the rendering is completed
- assembly
- API: event listening API (start with on to listen for event triggering), synchronous API (end of Sync), asynchronous API (receive results through callback function)
-
The difference between WXML and HTML
-
Different tag names - WXML commonly used tag names are: view (similar to div), text (similar to span), image (similar to img), navigator (similar to a)
-
Different attribute nodes
-
<a href="#"> HTML links</a>
-
<navigator url="">WXML link</navigator>
-
-
Provides template syntax similar to Vue: data binding, list rendering, and conditional rendering
-
-
Differences between WXSS and CSS
- Added rpx dimension units
- Global style (app.wxss) and local style (< pagename >. Wxss) are provided
- WXSS does not support some CSS selectors
-
Collaborative work: administrators, project members (operators, developers, data analysts), experience members
-
Software version: development version \ (\ rightarrow \) experience version \ (\ rightarrow \) version under review \ (\ rightarrow \) online version
Project structure
- pages folder: the page where all applets are stored
- . js file: the entry (script) file of the page, which creates and runs the page by calling the Page() function
- . json file: the configuration file of the current page (which will overwrite the global configuration)
- . wxml file: current page template structure file
- . wxss file: the style sheet file of the current page
- utils folder: a module that holds the nature of the tool
- app.js: project entry file, which starts the whole applet by calling App() function
- app.json: project global configuration file
- Pages: the path of all pages of the applet
- window: globally define the background color and text color of all pages of the applet
- Style: globally defines the version of the style used by the applet component
- sitemapLocation: indicates the sitemap JSON location
- app.wxss: project global style files
- project.config.json: project configuration file, which records the personalized configuration of development tools
- sitemap.json: configure whether the applet and its page can be indexed (crawled) by wechat
Operating skills
-
Preview method: you can preview through simulator or wechat scanning code on real machine.
-
Page configuration: create a page directly in app Add to the pages list in JSON; The first element of the pages list is rendered as the first page of the project.
assembly
1. View container class:
- View: normal view area
- Scroll view: scrollable view area
- Swiper and swiper item: carousel chart container component and carousel chart item component
<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots autoplay interval="3000" circular>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
<text>\n</text>
<view class="container1">
<view>Image detection</view>
<view>Video detection</view>
</view>
<text>\n</text>
<scroll-view class="container2" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
<view>D</view>
</scroll-view>
/* pages/list/list.wxss */
.swiper-container{
height: 150px;
}
.item{
line-height: 150px;
height: 100px;
text-align: center;
}
.swiper-container swiper-item:nth-child(1){
background-color: aqua;
}
.swiper-container swiper-item:nth-child(2){
background-color:lime;
}
.swiper-container swiper-item:nth-child(3){
background-color:mediumpurple;
}
.container1 view{
width:175px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color: lightpink;
}
.container1 view:nth-child(3){
background-color:darkturquoise;
}
.container1{
height: 100px;
display:flex;
justify-content:space-around;
}
.container2 view{
width:150px;
height: 85px;
text-align: center;
line-height: 100px;
}
.container2 view:nth-child(1){
background-color: aqua;
}
.container2 view:nth-child(2){
background-color: lightpink;
}
.container2 view:nth-child(3){
background-color:darkturquoise;
}
.container2 view:nth-child(4){
background-color: rgb(238, 71, 71);
}
.container2{
border: 1px solid rgb(0, 0, 0);
width: 150px;
height: 200px;
}
2. Text component
-
Text: text component
<text user-select>1051434511</text>
-
Rich text: rich text component
<rich-text nodes="<h1 style='color: red;'>Title</h1>"></rich-text>
3. button assembly
<button type="primary" size="mini" plain>Main tone mini hollow button</button>
4. Picture component (image)
<image src="/images/bs.jpg" mode="aspectFit"></image>
5. Navigation bar