微信小程序开发学习笔记（二）——小程序框架、组件、WXML

削你飞刀 發表於 2023-4-19 16:19:00

微信小程序开发学习笔记（二）——小程序框架、组件、WXML

<h1>一、整体认识小程序框架</h1>
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 <code>WXML</code> 和 <code>WXSS</code>，以及基于 <code>JavaScript</code> 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
<h2 id="响应的数据绑定">1.1、响应的数据绑定</h2>
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
通过这个简单的例子来看：
在开发者工具中预览效果
<div class="language-html extra-class">
<pre class="language-html"><code>
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>// This is our App Service.
// This is our data.
var helloData = {
name: 'Weixin'
}

// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
 name: 'MINA'
})
}
})
</code></pre>
</div>
<ul>
<li>开发者通过框架将逻辑层数据中的 <code>name</code> 与视图层的 <code>name</code> 进行了绑定，所以在页面一打开的时候会显示 <code>Hello Weixin!</code>；</li>
<li>当点击按钮的时候，视图层会发送 <code>changeName</code> 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数；</li>
<li>回调函数触发后，逻辑层执行 <code>setData</code> 的操作，将 <code>data</code> 中的 <code>name</code> 从 <code>Weixin</code> 变为 <code>MINA</code>，因为该数据和视图层已经绑定了，从而视图层会自动改变为 <code>Hello MINA!</code>。</li>
</ul>
pages/counter/index.wxml
<div class="cnblogs_code">
<pre>
<view class="counter">
<view class="title"><text>计数器</text></view>
<view>{{count}}</view>
<view>
<button type="primary" bindtap="onCount">点击count++</button>
</view>
</view></pre>
</div>
pages/counter/index.wxss
<div class="cnblogs_code">
<pre>/* pages/counter/index.wxss */

.counter
{
font-size: 60rpx;
text-align: center;
padding: 30rpx;
}

.counter view{
margin: 20rpx 0;
}

.counter .title{
color:red;
}</pre>
</div>
pages/counter/index.js
<div class="cnblogs_code">
<pre>// pages/counter/index.js
Page({
/**
* 页面的初始数据
*/
data: {
count:100
},
onCount(){
this.setData({count:this.data.count+1});
}
})</pre>
</div>
运行效果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419091251486-121540783.png" alt="" width="319" height="554" loading="lazy">
<h2 id="页面管理">1.2、页面管理</h2>
框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。
<h2 id="基础组件">1.3、基础组件</h2>
框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。
<h2 id="丰富的-API">1.4、丰富的 API</h2>
框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
<h2 id="51-小程序文件结构和传统web对比">1.5. 小程序文件结构和传统web对比<button class="cnblogs-toc-button" title="显示目录导航"></button></h2>
<div class="table-wrapper">
<table>
<thead>
<tr><th>结构</th><th>传统web</th><th>微信小程序</th></tr>
</thead>
<tbody>
<tr>
<td>结构</td>
<td>HTML</td>
<td>WXML</td>
</tr>
<tr>
<td>样式</td>
<td>CSS</td>
<td>WXSS</td>
</tr>
<tr>
<td>逻辑</td>
<td>Javascript</td>
<td>Javascript</td>
</tr>
<tr>
<td>配置</td>
<td>无</td>
<td>JSON</td>
</tr>
</tbody>
</table>
</div>
通过以上对比得出，传统web 是三层结构。而微信小程序是四层结构，多了一层 配置.json
<h1>二、组件</h1>
小程序中的组件是由宿主环境提供的，主要分为9大类：
视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418114333011-1207704452.png" alt="" width="853" height="496" loading="lazy">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419093010580-1373824095.png" alt="" loading="lazy">
<h2>2.0、单位</h2>
<h3>2.0.1、响应式单位rpx</h3>
在使用 CSS 进行移动端的网页开发时，由于不同手机设备的屏幕比，在换算像素单位时会遇到很多麻烦。为了方便开发人员适配各种屏幕WxSS 中加入了新的尺寸单位 rpx 即（responsive pixel，响应式像素)。
rpx 说明
rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx
100% 屏幕的宽度 = 750rpx
rpx响应单位
<ul>
<li>
rpx是微信小程序独有的，解决屏幕自适应的尺寸单位
</li>
<li>
可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
</li>
<li>
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
</li>
</ul>
rpx 和 px之间的换算
<ul>
<li>
在普通网页开发中，最常见的像素单位是px
</li>
<li>
在小程序开发中推荐使用 rpx这种响应式的像素单位进行开发
</li>
<li>
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px
</li>
</ul>
<div class="cnblogs_code">
<pre><view class="rpxDemo">
Hello rpx!
</view></pre>
</div>
<div class="cnblogs_code">
<pre>.rpxDemo
{
width: 375rpx;
height: 375rpx;
background: yellow;
font-size:80rpx;
}</pre>
</div>
运行在iphone5上：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419093837042-1355025402.png" alt="" loading="lazy">
 更大屏幕的iphone6
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419093911130-1718549143.png" alt="" loading="lazy">
 字体与view都相应响应式变大。
