微信小程序——页面配置，全局配置—tabBar,页面配置,网络数据请求,配置 request 合法域名,发起GET POST 请求,跳过 request 合法域名校验,关于跨域和 Ajax 的说明_小程序tabbar权限 和 web 权限 序列图

一.页面配置

1．页面配置文件的作用

小程序中，每个页面都有自己的 json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2．页面配置和全局配置的关系

小程序中， appjson 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，"页面级别的． json 配置文件"就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3.页面配置中常用的配置项

二. 全局配置—tabBar

1．什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

．底部 tabBar

．顶部 tabBar

注意：

. tabBar 中只能配置最少2个、最多5个 tab 页签．

当渲染顶部 tabBar 时，不显示 icon ，只显示文本

2.tabBar的六个组成部分

backgroundColor : tabBar 的背景色

selectedlconPath ：选中时的图片路径

borderStyle : tabBar 上边框的颜色

iconPath ：未选中时的图片路径

selectedColor : tab 上的文字选中时的颜色

color : tab 上文字的默认（未选中）颜色

3.tarBar节点的配置项

4.每个tab项的配置选项

案例：配置tabBar

1.需求描述

在底部设置三个tabBar图标

2．实现步骤

1.拷贝图标资源

2.新建3个对应的 tab 页面

3.配置 tabBar 选

3.1 步骤1﹣拷贝图标资源

把资料目录中的 images 文件夹，拷贝到小程序项目根目录中

将需要用到的小图标分为3组，每组两个，其中：

图片名称中包含﹣ active 的是选中之后的图标.

图片名称中不包含﹣ active 的是默认图标截图如下：

3.2 步骤2﹣新建3个对应的 tab 页面

通过 appjson 文件的 pages 节点，快速新建3个对应的 tab 页面，示例代码如下：

页签必须放到头部，否则不会渲染

其中， list 是首页， test 是消息页面， index 是联系我们页面。

3.3 步骤3﹣配置 tabBar 选项

打开 app . json 配置文件，和 pages 、 window 平级，新增 tabBar 节点.

DtabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象）

在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

1. pagePath 指定当前 tab 对应的页面路径［必填］

2.text 指定当前 tab 上按钮的文字【必填］

3.iconPath 指定当前 tab 未选中时候的图片路径［可选］

4.selectedlconPath 指定当前 tab 被选中后高亮的图片路径[可选]

在app.json中写下代码如下：

"tabBar": {
    "list": [{
      "pagePath": "pages/list/list",
      "text": "首页",
      "iconPath": "images/tabs/home.png",
      "selectedIconPath": "images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/test/test",
      "text": "消息",
      "iconPath": "images/tabs/message.png",
      "selectedIconPath": "images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "联系我们",
      "iconPath": "images/tabs/contact.png",
      "selectedIconPath": "images/tabs/contact-active.png"
    }

实现效果如下：

三.页面配置

1．页面配置文件的作用

小程序中，每个页面都有自己的 json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2．页面配置和全局配置的关系

小程序中， appjson 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，时，"页面级别的 json 配置文件"就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3.页面配置中常用的配置项

四.网络数据请求

1．小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

a.只能请 HTPS 类型的接口

b.必须将接口的域名添加到信任列表中

2．配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求https://www.escook.cn／域名下的接口

配置步骤：登录微信小程序管理后台﹣＞开发﹣＞开发设置﹣＞服务器域名﹣＞修改 request 合法域名

注意事项：

1.域名只支持 https 协议

2.域名不能使用 IP 地址或 localhost

3.域名必须经过 ICP 备案

4.服务器域名一个月内最多可申请5次修改

3．发起 GET 请求

调用微信小程序提供的 wx . request (）方法，可以发起 GET 数据请求，示例代码如下：

在.wxml中添加一个button按钮：

效果如下图所示：

3．发起 POST 请求

调用微信小程序提供的 wx . request (）方法，可以发起 POST 数据请求，示例代码如下：

在.wxml中添加一个button按钮：

<button bindtap="postInfo">发起POST请求</button> 

效果如下：

4.在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。

此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

5．跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、 TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

注意：

跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

6．关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做"发起 Ajax 请求"，而是叫做"发起网络数据请求"。