WeChat applet
Label
<view></view> // div
<scroll-view scroll-x></scroll-view> // 可滑动的视图标签
// scroll-x里面元素的滑动方向
<image></image> // img
<input type="text" ></input> // input
app.json file
app.json is the current applet 全局配置, including all page paths, window appearance, interface performance, bottom tab, etc. of the applet.
app.json configuration in the project
① pagesIt is used to record the path of all pages of the current applet;
The path inside is the first path by default is the home page
② window: Globally define the background color, text color, etc. of all pages of the applet;
③ style: Globally define the style version used by the applet components
④ sitemapLocation: used to indicate the location of sitemap.json
What is WXML
WXML (WeXin Markup Language) is a set of small program framework design 标签语言，用来构建小程序页面的结构, and its function is similar to HTML in web development.
The difference between WXML and HTML
① The label name is different
HTML (div,span,img,a)
WXML(view,text,image,navigator)
② Different attribute nodes
<a href="#">超链接</a>
<navigator url=""></navigator>
③ Provides a template syntax similar to that in Vue
Data binding, list rendering, conditional rendering
The difference between WXSS and CSS
① Added rpx dimension unit
In css, pixel unit conversion needs to be done manually, such as rem
WXSS supports the new size unit rpx at the bottom layer, and the applet will automatically convert it on screens of different sizes
② Provides global styles and local styles
app.wxss in the root directory of the project will act on all applet pages
The .wxss style of a partial page is only valid for the current page
③ WXSS only supports some CSS selectors
.class and #ids
element
Union selector, descendant selector
Pseudo-class selectors such as ::after and ::before
Classification of applet.js files
The js files of the applet are divided into three categories, namely:
① app.js
Yes 整个小程序项目的入口文件, App()函数the whole applet is started by
② The .js file of the page
Yes 页面的入口文件, Page()函数create and run the page by calling
③ Ordinary .js files
Yes 普通的功能模块文件, used to wrap 公共的函数或属性for page use
components
Classification of applet components
The components in the applet are also provided by the host environment
① View container, ② Basic content, ③ Form component, ④ Navigation component, ⑤ Media component, ⑥ map component, ⑦ canvas component, ⑧ Development capability, ⑨ Barrier-free access
Commonly used view container class components
1、view
① Normal view area;
② Similar to div in HTML, it is a block-level element;
③ Commonly used to achieve the layout effect of the page
2、scroll-view
① Scrollable view area;
② Commonly used to achieve scrolling list effect
3、swiper 和 swiper-item
① Carousel container component and carousel item component
| Attributes | type | Defaults | illustrate |
|---|---|---|---|
| indicator-dots | boolean | false | Whether to display panel indicator points |
| indicator-color | color | rgba(0,0,0,.3) | cue point color |
| indicatoe-active-color | color | #000000 | The currently selected cue point color |
| autoplay | boolean | false | Whether to switch automatically |
| interval | number | 5000 | Automatic switching time interval |
| circular | boolean | false | Whether to use joint sliding |
Commonly used basic content components
1、text
① Text component
② Similar to the span tag in HTML, it is an inline element
Long press the copy effect to use selectablethe attributes of the text tag
```
2、rich-text
① Rich text zujian
② Support rendering HTML strings into WXML structures
nodes The attribute node of the rich-text component , which HTMLrenders the string as the corresponding UI structure
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
Other common components
1、button
① Button component
② The function is richer than the button button in HTML
③ Various functions provided by WeChat (customer service, forwarding, obtaining user authorization, obtaining user information, etc.) can be called through the open-type attribute
| Attributes | attribute value |
|---|---|
| type (button type) | primary (main color button), warn (warning button) |
| size (button size) | mini (small size button) |
| plain (hollow button) | true |
2、image
① Picture component
② The image component has a default width of about 300px and a height of about 240px
| mode value | illustrate |
|---|---|
| scaleToFill | (Default) scaling mode, 不保持纵横比缩放图片, so that the width and height of the picture are fully stretched to填满image元素 |
| aspectFit | scaling mode, 保持纵横比缩放图片，使图片的长边能完全显示出来. That is, the complete picture is displayed |
| aspectFill | scaling mode, 保持纵横比缩放图片，只保证图片的短边能完全显示出来. That is, the picture is usually only complete in the horizontal or vertical direction, and interception will occur in the other direction |
| widthFix | Scaling mode, 宽度不变，高度自动变化, keep the aspect ratio of the original image unchanged |
| heightFix | Scaling mode, 高度不变，宽度自动变化, keep the aspect ratio of the original image unchanged |
3、 navigator
① Page Navigation Components
② Similar to a link in HTML
Mini Program Hosting Environment-API
Three categories of Mini Program API
1. Event monitoring
① Features: onstart with监听某些事件的触发
Example: Listening to window size change events
wx.onWindowResize(function callback);
2. Synchronous API
Features:
① SyncAPIs ending with are synchronous APIs
② The execution result of the synchronous API can be obtained directly through the return value of the function. If the execution error occurs, an exception will be thrown
Example: Write content to local storage
wx.setStorageSync("key","value");
3. Asynchronous API
Features: Similar to the functions in jQuery $.ajax(options), you need to receive the results of the call through success, fail, and complete
Example: Send a network request and receive data through the success callback function
wx.request()
Data cacheStorage
Features:
① Store the data in the key specified in the local cache;
②The life cycle is consistent with the applet itself, unless the user actively deletes or is automatically cleared after a certain period of time, otherwise the data will always exist;
③Data storage limit is 10MB
The difference between synchronous and asynchronous:
① The synchronization method will block the current task until the synchronization method returns;
②Asynchronous methods will not block the current task
store data
asynchronous:wx.setStorage()
Synchronize:wx.setStorageSync()
retrieve data
Features:
asynchronous:wx.getStorage()
Synchronize;wx.getStorageSync()
Empty the cache
asynchronous:wx.clearStorage()
Synchronize:wx.clearStorageSync()
Delete specified cache
asynchronous:wx.removeStorage()
Synchronize:wx.removeStorageSync()
life cycle function
Seven life cycle functions of applets:
1. onLoad monitor page loading onLoad function: a page will only be called once, and the query parameter called by the current page can be obtained in onLoad. Example: onLoad:function(options){}
2. onReady monitors the onReady function when the initial rendering of the page is completed: a page will only be called once, indicating that the page has been prepared and can interact with the view layer. Example: onReady:function(){}
3. onShow The monitoring page displays the onShow function: it will be called once every time the page is opened. Example: onShow:function(){}
4. OnHide monitor page hides the onHide function: it will be called when navigateTo or the bottom tab is switched. Example: onHide:function(){}
5. onUnload monitor page loading onUnload function: called when redirectTo or navigateBack. Example: onUnload:function(){}
6. onlaunch monitor applet initialization onlaunch function: when the applet is initialized, onLaunch will be triggered (only once globally) Example: onLaunch:function () {},
7. onError error monitoring function onError: When a script error occurs in the applet or the api call fails, onError will be triggered with error information. Example: onError:function () {}
WXML template syntax
conditional rendering
1.wx:if
Use wx:id="{
{condition}}"to determine whether the code needs to be rendered
<view wx:if="{
{condition}}">true</view>
You can also use wx:elifand wx:elseto add else judgment
<view wx:if="{
{type === 1 }}">男</view>
<view wx:if="{
{type === 2 }}">女</view>
<view wx:else>保密</view>
2. Use wx:if in combination
If you want 一次性控制多个组件展示与隐藏, you can use a <block></block>tag to wrap multiple components, and use the wx:if control attribute on the tag.
3.hidden
In the applet, use directly hidden="{
{condition}}"也能控制元素的显示与隐藏:
<view hidden="{
{condition}}">条件为true隐藏，条件为false显示</view>
4.wx: contrast between if and hidden
run differently
① wx:if is 动态创建和移除元素used to control the display and hiding of elements;
② hidden uses 切换样式the method (display:none/block;) to control the display and hiding of elements.
use
When ① 频繁切换, it is recommended to use hidden
② 控制条件复杂, it is recommended to use wx:if with wx:elif, wx:else to switch between display and hide
list rendering
1.wx:for
Through wx:for, the repeated component structure can be rendered in a loop according to the specified array
<view wx:for="{
{arr}}">
索引是：{
{index}}当前项是：{
{item}}
</view>
2. Specify the index and the variable name of the current item
① Use variable names that wx:for-indexcan be specified当前循环项的索引
② Use variable names that wx:for-itemcan be specified当前项
<view wx:for="{
{arr}}" wx:for-index="i" wx:for-item="temp">
索引是：{
{i}} 当前项是：{
{temp}}
</view>
3. The use of wx:key
Similar to Vue list rendering :key, it is also recommended to specify a unique key value for the rendered list items when the applet implements list rendering 提高渲染的效率.
// data 数据
data:{
list:[
{
id:1,name:'张三'
},
{
id:2,name:'王五'
},
{
id:3,name:'李四'
}
]
}
// wxml结构
<view wx:for="{
{list}}" wx:key="id">{
{item.name}}</>