<h3>2.0.2、其它单位</h3>
px 绝对单位，页面按精确像素展示
em 相对单位，相对于它的父节点字体进行计算
rem 相对单位，相对根节点html的字体大小来计算
% 一般来说就是相对于父元素
vh 视窗高度，1vh等于视窗高度的1%
vw 视窗宽度，1vw等于视窗宽度的1%
<div class="cnblogs_code">
<pre>.box
{
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.box view{
background: lightcoral;
height: 50vh;
line-height: 50vh;
width: 50vw;
text-align: center;
}</pre>
</div>
<div class="cnblogs_code">
<pre><view class="box">
<view>
Hello rpx!
</view>
</view></pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418153601608-1541725219.png" alt="" width="369" height="641" loading="lazy">
示例2：
<div class="cnblogs_code">
<pre><view class="mybox">
<view class="demo">
Hello Applet!
</view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>.mybox
{
display: flex;
justify-content: center;
align-items: center;
background: gray;
height: 100vh;
}
.demo{
background: oldlace;
width: 50vw;
height: 50vh;
text-align: center;
line-height: 50vh;
font-size: 7vw;
}</pre>
</div>
运行效果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419094705126-324359354.png" alt="" width="367" height="629" loading="lazy">
<h2>2.1、view组件</h2>
在微信小程序开发中，view就相当于html5中的div，也是块状元素
 官方文档给出的解释呢就是：视图容器
我们在编写html5页面所用的div呢，在开发小程序中就改成view即可
属性说明：
<div class="table-wrp">
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>必填</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>hover-class</td>
<td>string</td>
<td>none</td>
<td>否</td>
<td>指定按下去的样式类。当 <code>hover-class="none"</code> 时，没有点击态效果</td>
<td>1.0.0</td>
</tr>
<tr>
<td>hover-stop-propagation</td>
<td>boolean</td>
<td>false</td>
<td>否</td>
<td>指定是否阻止本节点的祖先节点出现点击态</td>
<td>1.5.0</td>
</tr>
<tr>
<td>hover-start-time</td>
<td>number</td>
<td>50</td>
<td>否</td>
<td>按住后多久出现点击态，单位毫秒</td>
<td>1.0.0</td>
</tr>
<tr>
<td>hover-stay-time</td>
<td>number</td>
<td>400</td>
<td>否</td>
<td>手指松开后点击态保留时间，单位毫秒</td>
<td>1.0.0</td>
</tr>
</tbody>
</table>
 
</div>
 
<div class="table-wrp">
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102160443614-617181537.png" alt="" width="258" height="84" loading="lazy">
<div class="cnblogs_code">
<pre><view>Hello wx</view></pre>
</div>
</div>
view类似div，这里主要学会使用view+flex布局 https://www.cnblogs.com/best/p/6136165.html#_label1
示例：
<div class="cnblogs_code">
<pre><view hover-class="bgcolor" class="box">
<view>Tom</view>
<view>Jack</view>
<view>Rose</view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>.bgcolor{
background: lightcyan;
}
.box{
display: flex;
flex-direction: row;
background: oldlace;
justify-content:space-around
}

.box view{
height: 80rpx;
line-height: 80rpx;
text-align: center;
}

.box view:nth-child(1){
background: #ddeeff;
}
.box view:nth-child(2){
background: #99ddee;
width: 200rpx;
}
.box view:nth-child(3){
background: #6699dd;
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419162140909-1162785815.png" alt="" loading="lazy">
示例：
<div class="cnblogs_code">
<pre><view hover-class="bgcolor" class="box">
<view>Tom</view>
<view>Jack</view>
<view>Rose</view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>.bgcolor{
background: lightcyan;
}
.box{
display: flex;
flex-direction: row;
background: oldlace;
height: 50vh;
/* align-items: flex-end; */
/* align-items: flex-start; */
/* align-items:center; */
/* align-items: stretch; */
align-items: baseline;
}

.box view{
height: 80rpx;
text-align: center;
}

.box view:nth-child(1){
background: #ddeeff;
}
.box view:nth-child(2){
background: #99ddee;
width: 200rpx;
font-size: 100rpx;
}
.box view:nth-child(3){
background: #6699dd;
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420084610561-1346904851.png" alt="" width="316" height="551" loading="lazy">
示例：
<div class="cnblogs_code">
<pre>.bgcolor{
background: lightcyan;
}
.box{
display: flex;
flex-direction: row;
background: oldlace;
height: 50vh;
}

.box view{
height: 80rpx;
text-align: center;
}

.box view:nth-child(1){
background: #ddeeff;
flex-grow: 0;
}
.box view:nth-child(2){
background: #99ddee;
flex-grow: 1;
}
.box view:nth-child(3){
background: #6699dd;
flex-grow: 0;
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420090015487-1938916428.png" alt="" width="366" height="643" loading="lazy">
<h2>2.2、scroll-view</h2>
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度
说白了其实就是一个可以允许滚动的容器，只需要设置最大高度即可
属性说明：
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%; color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">
<table class="have-children-table" style="margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 694px; border-spacing: 0; overflow: auto; font-size: 14px; height: 2273px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-x</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">允许横向滚动</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-y</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">允许纵向滚动</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">upper-threshold</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number/string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">50</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">距顶部/左边多远时，触发 scrolltoupper 事件</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">lower-threshold</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number/string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">50</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">距底部/右边多远时，触发 scrolltolower 事件</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-top</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number/string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置竖向滚动条位置</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-left</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number/string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置横向滚动条位置</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-into-view</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-with-animation</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">在设置滚动条位置时使用动画过渡</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">enable-back-to-top</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">enable-flex</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.7.3</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">scroll-anchoring</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.8.2</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">enable-passive</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">开启 passive 特性，能优化一定的滚动性能</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.25.3</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">refresher-enabled</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">开启自定义下拉刷新</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">refresher-threshold</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">45</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置自定义下拉刷新阈值</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">refresher-default-style</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">"black"</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">refresher-background</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">"#FFF"</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置自定义下拉刷新区域背景颜色</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">refresher-triggered</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">enhanced</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bounces</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">true</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">show-scrollbar</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">true</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滚动条显隐控制 (同时开启 enhanced 属性后生效)</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">paging-enabled</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">分页滑动效果 (同时开启 enhanced 属性后生效)</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">fast-deceleration</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效)</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">binddragstart</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">binddragging</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">binddragend</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindscrolltoupper</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滚动到顶部/左边时触发</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindscrolltolower</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滚动到底部/右边时触发</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindscroll</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindrefresherpulling</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">自定义下拉刷新控件被下拉</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindrefresherrefresh</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">自定义下拉刷新被触发</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindrefresherrestore</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">自定义下拉刷新被复位</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindrefresherabort</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">自定义下拉刷新被中止</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.10.1</td>
</tr>
</tbody>
</table>
wxml:
 
<div class="cnblogs_code">
<pre>
<scroll-view class="box" scroll-x="true" scroll-y="true">
<view class="innerbox">
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容
</view>
</scroll-view></pre>
</div>
wxcss:
<div class="cnblogs_code">
<pre>.innerbox{
width: 500px;
height: 100px;
background-color: lightblue;
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418141328649-2028582448.png" alt="" loading="lazy">
<h2>2.3、swiper与swiper-item</h2>
滑块视图容器。其中只可放置swiper-item组件
</div>
通俗点讲呢，就是轮播图组件，微信小程序中，轮播图我们不用在自己去写
可以用它自带的swiper组件与swiper-view共同来完成
swiper属性说明：
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%; color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">
<table class="have-children-table" style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 720px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">indicator-dots</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否显示面板指示点</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">indicator-color</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">color</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">rgba(0, 0, 0, .3)</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">指示点颜色</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.1.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">indicator-active-color</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">color</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">#000000</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当前选中的指示点颜色</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.1.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">autoplay</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否自动切换</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">current</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">0</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当前所在滑块的 index</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">interval</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">5000</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">自动切换时间间隔</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">duration</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">500</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动动画时长</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">circular</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否采用衔接滑动</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">vertical</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">滑动方向是否为纵向</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">previous-margin</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">"0px"</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">next-margin</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">"0px"</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">snap-to-edge</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.12.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">display-multiple-items</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">同时显示的滑块数量</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">easing-function</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">"default"</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">指定 swiper 切换缓动动画类型</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.6.5</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindchange</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">current 改变时会触发 change 事件，event.detail = {current, source}</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindtransition</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.4.3</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindanimationfinish</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">动画结束时会触发 animationfinish 事件，event.detail 同上</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
</tbody>
</table>
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">swiper-item属性说明：
<div class="table-wrp" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
<table style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 720px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">item-id</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">该 swiper-item 的标识符</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">skip-hidden-item-layout</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.0</td>
</tr>
</tbody>
</table>
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif"><img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102162932000-2080447218.png" alt="" loading="lazy">
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">wxml
<div class="cnblogs_code" style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">
<pre><swiper class="swiper-content" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay="true" interval="2000"
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></pre>
</div>
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">wxss
<div class="cnblogs_code" style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">
<pre>.swiper-content{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: green;
}
swiper-item:nth-child(2) .item{
background-color: yellow;
}
swiper-item:nth-child(3) .item{
background-color: pink;
}</pre>
</div>
示例：
<div class="cnblogs_code">
<pre><swiper class="swiperContainer" autoplay="true" circular="true" indicator-dots="true" indicator-color="red" indicator-active-color="white" interval="500">
<swiper-item class="item a">
<view>Tom</view>
</swiper-item>
<swiper-item class="item b">
<view>Jack</view>
</swiper-item>
<swiper-item class="item c">
<view>Rose</view>
</swiper-item>
</swiper></pre>
</div>
<div class="cnblogs_code">
<pre>.item{
font-size: 100rpx;
height: 300rpx;
text-align: center;
line-height: 300rpx;
}

.a{
background: lightgreen;
}
.b{
background: lightblue;
color: red;
}
.c{
background: lightcoral;
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420093500426-1069963699.png" alt="" loading="lazy">
<h2 style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">2.4、text</h2>
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">文本组件，类似与html中的span标签，是一个行内元素
<p style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">属性说明：
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418141850786-1282464063.png" alt="" loading="lazy">
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102163548097-484156111.png" alt="" loading="lazy">
<div class="cnblogs_code">
<pre><text>需求文档策划书</text></pre>
</div>
<div class="cnblogs_code">
<pre><view>
<text>1&nbsp;2 &gt; &lt;</text>
</view></pre>
</div>
示例：
<div class="cnblogs_code">
<pre><view>
<text user-select="true" decode="true">Hello&nbsp;&nbsp;&nbsp;TEXT! &lt;
<text>
 嵌套text
</text>
</text>
<text>1</text><text>2</text>
</view></pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420094323910-1124593569.png" alt="" width="365" height="636" loading="lazy">
原样输出，加上decode会编码。
<ol>
<li><code>tip</code>: decode可以解析的有 <code>&nbsp;</code> <code>&lt;</code> <code>&gt;</code> <code>&amp;</code> <code>&apos;</code> <code>&ensp;</code> <code>&emsp;</code></li>
<li><code>tip</code>: 各个操作系统的空格标准并不一致。</li>
<li><code>tip</code>:text 组件内只支持 text 嵌套。</li>
<li><code>tip</code>: 除了文本节点以外的其他节点都无法长按选中。</li>
<li><code>bug</code>: 基础库版本低于 <code>2.1.0</code> 时， text 组件内嵌的 text style 设置可能不会生效。</li>
</ol>
2.5、rich-text
</div>
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
富文本组件，支持把HTML字符串渲染为WXML结构
属性说明：
<div class="table-wrp" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
<table class="have-children-table" style="margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 720px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)"> </th><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">nodes</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">array/string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">[]</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">节点列表/HTML String</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.4.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">space</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">显示连续空格</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.4.1</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">user-select</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">文本是否可选，该属性会使节点显示为 block</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.24.0</td>
</tr>
</tbody>
</table>
 
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102163946246-348276354.png" alt="" loading="lazy">
 
<div class="cnblogs_code">
<pre><rich-text nodes="<h1 style='color: green;'>标题一</h1>"></rich-text></pre>
</div>
 
<ol>
<li><code>tip</code>: nodes 不推荐使用 String 类型，性能会有所下降。</li>
<li><code>tip</code>: <code>rich-text</code> 组件内屏蔽所有节点的事件。</li>
<li><code>tip</code>: attrs 属性不支持 id ，支持 class 。</li>
<li><code>tip</code>: name 属性大小写不敏感。</li>
<li><code>tip</code>: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。</li>
<li><code>tip</code>: img 标签仅支持网络图片。</li>
<li><code>tip</code>: 如果在自定义组件中使用 <code>rich-text</code> 组件，那么仅自定义组件的 wxss 样式对 <code>rich-text</code> 中的 class 生效</li>
</ol>
<div class="cnblogs_code">
<pre><view>
<text>{{"<hr/>"}}</text>
<rich-text nodes="{{'<hr/>'}}">
</rich-text>
<view>123</view>
<rich-text nodes="<hr/>">
</rich-text>
</view></pre>
</div>
<div class="cnblogs_code">
<pre><view>
<text>
{{"原样输出：<hr/>"}}
</text>
<rich-text nodes="解析成HTML：<hr/>">
</rich-text>
<rich-text nodes="{{mynodes}}">
</rich-text>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>// pages/hello/index.js
Page({

/**
* 页面的初始数据
*/
data: {
mynodes:[{
 name:"div",
 attrs:{
 class:"blue"
 },
 children:[{
 type:"text",
 text:"Hello Nodes!"
 }]
}]
},

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {

},

/**
* 生命周期函数--监听页面显示
*/
onShow() {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide() {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload() {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage() {

}
})</pre>
</div>
<div class="cnblogs_code">
<pre>.blue{
color:blue
}</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420100044889-1794099038.png" alt="" loading="lazy">
<h2>2.6、button</h2>
按钮组件
相对于html的button，更加丰富，可以通过属性type来改变按钮的不同样式
微信小程序的button按钮可以调用很多功能（通过open-type可以调用客服，转发，获取用户信息，获取用户授权等）
属性说明：
 
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418144906717-1212299554.png" alt="" loading="lazy">
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
<table class="have-children-table" style="margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 751.7px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">size</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">default</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">按钮的大小</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">type</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">default</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">按钮的样式类型</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">plain</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">按钮是否镂空，背景色透明</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">disabled</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否禁用</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">loading</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">名称前是否带 loading 图标</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">form-type</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">open-type</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">微信开放能力</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.1.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">hover-class</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">button-hover</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">hover-stop-propagation</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">指定是否阻止本节点的祖先节点出现点击态</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">hover-start-time</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">20</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">按住后多久出现点击态，单位毫秒</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">hover-stay-time</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">number</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">70</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">手指松开后点击态保留时间，单位毫秒</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="have-children-tr" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">lang</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">en</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.3.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">session-from</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">会话来源，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.4.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">send-message-title</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当前标题</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">会话内消息卡片标题，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">send-message-path</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当前分享路径</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">会话内消息卡片点击跳转小程序路径，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">send-message-img</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">截图</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">会话内消息卡片图片，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">app-parameter</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.5</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">show-message-card</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindgetuserinfo</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.3.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindcontact</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">客服消息回调，open-type="contact"时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindgetphonenumber</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">获取用户手机号回调，open-type=getPhoneNumber时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.2.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">binderror</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当使用开放能力时，发生错误的回调，open-type=launchApp时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.9.5</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindopensetting</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">在打开授权设置页后回调，open-type=openSetting时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.0.7</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindlaunchapp</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">打开 APP 成功的回调，open-type=launchApp时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.4.4</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindchooseavatar</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">获取用户头像回调，open-type=chooseAvatar时有效</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.21.2</td>
</tr>
</tbody>
</table>
 
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102164747362-509396905.png" alt="" loading="lazy">
 
<div class="cnblogs_code">
<pre><button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button></pre>
</div>
<table class="have-children-table">
<tbody>
<tr class="have-children-tr show-children">
<td>open-type</td>
<td>string</td>
<td> </td>
<td>否</td>
<td>微信开放能力</td>
<td>1.1.0</td>
</tr>
<tr class="children-table">
<td> </td>
<td colspan="6">
<table>
<thead>
<tr><th>合法值</th><th>说明</th><th>最低版本</th></tr>
</thead>
<tbody>
<tr>
<td>contact</td>
<td>打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*）</td>
<td>1.1.0</td>
</tr>
<tr>
<td>share</td>
<td>触发用户转发，使用前建议先阅读使用指引</td>
<td>1.2.0</td>
</tr>
<tr>
<td>getPhoneNumber</td>
<td>获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （*小程序插件中不能使用*）</td>
<td>1.2.0</td>
</tr>
<tr>
<td>getUserInfo</td>
<td>获取用户信息，可以从bindgetuserinfo回调中获取到用户信息（*小程序插件中不能使用*）</td>
<td>1.3.0</td>
</tr>
<tr>
<td>launchApp</td>
<td>打开APP，可以通过app-parameter属性设定向APP传的参数具体说明</td>
<td>1.9.5</td>
</tr>
<tr>
<td>openSetting</td>
<td>打开授权设置页</td>
<td>2.0.7</td>
</tr>
<tr>
<td>feedback</td>
<td>打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容</td>
<td>2.1.0</td>
</tr>
<tr>
<td>chooseAvatar</td>
<td>获取用户头像，可以从bindchooseavatar回调中获取到头像信息</td>
<td>2.21.2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
 
<div class="cnblogs_code">
<pre><view>
<button type="default">默认</button>
<button type="primary">确定</button>
<button type="warn">警告</button>
</view>

<view>
<button type="primary" size="mini">打印</button>
<button type="warn" size="mini">删除</button>
</view>

<view>
<button type="primary" plain="true">镂空</button>
</view>
<view>
<button type="primary" loading="true">加载中</button>
</view>
<view>
<button open-type="chooseAvatar">获取头像</button>
</view></pre>
</div>
点击获取头像时的效果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420101050398-678300022.jpg" alt="" width="408" height="907" loading="lazy">
<div class="cnblogs_code">
<pre>data: {
 "avatarUrl":"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
},

onChooseavatar(e){
 let {avatarUrl}=e.detail;
 this.setData({avatarUrl});
},</pre>
</div>
 
<h2>2.7、image</h2>
图片组件。支持 JPG、PNG、SVG、WEBP、GIF 等格式
相比与html的image，可以通过mode属性更加灵活的改变图片样式
属性说明
<div class="table-wrp webview-table" style="margin: 1em 0 3em; padding: 0; -webkit-tap-highlight-color: transparent; overflow-x: auto; max-width: 100%">
<table class="have-children-table" style="margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 720px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)"> </th><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">属性</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">类型</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">默认值</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">必填</th><th style="margin: 0; padding: 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; text-align: left; border-bottom-color: rgba(136, 136, 136, 1); white-space: nowrap; color: rgba(136, 136, 136, 1)">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">src</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">图片资源地址</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="have-children-tr show-children" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">mode</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">string</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">scaleToFill</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">图片裁剪、缩放的模式</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr class="children-table" style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 10px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 10px 0 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal" colspan="6">
<table style="margin-right: 0; margin-left: 0; padding: 0; -webkit-tap-highlight-color: transparent; width: 694.4px; border-spacing: 0; overflow: auto; font-size: 14px">
<thead style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; background-color: rgba(248, 248, 248, 1)">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent"><th style="margin: 0; padding: 10px 20px 10px 16px; -webkit-tap-highlight-color: transparent; font-weight: 400; text-align: left; border-bottom: none; white-space: nowrap; opacity: 0.5; border-top-left-radius: 8px; width: 102.875px">合法值</th><th style="margin: 0; padding: 10px 20px 10px 0; -webkit-tap-highlight-color: transparent; font-weight: 400; text-align: left; border-bottom: none; white-space: nowrap; opacity: 0.5">说明</th><th style="margin: 0; padding: 10px 0 10px 20px; -webkit-tap-highlight-color: transparent; font-weight: 400; text-align: left; border-bottom: none; white-space: nowrap; opacity: 0.5; border-top-right-radius: 8px; width: 118.875px">最低版本</th></tr>
</thead>
<tbody style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; background-color: rgba(251, 251, 251, 1)">
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">scaleToFill</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">aspectFit</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">aspectFill</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">widthFix</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">缩放模式，宽度不变，高度自动变化，保持原图宽高比不变</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">heightFix</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">缩放模式，高度不变，宽度自动变化，保持原图宽高比不变</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">2.10.3</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">top</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的顶部区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">bottom</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的底部区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">center</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的中间区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">left</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的左边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">right</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的右边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">top left</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的左上边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">top right</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的右上边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">bottom left</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的左下边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9"> </td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 16px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; width: 10px; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9; border-bottom-left-radius: 8px">bottom right</td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9">裁剪模式，不缩放图片，只显示图片的右下边区域</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; border-bottom: none; height: 62px; box-sizing: border-box; word-break: normal; border-top-color: rgba(0, 0, 0, 0.05); opacity: 0.9; border-bottom-right-radius: 8px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">webp</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">默认不解析 webP 格式，只支持网络资源</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.9.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">lazy-load</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">图片懒加载，在即将进入一定范围（上下三屏）时才开始加载</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.5.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">show-menu-by-longpress</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">boolean</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">false</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">2.7.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">binderror</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当错误发生时触发，event.detail = {errMsg}</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
<tr style="margin: 0; padding: 0; -webkit-tap-highlight-color: transparent">
<td style="margin: 0; padding: 20px 13.6px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal; width: 10px"> </td>
<td style="margin: 0; padding: 20px 20px 20px 0; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">bindload</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">eventhandle</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal"> </td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">否</td>
<td style="margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">当图片载入完毕时触发，event.detail = {height, width}</td>
<td style="margin: 0; padding: 20px 0 20px 20px; -webkit-tap-highlight-color: transparent; color: rgba(53, 53, 53, 1); border-bottom-color: rgba(229, 229, 229, 1); height: 62px; box-sizing: border-box; word-break: normal">1.0.0</td>
</tr>
</tbody>
</table>
 
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230102165333893-1422218971.png" alt="" width="229" height="174" loading="lazy">
<div class="cnblogs_code">
<pre><image src="/images/rocket_top.png" mode="aspectFit" style="border: 1px red solid;"/></pre>
</div>
更多标签见官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
 
<div class="cnblogs_code">
<pre><view>
<image src="/images/haha.jpg" mode="heightFix" show-menu-by-longpress="true"></image>
</view>
<view style="height: 2000px; background: red;">
</view>
<view>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" lazy-load="true"></image>
</view></pre>
</div>
结果
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421084844168-1450288695.png" alt="" loading="lazy">
<h2>2.8、input</h2>
 输入框
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420103825593-1290588532.png" alt="" width="843" height="744" loading="lazy">
 更多：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421090242153-255513602.png" alt="" width="1170" height="658" loading="lazy">
 
<div class="cnblogs_code">
<pre><form>
<view>
<label for="txtId">帐号：</label>
<input id="txtId" value="{{userId}}" bindinput="inputHandle" placeholder="请输入帐号" auto-focus="true"/>
</view>
<view>
<label for="txtPhone">电话：</label>
<input id="txtPhone" type="number"/>
</view>
<view>
<label for="txtPassword">密码：</label>
<input id="txtPassword" password="true"/>
</view>
<view>
{{userId}}
</view>
</form></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
userId:""
},
inputHandle(e){
console.log(e.detail.value,e.detail.cursor,e.detail.keyCode);
this.setData({userId:e.detail.value})
//当用户输入2个11时自动变成1个2
return this.data.userId.replace(/11/igm,'2');
}
};
Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421091049744-1792300063.png" alt="" width="367" height="644" loading="lazy">
<h2>2.9、checkbox，checkbox-group</h2>
多选项目。
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420111329046-1880441277.png" alt="" loading="lazy">
 更多：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
<div class="cnblogs_code">
<pre><form bindsubmit="submitHandle">
<view>
<checkbox-group bindchange="checkboxChange">
爱好：
<label>
 <checkbox value="阅读" name="hobby" checked="true" color="orange"/>阅读
</label>
<label>
 <checkbox value="健身" name="hobby"/>健身
</label>
<label>
 <checkbox value="电影" name="hobby"/>电影
</label>
<label>
 <checkbox value="其它" name="hobby" disabled/>
</label>
</checkbox-group>
</view>
<view>
<button form-type="submit" type="primary">提交</button>
</view>
</form></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
submitHandle(e){
console.log(e.detail);
},
checkboxChange(e){
console.log(e.detail);
}
};
Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421094705663-923633680.png" alt="" width="1174" height="708" loading="lazy">
<h2>2.10、radio,radio-group</h2>
单选项目
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420135123514-1972163238.png" alt="" width="816" height="362" loading="lazy">
 更多：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
<div class="cnblogs_code">
<pre><radio-group bindchange="radioChange">
性别：
<label>
<radio value="男" checked="true"></radio>男
</label>
<label>
<radio value="女"></radio>女
</label>
</radio-group></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
radioChange(e){
console.log(e.detail.value);
}
};
Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421095315700-1093164535.png" alt="" width="1187" height="647" loading="lazy">
<h2>2.11、slider</h2>
滑动选择器
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420150145653-671681377.png" alt="" width="783" height="666" loading="lazy">
<div class="cnblogs_code">
<pre><view>
<slider bindchange="sliderChange1" show-value="true" max="200" min="100" step="5"/>
</view>
<view>
<slider bindchange="sliderChange2" bindchanging="changingHandle"show-value="true"/>
</view>
<view>
<slider bindchange="sliderChange3"show-value="true"/>
</view>
<view>
<slider bindchange="sliderChange4"show-value="true"/>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
};

/*解决方法1 */
// for(var i=1;i<5;i++){
// (function(n){
// page[`sliderChange${n}`]=function(e){
// console.log(`第${n}个滑块，当前值：${e.detail.value}`);
// }
// })(i);
// }
/*解决方法2 */
for(let i=1;i<5;i++){
page[`sliderChange${i}`]=function(e){
 console.log(`第${i}个滑块，当前值：${e.detail.value}`);
}
}

page.changingHandle=function(e){
console.log(e.detail.value);
}

Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421101014234-1060251730.png" alt="" loading="lazy">
<h2>2.12、form</h2>
表单
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421091228056-1927968020.png" alt="" width="846" height="526" loading="lazy">
<div class="cnblogs_code">
<pre><form bindsubmit="submitHandle" bindreset="resetHandle">
<view>
<label for="txtId">帐号：</label>
<input name="userId" id="txtId" value="{{userId}}" bindinput="inputHandle" placeholder="请输入帐号" auto-focus="true"/>
</view>
<view>
<label for="txtPhone">电话：</label>
<input name="userPhone" id="txtPhone" type="number"/>
</view>
<view>
<label for="txtPassword">密码：</label>
<input name="userPwd" id="txtPassword" password="true"/>
</view>
<view>
<button type="primary" form-type="submit" size="mini">提交</button>
<button type="warn" form-type="reset" size="mini">重置</button>
</view>
<view>
{{userId}}
</view>
</form></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
userId:""
},
inputHandle(e){
console.log(e.detail.value,e.detail.cursor,e.detail.keyCode);
this.setData({userId:e.detail.value})
//当用户输入2个11时自动变成1个2
return this.data.userId.replace(/11/igm,'2');
},
submitHandle(e){
console.log(e);
},
resetHandle(e){
console.log(e);
}
};
Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421093220565-87902843.png" alt="" loading="lazy">
<h1>三、WXML</h1>
<h2> 3.1、整体介绍</h2>
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看 WXML 具有什么能力：
<h3 id="数据绑定">3.1.1、数据绑定</h3>
<div class="language-html extra-class">
<pre class="language-html"><code>
<view> {{message}} </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
</code></pre>
</div>
<h3 id="列表渲染">3.1.2、列表渲染</h3>
<div class="language-html extra-class">
<pre class="language-html"><code>
<view wx:for="{{array}}"> {{item}} </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
</code></pre>
</div>
<h3 id="条件渲染">3.1.3、条件渲染</h3>
<div class="language-html extra-class">
<pre class="language-html"><code>
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>// page.js
Page({
data: {
view: 'MINA'
}
}) </code></pre>
<div class="cnblogs_code">
<pre><view>
<label for="name">姓名首字母:</label>
<input id="name" value="{{name}}" bindinput="inputHandle"/>
{{name}}
<view wx:if="{{name==='t'}}">tom</view>
<view wx:elif="{{name==='j'}}">jack</view>
<view wx:else>请输入姓名的首字母，比如t,j</view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
arr1:[1,2,3,4,5],
name:""
},
inputHandle(e){
this.setData({name:e.detail.value});
}
};
Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420153113083-229735310.png" alt="" width="359" height="632" loading="lazy">
</div>
<h3 id="模板">3.1.4、模板</h3>
<div class="language-html extra-class">
<pre class="language-html"><code>
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})</code></pre>
</div>
示例：
 
