Home > Article > WeChat Applet > Detailed explanation of the host environment for WeChat applet development
This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces related issues about the host environment. WeChat mobile phone is the host environment of the mini program, and the mini program relies on the host environment The capabilities provided can realize many functions that ordinary web pages cannot complete. Let's take a look at them together. I hope it will be helpful to everyone.
[Related learning recommendations: 小program learning tutorial]
手机微信It is the host environment for mini programs. With the help of the capabilities provided by the host environment, mini programs can realize many functions that ordinary web pages cannot complete. For example: the mini program calls the API provided by WeChat to implement functions such as QR code scanning and payment.
The hosting environment of the applet contains:
Communication model
Running mechanism
Components
API
1. The main body of communication
In the applet The main body of communication is the rendering layer and the logic layer, among which:
WXML templates and WXSS styles work in the rendering layer
JS scripts work in the logic layer
2. The communication model of the mini program
The communication model of the mini program is divided into two parts:
Rendering layer and logic layer Communication between
Communication between the logic layer and the third-party server
Both are forwarded through the WeChat client
1. The startup process of the mini program
Download the code package of the mini program to the local
Parse app.json globally Configuration file
Execute the app.js applet entry file, call App() to create the applet instance
Render the applet home page
The applet startup is completed
2. Page rendering process
Load the .json configuration file of the parsed page
Load the page .wxml template and .wxss style
Execute the .js file of the page and call Page() to create the page instance
Page rendering is completed
1. Classification of components in mini programs:
The components in mini programs are also provided by the host environment. Developers can use components based on Quickly build a beautiful page structure. Officially, the components of the mini program are divided into 9 categories, which are:
View container
Basic content
Form component
Navigation component
Body component
map map component
canvas canvas component
Open capability
Accessibility
2. Commonly used view container class components
view
Normal view area
is similar to The div in HTML is a block-level element
Commonly used to achieve page layout effects
For example: use flex to achieve horizontal layout.
wxml code:
<view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>
wxss code:
.container1 view{ width:100px; height:100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1){ background-color: aquamarine; } .container1 view:nth-child(2){ background-color: azure; } .container1 view:nth-child(3){ background-color: darkorange; } .container1 { display: flex; justify-content: space-around; }
Achievement effect:
scroll-view
Scrollable view area
Commonly used to achieve scrolling list effect
Use scroll- View realizes the effect of scrolling up and down
wxml code:
<scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>
Modified wxss code:
.container1 { border:1px solid red; height:110px; /*使用scroll-view时设置固定的高度*/
Achieved effect:
swiper and swiper-item
Carousel chart container component and carousel chart item component
Use these two components to achieve the carousel chart effect:
wxml code :
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" 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>
wxss code:
.swiper-container{ height:150px; } .item{ height:100%; line-height: 150px; text-align: center; } swiper-item:nth-child(1) .item{ background-color: aquamarine; } swiper-item:nth-child(2) .item{ background-color: azure; } swiper-item:nth-child(3) .item{ background-color: darkorange; }
Achievement effect:
3. Commonly used basic content components
text
Text component
Similar to the span tag in HTML, it is an inline element
Long press to select text content The effect
<view> 长按可以选中文本内容: <text user-select>HelloWorld!</text> </view>
rich-text
The rich text component supports rendering HTML strings into WXML structures
Rendering HTML strings For the corresponding UI structure
<rich-text nodes="<h1 style='color:red'>标题</h1>"> </rich-text>
4.其他常用组件
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image
图片组件
image 组件默认宽度约 300px、高度约 240px
navigator
页面导航组件
类似于 HTML 中的 a 链接,实现页面的跳转
5.API
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:实现支付,扫码等功能。
小程序 API 的 3 大分类:
事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
特点1:以 Sync 结尾的 API 都是同步 API
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步 API
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
【相关学习推荐:小程序学习教程】
The above is the detailed content of Detailed explanation of the host environment for WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!