微信小程序开发教程

小程序的宿主环境 - 组件

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
1. 什么是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

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上文字的默认(未选中)颜色

tabBar 节点的配置项 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

属性类型必填默认值描述

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

未完，，后补