<div class="cnblogs_code">
<pre><template name="staff">
<view>
<view>员工名片</view>
<view>姓名：{{firstname}} {{lastname}} </view>
</view>
</template>

<template is="staff" data="{{...staffA}}" ></template>
<template is="staff" data="{{...staffB}}" ></template>
<template is="staff" data="{{...staffC}}" ></template></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
staffA:{firstname:"jack",lastname:"ma"},
staffB:{firstname:"rose",lastname:"li"},
staffC:{firstname:"mark",lastname:"liu"},
},
};
Page(page)</pre>
</div>
结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230420160029185-1134034171.png" alt="" loading="lazy">
<h2> 3.2、数据绑定</h2>
WXML 中的动态数据均来自对应 Page 的 data。
<h3 id="简单绑定">3.2.1、简单绑定</h3>
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
<h4 id="内容">内容</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view> {{ message }} </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
message: 'Hello MINA!'
}
})
</code></pre>
</div>
<h4 id="组件属性-需要在双引号之内">组件属性(需要在双引号之内)</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view id="item-{{id}}"> </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
id: 0
}
})
</code></pre>
</div>
<h4 id="控制属性-需要在双引号之内">控制属性(需要在双引号之内)</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:if="{{condition}}"> </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
condition: true
}
})
</code></pre>
</div>
<h4 id="关键字-需要在双引号之内">关键字(需要在双引号之内)</h4>
<code>true</code>：boolean 类型的 true，代表真值。
<code>false</code>： boolean 类型的 false，代表假值。
<div class="language-html extra-class">
<pre class="language-html"><code><checkbox checked="{{false}}"> </checkbox>
</code></pre>
</div>
特别注意：不要直接写 <code>checked="false"</code>，其计算结果是一个字符串，转成 boolean 类型后代表真值。
<h3 id="运算">3.2.2、运算</h3>
可以在 <code>{{}}</code> 内进行简单的运算，支持的有如下几种方式：
<h4 id="三元运算">三元运算</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view hidden="{{flag ? true : false}}"> Hidden </view>
</code></pre>
</div>
<h4 id="算数运算">算数运算</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view> {{a + b}} + {{c}} + d </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
a: 1,
b: 2,
c: 3
}
})
</code></pre>
</div>
view中的内容为 <code>3 + 3 + d</code>。
<h4 id="逻辑判断">逻辑判断</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:if="{{length > 5}}"> </view>
</code></pre>
</div>
<h4 id="字符串运算">字符串运算</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view>{{"hello" + name}}</view>
</code></pre>
</div>
<div class="language-javascript extra-class">
<pre class="language-javascript"><code>Page({
data:{
name: 'MINA'
}
})
</code></pre>
</div>
<h4 id="数据路径运算">数据路径运算</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view>{{object.key}} {{array}}</view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
object: {
 key: 'Hello '
},
array: ['MINA']
}
})
</code></pre>
</div>
<h3 id="组合">3.2.3、组合</h3>
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
<h4 id="数组">数组</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{}}"> {{item}} </view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
zero: 0
}
})
</code></pre>
</div>
最终组合成数组<code></code>。
<h4 id="对象">对象</h4>
<div class="language-html extra-class">
<pre class="language-html"><code><template is="objectCombine" data="{{for: a, bar: b}}"></template>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
a: 1,
b: 2
}
})
</code></pre>
</div>
最终组合成的对象是 <code>{for: 1, bar: 2}</code>
也可以用扩展运算符 <code>...</code> 来将一个对象展开
<div class="language-html extra-class">
<pre class="language-html"><code><template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
obj1: {
 a: 1,
 b: 2
},
obj2: {
 c: 3,
 d: 4
}
}
})
</code></pre>
</div>
最终组合成的对象是 <code>{a: 1, b: 2, c: 3, d: 4, e: 5}</code>。
如果对象的 key 和 value 相同，也可以间接地表达。
<div class="language-html extra-class">
<pre class="language-html"><code><template is="objectCombine" data="{{foo, bar}}"></template>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
</code></pre>
</div>
最终组合成的对象是 <code>{foo: 'my-foo', bar:'my-bar'}</code>。
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：
<div class="language-html extra-class">
<pre class="language-html"><code><template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
obj1: {
 a: 1,
 b: 2
},
obj2: {
 b: 3,
 c: 4
},
a: 5
}
})
</code></pre>
</div>
最终组合成的对象是 <code>{a: 5, b: 3, c: 6}</code>。
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{}} ">
{{item}}
</view>
</code></pre>
</div>
等同于
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{ + ' '}}">
{{item}}
</view></code></pre>
</div>
<h2> 3.3、列表渲染</h2>
<h3 id="wx-for">3.3.1、wx:for</h3>
在组件上使用 <code>wx:for</code> 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 <code>index</code>，数组当前项的变量名默认为 <code>item</code>
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
array: [{
 message: 'foo',
}, {
 message: 'bar'
}]
}
})
</code></pre>
</div>
使用 <code>wx:for-item</code> 可以指定数组当前元素的变量名，
使用 <code>wx:for-index</code> 可以指定数组当前下标的变量名：
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
</code></pre>
</div>
<code>wx:for</code> 也可以嵌套，下边是一个九九乘法表
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{}}" wx:for-item="i">
<view wx:for="{{}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
 {{i}} * {{j}} = {{i * j}}
