小程序的宿主环境 - 组件
1.小程序中组件的分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：
①视图窗口
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas画面组件
⑧开放能力
⑨无障碍访问
- 常用的视图容器类组件
①view
● 普通视图区域
● 类似于HTML中的div,是一个块级元素
● 常用来实现页面的布局效果
②scroll-view
● 可滚动的视图区域
● 常用来实现滚动列表效果
③swiper和swiper-item
● 轮播图容器组件和轮播图item组件
3.view组件的基本使用
实现flex横向布局效果：
app.json
javascript
"pages": [
"pages/view/view"
],view.wxml
javascript
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>view.wxss
javascript
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color:lightgreen;
}
.container1 view:nth-child(2) {
background-color:lightskyblue;
}
.container1 view:nth-child(3) {
background-color:lightcoral;
}
.container1 {
display: flex;
justify-content: space-around;
}4 scroll-view组件的基本使用
实现纵向滚动效果
scrollview.wxml
javascript
<!--pages/scrollview/scrollview.wxml-->
<!-- scroll-y 属性： 允许纵向滚动-->
<!-- scroll-x 属性： 允许横向滚动-->
<!-- 注意： 使用竖向滚动时，必须给scroll-view 一个固定高度-->
<scroll-view class="container1" scroll-y="true">
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>/scrollview.wxss
javascript
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1) {
background-color: lightgreen;
}
.container1 view:nth-child(2) {
background-color: lightskyblue;
}
.container1 view:nth-child(3) {
background-color: lightcoral;
}
.container1 {
border: 1px solid red;
/* scroll-view 固定高度 */
height: 120px;
width: 100px;
}5.swiper和swiper-item组件的基本使用
实现轮播图效果
swiper.wxml
javascript
<text>pages/swiper/swiper.wxml</text>
<!--轮播图区域-->
<!--indicator-dots 属性： 显示面板指示点-->
<swiper class="cwiper-container" indicator-dots="true" indicator-color="witer" indicator-active-color="gray" autoplay interal="3000" circular>
<!--第一项-->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!--第二项-->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!--第三项-->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>swiper.wxss
javascript
/* pages/swiper/swiper.wxss */
.swiper-container {
height: 150px; /*轮播图容器的高度*/
}
.item{
height: 100px;
line-height: 100px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
background-color:lightcoral;
}6.swiper组件的常用属性
参见： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
- 常用的基础内容组件
① text
● 文本组件
● 类似于HTML中的span标签，是一个行内元素
② rich-text
● 富文本组件
● 支持把HTML字符串渲染为WXML结构 - text组件的基本使用
通过text组件的selectable属性，实现长按选中文本内容的效果：
text.wxml
javascript
<!--pages/text/text.wxml-->
<text>pages/text/text.wxml</text>
<!--常用的基础内容组件text和rich-text的用法 -->
<text>pages/text/text.wxml</text>
<view>
手机号支持长按选中效果
<text selectable="true">13992845134</text>
</view>9、rich-text组件的基本使用
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构。
text.wxml
javascript
<!--rich-text 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构-->
<!--应用场景：商品详细页的结构渲染-->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>10、其它常用组件
① button
● 按钮组件
● 功能比 HTML 中的 button 按钮丰富
● 通过 open-type 属性可以调用微信提供的各种功能( 客服、转发、获取用户授权、获取用户信息等)
② image
● 图片组件
● image组件默认宽度约300px, 高度约240px
③ navigator
● 页面导航组件
● 类似于HTML中的 a 链接
11、button按钮的基本使用
button.wxml
javascript
<!--pages/button/button.wxml-->
<text>pages/button/button.wxml</text>
button
按钮组件
功能比HTML中的Button按钮丰富
通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
<view>~~~~~~~通过type指定按钮类型~~~~~~~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>~~~~~~size="mini" 小尺寸按钮~~~~~~~~~~</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>~~~~~~~~plain 镂空按钮~~~~~~~~</view>
<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>12、image组件的基本使用
image.wxml
javascript
<!--pages/image/image.wxml-->
<text>pages/image/image.wxml</text>
<text>
image
图片组件
image 组件默认宽度约 300px、高度约240px
</text>
<!-- 1. 空图片-->
<image></image>
<!-- 2. 使用src指定图片路径 -->
<image src="/image/22022312542M617-0-lp.jpg" mode="aspectFill"></image>
<text>
</text>
<text>
navigator
</text>image.wxss
javascript
/* pages/image/image.wxss */
image {
/* 通过边框线证明image有默认的宽和高 */
border: 1px solid red;
}13、image组件的mode属性
image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下:
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
小程序的宿主环境 - API
1.小程序API概述
小程序中的API是由宿主环境提供的，通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力，
例如：获取用户信息，本地存储，支付功能等。
2.小程序API的3大分类
小程序官方把API分为了如下3大类:
① 事件监听API
特点： 以on开头，用来监听某些事件的触发
举例： wx.onWindowResize(function callback)监听窗口尺寸变化的事件
② 同步API
特点1：以sync结尾的API都是同步API
特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行错会抛出异常
举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
③ 异步API
特点：类似于Jquery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
举例：wx.request()发起网络数据请求，通过success回调函数接收数据
协同工作和发布
协同工作和发布 - 协同工作
1.了解权限管理需求
同一小程序项目，一般会有不同岗位，不同角色的员工同时参与设计与开发。
对不同岗位、不同角色的员工的权限进行边界的划分，使他们能免高效的进行协同工作。
2.了解项目成员的组织结构
3.小程序的开发流程
提出需求 -> 设计 -> 开发 -> 体验 -> 测试 -> 发布
协同工作和发布 - 小程序成员管理
1.成员管理的两个方面
小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
① 项目成员：
● 表示参与小程序开发、运营的成员
● 可登录小程序管理后台
● 管理员可以添加、删除项目成员，并设置项目成员的角色
② 体验成员：
● 表示参与小程序内测体验的成员
● 可使用体验版小程序，但不属于项目成员
● 管理员及项目成员均可添加、删除体验成员
2.不同项目成员对应的权限
3.开发者的权限说明
① 开发者权限：可使用小程序开发者工具及对小程序的功能进行代码开始
②体验者权限：可使用体验版小程序
③登录权限：可登录小程序管理后台，无需管理员确认
④开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
⑤腾讯云管理：云开发相关设置
4.添加项目成员和体验成员
协同工作和发布 - 小程序的版本
1.软件开发过程中的不同版本
①开发者编写代码的同时，对项目代码进行自测(开发版本)
②直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
③最后修复完程序的Bug后，发布正式版供处部用户使用
2.小程序的版本
小程序版本
开发版本---体验版本--审核中的版本--线上版本
小程序发布上线：上传代码>提交审核>发布
协同工作和发布 - 发布上线
1.小程序发布上线的整体步骤
一个小程序的发布上线，一般要经过上传代码 -> 提交审核 -> 发布 这三个步骤。
2.上传代码
① 点击开发者工具顶部工具栏中的"上传"按钮
②填写版本号以及项目备注
3.在后台查看上传之后的版本
登录小程序管理后台 -> 管理 -> 版本管理 ->开发版本，即可查看刚才提交上传的版本。
4.提交审核
● 为什么需要提交审核：为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方审核的。
● 提交审核的方式：在开发版本的列表中，点击"提交审核"按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核。
5.发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时在审核版本的列表中，点击"发布"按钮之后，即可把"审核通过"的版本发布为"线上版本"，供所有小程序用户访问和使用。
6.基于小程序进行推广
相对于普通二维码来说，小程序码的优势如下：
①在样式上更具辨识度和视觉冲击力
②能够更加清楚地树立小程序的品牌形象
③可以帮助开发者更好地推广小程序
获取小程序码的5个步骤：
登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载
协同工作和发布 - 运营数据
1.查看小程序运营数据的两种方式
① 在"小程序后台"查看
-
登录小程序管理后台
-
点击侧边栏的"统计"
-
点击相应的tabl可以看到相关的数据
② 使用"小程序数据助手"查看
1.打开微信
2.搜索"小程序数据助手"
3.查看已发布的小程序相关的数据
WXML模板语法
WXSS模板样式
全局配置
页面配置
网络数据请求
案例 - 本地生活首页
小程序 - 模板与配置
WXML模板语法
WXML模板语法 - 数据绑定
1.数据绑定的基本原则
①在data中定义数据
②在WXML中使用数据
2.在data中定义页面的数据
在页面对应的 .js 文件中，把数据定义到data对象中即可.
databind.js
javascript
// pages/databind/databind.js
Page({
/**
- 页面的初始数据
*/
data: {
info: "微信小程序",
imgSrc: "https://img2.baidu.com/it/u=3215730428,3406193656&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
randomNum1: Math.random() * 10, //生成10以内的随机数
randomNum: Math.random().toFixed(2) //生成一个带两位小数的随机数，例如0.34
},
...
)- Mustache 语法的格式
把data中的数据绑定到页面中渲染，使用 Mustache 语法 (双大括号) 将变量包起来即可。语法格式为： {{ 要绑定的数据名称 }}
databind.wxml
javascript
<!--pages/databind/databind.wxml-->
<text>pages/databind/databind.wxml</text>
<text>
数据绑定的基本原则
在data中定义数据
在WXML使用数据
在data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可
</text>4、Mustache语法的应用场景
绑定内容
绑定属性
运算(三元运算、算法运算等)
5、动态绑定内容
javascript
<view>{{info}}</view>6、动态绑定属性
javascript
<image src="{{imgSrc}}" mode="aspectFull"></image>7、三元运算
javascript
<view>{{randomNum1 >= 5 ? '随机数字大于或等于5': '随机数字小于5'}}</view>
<view>{{randomNum1}}</view>8、算术运算
javascript
<view>{{randomNum * 100}}</view>WXML模板语法 - 事件绑定
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2.小程序中常用的事件
tap bindtap或bind:tap 手指触摸后马上离开，类似于HTML中的click事件
input bindinput或bind:input 文本框的输入事件
change bindchange或bind:change 状态改变时触发
- 事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象event, 它的详细属性如下表所示：
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组
- target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。如：
javascript
<view class="outer-view" bind:tap="outerHandler">
<button type="primary">按钮</button>
</view>点击内部的按钮时，点事事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
此时，对于外层的view来说：
- e.target指向的是触发事件的源头组件，因此, e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
- bingtap 的语法格式
在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
①通过bindtap, 可以为组件绑定tap触摸事件，语法如下：
javascript
<button type="primary" bind:tap="btnTapHandler">按钮</button>②在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般简写成 e）来接收:
javascript
/**
* 定义按钮的事件处理函数
*/
Page({
btnTapHandler(e) {
console.log(e) //事件参数对象
},
})- 在事件处理函数中为data中的数据赋值
通过调用 this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下:
javascript
Page({
data: {
count: 0
},
//+1按钮的点击事件处理函数
CountChange() {
this.setData(
{
count: this.data.count + 1
}
)
},
javascript
<button type="primary" bind:tap="CountChange">+1</button>- 事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。
可以为组件提供data-自定义属性传参， 其中 代表的是参数的名字，
最终：
info会被解析为参数的名字
数值2会被解析为参数的值
javascript
<button type="primary" bind:tap="bntTap2" data-info="{{2}}">事件传参</button>在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值
javascript
bntTap2(e) {
// dataset是一个对象，包含了所有通过 data-* 传递过来的参数项
console.log(event.target.dataset)
// 通过dataset可以访问到具体参数的值
console.log(event.target.dataset.info)
this.setData({count :this.data.count + e.target.dataset.info})
},- bindinput的语法格式
在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：
①通过bindinput, 可以为文本框梆定输入事件
javascript
<input bindinput="inputHandler"></input>② 在页面的.js文件中定义事件处理函数：
javascript
//input输入框的事件处理函数
inputHandler(e) {
//e.detail.value 拿到文本框最新的值
console.log(e.detail.value)
},- 实现文本框和data之间的数据同步
实现步骤：
①定义数据
javascript
Page({
data: {
msg: "您好"
},
...
})② 渲染结构
javascript
<input value="{{msg}}" bindinput="ipHandler"></input>③ 美化样式
javascript
input {
border:1px solid #eeeeee;
margin: 5px;
padding: 5px;
border-radius: 3px;
}④ 绑定input事件处理函数
javascript
ipHandler(e) {
this.setData({
msg:e.detail.value
})
}WXML 模板语法 - 条件渲染
- wx:if
在小程序中， 使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
javascript
<view wx:if="{{condition}}">True</view>也可以用wx.elif和wx:else来添加else判断
javascript
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>- 结合<block>使用wx:if
如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx:if控制属性，
javascript
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>注意： block 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染
- hidden
在小程序中，直接使用hidden="{{condition}}" 也能控制元素的显示与隐藏
javascript
<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>4.wx:if 与 hidden 的对比
① 运行方式不同
● wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
● hidden 以切换样式的方式(display:none/block), 控制元素的显示与隐藏 -->
② 使用建议
● 频繁切换时，建议使用hidden
● 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换
WXML模板语法 - 列表渲染
- wx:for
通过wx:for可以根据指定的数组，循环渲染重复的组件结构
javascript
Page({
data: {
arry1: ['苹果', '小米', '华为']
}
})
javascript
<view wx:for="{{arry1}}">
索引是: {{index}}, 当前项是： {{item}}
</view>默认情况下，当前循环项的索引用index表示; 当前循环项用item表示
- 手动指定索引和当前项的变量名
● 使用wx:for-index可以指定当前循环项的索引的变量名
● 使用wx:for-item可以指定当前项的变量名
javascript
<view wx:for="{{arry1}}" wx:for-index="idx" wx:for-item="itemName">
索引是: {{idx}}, 当前项是： {{itemName}}
</view>- wx:key的使用
类似于Vue列表渲染中的:key, 小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率
javascript
<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>
javascript
Page({
data: {
userList:[
{ id:1, name:'小王'},
{ id:2, name:'小黄'},
{ id:1, name:'小张'}
]
}
})
javascript
@import "/common/common.wxss";WXSS模板样式
- 什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。 - WXSS和CSS的关系
WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
与CSS相比，WXSS扩展的特性有：
● rpx尺寸单位
● @import样式导入
WXSS模板样式 - rpx- 什么是rpx尺寸单位
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位
2.rpx实现原理
rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即：当前屏幕的总宽度为750rpx)
● 在较小的设备上， 1rpx所代表的宽度较小
● 在较大的设备上， 1rpx所代表的宽度较大
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配
3.rpx与px之间的单位换算
在iPone6上，屏幕宽度为375px, 共有750个物理像素，等分为750rpx。则：
750rpx = 375px = 750物理像素
1rpx = 0.5 px = 1 物理像素
详细参见：https://blog.csdn.net/jiaojiaoiso/article/details/121980614
WXSS模板样式 - 样式导入
1.什么是样式导入 -->
使用WXSS提供的@import语法， 可以导入外联的样式表
2.@import的语法格式-->
@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
/common/common.wxss
- 什么是rpx尺寸单位
javascript
.username {
color:red;
}
javascript
@import "/common/common.wxss";
javascript
<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>WXSS模板样式 - 全局样式和局部样式
1.全局样式
定义在app.wxss中的样式为全局样式，作用于每一个页面
javascript
view {
padding: 10rpx;
margin: 10rpx;
background-color: lightskyblue;
}2.@局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
javascript
view {
color:white;
}
javascript
<view>123</view>
<view>354</view>注意：
1.当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
2.当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
全局配置
1.全局配置文件及常用的配置项
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
pages: 记录当前小程序所有页面的存放路径
window：全局设置小程序窗口的外观 tabBar：设置小程序底部的tabBar效果
style: 是否启用新版的组件样式
全局配置 - window
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
1.小程序窗口的组成部分
navigationBar 导航栏区域
background 背景区域 默认不可见，下拉才显示
页面的主体区域 用来显示wxml的布局
2.了解window节点常用的配置项
属性 类型 默认值 描述 -->
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh boolean false 是否开启全局的下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为 px。详见 Page.onReachBottom
3.设置导航栏的标题
设置步骤： app.json -> window -> navigationBarTitleText
需求：把导航条上的标题文字， 从默认的 "WeChat" 修改为 "天天学习" "-->
4.设置导航栏的背景色
设置步骤： app.json -> window -> navigationBarBackgroundColor
需求：把导航条的背景颜色， 从默认的 #fff 修改为 2b4b6b "
5.设置导航栏的标题颜色
设置步骤： app.json -> window -> navigationBarTextStyle
需求：把导航条上的标题， 从默认的 black 修改为 white "
6.全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意：在app.json中启动下拉刷新功能，会作用于每个小程序页面
7.设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色
设置步骤：app.json -> window -> 把 backgroundColor 指定16进制的颜色值 #efefef
8.设置下拉刷新时loading的样式
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，
设置步骤：app.json -> window -> 为 backgroundTextStyle 指定 dark 值。
注意：backgroundTextStyle 的可选值只有 light 和 dark
9.设置上拉触底的距离
概念： 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
设置步骤：app.json -> window -> 为 onReachBottomDistance 设置新的数值。
注意：默认距离为 50px, 如果没有特殊需求，建议使用默认值即可
全局配置 - tabBar
- 什么是tabBar
tabBar是移动端应用觉的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
底部 tabBar
顶部 tabBar
注意： tabBar中只能配置最少2个、最多5个tab页签
当渲染顶部tabBar时，不显示icon, 只显示文本
- tabBar的6个组成部分
backgroundColor: tabBar的背景色
selectedIconPath: 选中时的图片路径
iconPath: 未选中时的图片路径
selectedColor： tab上的文字选中时的颜色
color: tab上文字的默认(未选中)颜色
属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position string 否 bottom tabBar 的位置，仅支持 bottom / top
4.每个tabl项的配置选项
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
属性 类型 必填 说明
pagePath string 是 页面路径，必须在 pages 中先定义
text string 是 tab 上按钮文字
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
页面配置 https://www.itxiaonv.com/?m=202112
未完，， 后补