</view>
</view>
</view> </code></pre>
<div class="cnblogs_code">
<pre><scroll-view scroll-x="true">
<view wx:for="{{}}" wx:for-item="i" class="item">
<view wx:for="{{}}" wx:for-item="j" class="exp">
 <text wx:if="{{j<=i}}"> {{j}}x{{i}}={{i*j}}</text>
</view>
</view>
</scroll-view></pre>
</div>
<div class="cnblogs_code">
<pre>.item
{
display: flex;
}
.exp{
width: 150rpx;
}</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230425105343636-2044872258.png" alt="" width="948" height="393" loading="lazy">
 从小程序基础库版本 2.3.0 开始，在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加 "resizable": true 。
</div>
<h3 id="block-wx-for">3.3.2、block wx:for</h3>
类似 <code>block wx:if</code>，也可以将 <code>wx:for</code> 用在<code><block/></code>标签上，以渲染一个包含多节点的结构块。例如：
<div class="language-html extra-class">
<pre class="language-html"><code><block wx:for="{{}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
</code></pre>
</div>
<h3 id="wx-key">3.3.3、wx:key</h3>
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 <code>wx:key</code> 来指定列表中项目的唯一的标识符。
<code>wx:key</code> 的值以两种形式提供
<ol>
<li>字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>保留关键字 <code>*this</code> 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。</li>
</ol>
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 <code>wx:key</code>，会报一个 <code>warning</code>，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
<h3 id="示例代码">3.3.4、示例代码</h3>
在开发者工具中预览效果
<div class="language-html extra-class">
<pre class="language-html"><code><switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
objectArray: [
 {id: 5, unique: 'unique_5'},
 {id: 4, unique: 'unique_4'},
 {id: 3, unique: 'unique_3'},
 {id: 2, unique: 'unique_2'},
 {id: 1, unique: 'unique_1'},
 {id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
 const x = Math.floor(Math.random() * length)
 const y = Math.floor(Math.random() * length)
 const temp = this.data.objectArray
 this.data.objectArray = this.data.objectArray
 this.data.objectArray = temp
}
this.setData({
 objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
 objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
 numberArray: this.data.numberArray
})
}
}) </code></pre>
<div class="cnblogs_code">
<pre><switch wx:for="{{objectArray}}" style="display: block;" wx:key="unique">{{item.id}}</switch>
<button bindtap="switchHandle" type="primary">切换</button>
<button bindtap="addToFront" type="primary">在最前面添加对象</button>
<switch wx:for="{{numberArray}}" wx:key="*this">{{item}}</switch>
<button bindtap="addNumberToFront" type="primary" >在最前面添加数字</button></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
objectArray:[
 {id:5,unique:"unique_5"},
 {id:4,unique:"unique_4"},
 {id:3,unique:"unique_3"},
 {id:2,unique:"unique_2"},
 {id:1,unique:"unique_1"},
 {id:0,unique:"unique_0"}
],
numberArray:[3,2,1]
},
switchHandle(e){
let length=this.data.objectArray.length;
for(let i=0;i<length;i++){
 let x=Math.floor(Math.random()*length);
 let y=Math.floor(Math.random()*length);
 let temp=this.data.objectArray;
 this.data.objectArray=this.data.objectArray;
 this.data.objectArray=temp;
}
this.setData({objectArray:this.data.objectArray});
},
addToFront(e){
let length=this.data.objectArray.length;
this.data.objectArray=[{id:length,unique:"unique_"+length}].concat(this.data.objectArray);
this.setData({objectArray:this.data.objectArray});
},
addNumberToFront(e){
let length=this.data.numberArray.length;
this.data.numberArray=.concat(this.data.numberArray);
this.setData({numberArray:this.data.numberArray});
}
};

Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421114853323-911867264.png" alt="" loading="lazy">
</div>
<h3 id="注意事项">3.3.5、注意事项</h3>
当 <code>wx:for</code> 的值为字符串时，会将字符串解析成字符串数组
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="array">
{{item}}
</view>
</code></pre>
</div>
等同于
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
</code></pre>
</div>
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{}} ">
{{item}}
</view>
</code></pre>
</div>
等同于
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:for="{{ + ' '}}" >
{{item}}
</view></code></pre>
</div>
<h2> 3.4、条件渲染</h2>
<h3 id="wx-if">3.4.1、wx:if</h3>
在框架中，使用 <code>wx:if=""</code> 来判断是否需要渲染该代码块：
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:if="{{condition}}"> True </view>
</code></pre>
</div>
也可以用 <code>wx:elif</code> 和 <code>wx:else</code> 来添加一个 else 块：
<div class="language-html extra-class">
<pre class="language-html"><code><view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view> </code></pre>
<div class="cnblogs_code">
<pre><view>
成绩：<input value="{{mark}}" bindinput="inputHandle"/>
成绩是：{{mark}}
</view>
<view>
等级是：
<text wx:if="{{mark>=90}}">优秀</text>
<text wx:elif="{{mark<90 && mark>=75}}">良好</text>
<text wx:elif="{{mark<75 && mark>=60}}">及格</text>
<text wx:else>不及格</text>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
users:[{id:1001,name:"jack",age:18},
{id:1002,name:"mark",age:17},
{id:1003,name:"rose",age:20},
{id:1004,name:"lili",age:15},
{id:1005,name:"lucy",age:22}],
isShow:true,
array1:[1,2,3,4,5,6,7,8,9],
mark:0
},
tapHandle(e){
this.setData({isShow:!this.data.isShow});
},
inputHandle(e){
this.setData({mark:e.detail.value})
}
};

Page(page);</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230426095341103-1376887805.png" alt="" loading="lazy">
</div>
<h3 id="block-wx-if">3.4.2、block wx:if</h3>
因为 <code>wx:if</code> 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <code><block/></code> 标签将多个组件包装起来，并在上边使用 <code>wx:if</code> 控制属性。
<div class="language-html extra-class">
<pre class="language-html"><code><block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
</code></pre>
</div>
注意： <code><block/></code> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<h3><code>3.4.3、wx:if</code> vs <code>hidden</code></h3>
因为 <code>wx:if</code> 之中的模板也可能包含数据绑定，所以当 <code>wx:if</code> 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 <code>wx:if</code> 也是惰性的，如果在初始渲染条件为 <code>false</code>，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，<code>hidden</code> 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，<code>wx:if</code> 有更高的切换消耗而 <code>hidden</code> 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 <code>hidden</code> 更好，如果在运行时条件不大可能改变则 <code>wx:if</code> 较好。
<div class="cnblogs_code">
<pre><view wx:if="{{isShow}}">
你可以看到我wx:if
</view>
<view hidden="{{!isShow}}">
你可以看到我hidden
</view>
<view>
<button bindtap="toggleIsShow">切换isShow的值={{isShow}}</button>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
isShow:true
},
toggleIsShow(e){
this.setData({isShow:!this.data.isShow})
}
};

Page(page)</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230421135708331-1134739716.png" alt="" width="363" height="633" loading="lazy">
<h2> 3.5、模板</h2>
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
<h3 id="定义模板">3.5.1、定义模板</h3>
使用 name 属性，作为模板的名字。然后在<code><template/></code>内定义代码片段，如：
<div class="language-html extra-class">
<pre class="language-html"><code>
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template> </code></pre>
<div class="cnblogs_code">
<pre><template name="card">
<view class="card">
<view>编号：{{id}}</view>
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
</view>
</template>

<template is="card" data="{{id:1006,name:'张三',age:88}}"></template>
<template is="card" data="{{...user1}}"></template></pre>
</div>
<div class="cnblogs_code">
<pre>const page={
data:{
users:[{id:1001,name:"jack",age:18},
{id:1002,name:"mark",age:17},
{id:1003,name:"rose",age:20},
{id:1004,name:"lili",age:15},
{id:1005,name:"lucy",age:22}],
isShow:true,
array1:[1,2,3,4,5,6,7,8,9],
user1:{id:1007,name:'李四',age:18}
},
tapHandle(e){
this.setData({isShow:!this.data.isShow});
},
};

Page(page);</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230426100905397-1803738299.png" alt="" loading="lazy">
</div>
<h3 id="使用模板">3.5.2、使用模板</h3>
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<div class="language-html extra-class">
<pre class="language-html"><code><template is="msgItem" data="{{...item}}"/>
</code></pre>
</div>
<div class="language-js extra-class">
<pre class="language-js"><code>Page({
data: {
item: {
 index: 0,
 msg: 'this is a template',
 time: '2016-09-15'
}
}
})
</code></pre>
</div>
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
<div class="language-html extra-class">
<pre class="language-html"><code><template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>

<block wx:for="{{}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block> </code></pre>
<div class="cnblogs_code">
<pre>const page={
data:{
users:[{id:1001,name:"jack",age:18},
{id:1002,name:"mark",age:17},
{id:1003,name:"rose",age:20},
{id:1004,name:"lili",age:15},
{id:1005,name:"lucy",age:22}]
}
};
Page(page);</pre>
</div>
<div class="cnblogs_code">
<pre><template name="cardA">
<view class="card">
<view>编号：{{id}}</view>
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
</view>
</template>

<template name="cardB">
<view class="card bgGreen">
<text>编号：{{id}}</text>
<text>姓名：{{name}}</text>
<text>年龄：{{age}}</text>
</view>
</template>

<view wx:for="{{users}}" wx:key="id">
<template is="{{index%2===1?'cardA':'cardB'}}" data="{{...item}}"></template>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>view{
margin: 10rpx;
}
.card{
background: oldlace;
border-radius: 20rpx;
padding: 16rpx;
border: 2px solid orangered;
}
.bgGreen{
background: lightgreen;
}</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230426103844572-478387129.png" alt="" loading="lazy">
</div>
<h3 id="模板的作用域">3.5.3、模板的作用域</h3>
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <code><wxs /></code> 模块。
<h2> 3.6、引用</h2>
WXML 提供两种文件引用方式<code>import</code>和<code>include</code>。
<h3 id="import">3.6.1、import</h3>
<code>import</code>可以在该文件中使用目标文件定义的<code>template</code>，如：
在 item.wxml 中定义了一个叫<code>item</code>的<code>template</code>：
<div class="language-html extra-class">
<pre class="language-html"><code>
<template name="item">
<text>{{text}}</text>
</template>
</code></pre>
</div>
在 index.wxml 中引用了 item.wxml，就可以使用<code>item</code>模板：
<div class="language-html extra-class">
<pre class="language-html"><code><import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
</code></pre>
</div>
<h3 id="import-的作用域">3.6.2、import 的作用域</h3>
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的<code>template</code>，在B中可以使用A定义的<code>template</code>，但是C不能使用A定义的<code>template</code>。
<div class="language-html extra-class">
<pre class="language-html"><code>
<template name="A">
<text> A template </text>
</template>
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code>
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code>
<import src="b.wxml"/>
<template is="A"/>
<template is="B"/>
</code></pre>
</div>
<h3 id="include">3.6.3、include</h3>
<code>include</code> 可以将目标文件除了 <code><template/></code> <code><wxs/></code> 外的整个代码引入，相当于是拷贝到 <code>include</code> 位置，如：
<div class="language-html extra-class">
<pre class="language-html"><code>
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code>
<view> header </view>
</code></pre>
</div>
<div class="language-html extra-class">
<pre class="language-html"><code>
<view> footer </view></code></pre>
</div>
 
五、uni-app
5.1：什么是uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
官方文档：https://uniapp.dcloud.net.cn/
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230103232149856-1383383051.webp" alt="" width="268" height="224" loading="lazy">
5.2：uni-app的特点
优点
1、跨平台发行，运行体验更好 2、与小程序的组件、API一致； 3、兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化； 4、通用前端技术栈,学习成本更低 5、支持vue语法，微信小程序API 6、内嵌mpvue 7、开发生态,组件更丰富 8、支持通过npm安装第三方包 9、支持微信小程序自定义组件及JS SDK 10、兼容mpvue组件及项目(内嵌mpvue开源框架) 11、App端支持和原生混合编码 12、插件丰富,DCloud将发布插件到市场
缺点
1.、兼容性不够好：uni-app 对于不同平台的兼容性不够好，有些功能在不同平台上可能会有差异。
2.、文档不够完善：uni-app 的文档不够完善，有些功能的使用方法不够清晰，需要开发者自己去摸索。
5.3：创建uni-app
一、开始之前，开发者需先下载安装如下工具：HBuilderX
官网下载地址：https://www.dcloud.io/hbuilderx.html
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130193728148-1438568580.png" alt="" loading="lazy">
二、打开HbuilderX，在点击工具栏里的文件 -> 新建 -> 项目
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130193951179-979906709.png" alt="" width="580" height="328" loading="lazy">
三、选择<code>uni-app</code>类型，输入工程名，选择模板，点击创建，即可成功创建。
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130200232814-1757645204.png" alt="" width="830" height="689" loading="lazy">
四：配置uni-app的相关路径以及微信小程序的AppID
配置路径
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130194818159-231979702.png" alt="" width="395" height="263" loading="lazy"> <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130194857758-515019875.png" alt="" width="632" height="261" loading="lazy">
配置AppID
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130194945714-197467217.png" alt="" width="245" height="401" loading="lazy"> <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130195056791-2144298277.png" alt="" width="746" height="400" loading="lazy">
五、一切准备就绪后，我们就可以在HBuilderX中启动我们的微信小程序了
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130195505709-1896648042.png" alt="" width="451" height="353" loading="lazy"><img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130195804934-605415936.png" alt="" width="605" height="354" loading="lazy">
初次编译可能会多耗费点时间
5.4：使用uni-app
首先我们来了解一下uni-app的目录结构
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130201220404-212034403.png" alt="" width="896" height="611" loading="lazy">
了解完了目录结构后，我们就可以根据需求来进行编码
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130201823049-2137457368.png" alt="" width="711" height="253" loading="lazy">
在HBbuiltX中保存后，微信小程序会自动更新代码
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130201918878-679926794.png" alt="" width="710" height="215" loading="lazy">
5.5：使用uni-app的组件
假设我们现在需要用一个日历的组件
第一步：打开官网，选择组件，找到日历组件
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130202102973-284943563.png" alt="" width="770" height="371" loading="lazy">
 直接copy代码到我们的HBuildX中，即可
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130202501318-48811337.png" alt="" width="385" height="561" loading="lazy">
5.6：微信小程序底部导航栏
还记得我们前面所描述的，需要修改或添加我们的底部导航栏，只需要修改app.json即可
但在uni-app中，pages.json就相当于微信小程序中的app.json
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130203104780-1472355237.png" alt="" width="897" height="395" loading="lazy">
申明一个"tabBar":他与pages同级，
示例：
<div class="language-json extra-class">
<div class="cnblogs_code">
<pre>"tabBar": {
 "color": "#999",//字体颜色
 "selectedColor": "#000000",//选中后的字体颜色
 "backgroundColor": "#FFF",//背景颜色
 "list": [{//组件集合
 "pagePath": "pages/index/index",//路径
 "text": "组件",//名称
 "iconPath": "static/c1.png",//图标
 "selectedIconPath": "static/c1.png"//选中后的图标
 }, {
 "pagePath": "pages/text/text",
 "text": "接口",
 "iconPath": "static/c2.png",
 "selectedIconPath": "static/c2.png"
 }]
 }
}</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130204353574-1038598496.png" alt="" width="372" height="645" loading="lazy">
5.7：接口
前言：作为一个合格的程序员，哪有不会对接第三方接口的道理，那么微信小程序官方，也为我们开发者贴心的准备了很多有用的接口给大家，供大家参考
官方接口地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.pluginLogin.html
实例演示：wx.getUserProfile
注：微信更新到8.0.29版本以后，wx.getUserProfile 就不弹出授权窗口了。8.0.29版本的基础库为2.27.2
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130225418312-193525694.png" alt="" width="285" height="429" loading="lazy">
完整代码：
<div class="cnblogs_code">
<pre><template>
<view>
 <view class="login-bg">
 <view class="login-body" open-type="getUserInfo" @click="getUser">
 微信授权登陆
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {}
 },
 methods: {
 getUser(e) {
 wx.getUserProfile({
 desc: '用于完善会员资料',
 success: (res) => {
 console.log(res)
 }
 })
 },
 }
}
</script>

<style>
</style></pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230130225113152-214322678.png" alt="" width="1197" height="529" loading="lazy">
 
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h1>四、视频</h1>
【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a
<h1>五、作业</h1>
(1)、完成微信发现页的页面布局
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160154510-287743340.jpg" alt="" width="420" height="933" loading="lazy">
 注意选项卡、与分组，尽量把信息存放在一个数组中，通过for属性遍历出内容。
(2)、完成下面的页面布局
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160856906-1373798867.png" alt="" width="424" height="746">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160533881-796771547.png" alt="" loading="lazy">
(3)、完成一个猜数字游戏
首页是菜单选择页，共包含3个按钮，具体内容解释如下： 开始游戏：点击跳转到游戏页面； 游戏规则：点击跳转到游戏规则页面； 关于我们：点击跳转到关于我们页面。
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160856843-1771493118.png" alt="" width="331" height="584">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160856877-1962834848.png" alt="" width="334" height="590">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160856882-1916534748.png" alt="" width="333" height="587">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418160856877-120185311.png" alt="" width="330" height="583"> 
来源：https://www.cnblogs.com/best/p/17325821.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发学习笔记（二）——小程序框架、组件、WXML