小程序学习day07-页面配置、网络数据请求、页面导航-声明式导航、编程式导航

31、页面配置

（1）作用：用来对当前页面的窗口外观、页面效果等进行配置。

（2）页面配置与全局配置的联系

        1）小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现

        2）如果某些小程序页面需要特殊的窗口表现，可以通过“页面的.json文件”实现

        3）二者冲突时，采用“就近原则”，以页面配置为准

（3）页面配置中的常用配置项

已知：

1）navigationBarBackgroundColor（HexColor）：默认值#000000，当前导航栏背景颜色

2）navigationBarTexrStyle（String）：默认值white，当前导航栏标题颜色，仅支持black/white

3）navigationBarTitleText（String）导航栏标题文字内容

4）backgroundColor（HexColor）：默认值#ffffff，当前窗口的背景色（下拉刷新时可以看见）

5）backgroundTextStyle（String）：默认值dark，当前页面下拉loading样式（小圆点），仅支持dark/light

6）enablePullDownRefresh（Boolean）：默认值false,当前页面是否开启下拉刷新

（false关闭）

7）onReachBottomDistance（Number）：默认值50，页面上拉触底事件触发时距底 部的距离，单位为px（无特殊需求，不建议修改）

32、网络数据请求

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

        1）只能请求HTTPS类型的接口

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

（2）配置request合法域名

        1）配置步骤：

        ①非测试号

登录微信小程序管理后台——>开发——>开发设置——>服务器域名——>修改request合法域名

        ②测试号

登录微信小程序管理后台——>服务器域名修改request合法域名

在这里查看：

2）注意事项

①域名只支持https协议

②域名不能使用IP地址或localhost

③域名必须经过ICP备案

④服务器域名一个月配置修改次数有限制

（3）发送请求

        1）GET请求

通过wx.request（）方法发起

        2）POST请求

通过wx.request（）方法发起

①绑定方法

②在方法中发起请求

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

通过页面js文件中的onLoad实现

（5）跳过request合法域名的校验（仅在开发调试阶段使用）

1）作用：在http协议的接口，没有https协议的接口时，临时开启【开发环境不校验请求域名、TLS版本及HTTPS证书】一项，跳过request合法域名的校验

（6）关于跨域与Ajax的说明

        1）跨域问题只存在于浏览器的web开发中，小程序的宿主环境不是浏览器，是手机客户端，所以小程序中不存在跨域问题

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

33、页面导航

（1）概念：页面之间的相互跳转，比如浏览器的页面导航方式：超链接和location.href

（2）方法

1）声明式导航（点击声明的<navigator>组件实现页面跳转）

已知：

①导航到tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性（跳转的页面地址，必须以/开头）和open-type属性（跳转方式，必须为switchTab）

②导航到非tabBar页面

在使用<navigator>组件跳转到普通的非tabBar页面时，需要指定url属性（跳转的页面地址，必须以/开头）和open-type属性（跳转方式，必须为navigate）

（为了简便，在导航到非tabBar页面时，open-type=”navigate”可以省略）

③后退导航

如果要后推到上一级页面或者多级页面，需要指定open-type属性（必须为navigateBack，表示要进行后台导航）和delta属性（必须是数字，表示后退的层级）

（为了简便，如果知识后退到上一页面，则可以省略delta属性，因为其默认值为1）

2）编程式导航（调用小程序的导航API实现页面跳转）

①导航到tabBar页面

        调用wx.switchTab(Object object)方法，可以跳转到tabBar页面，Object参数如下：

        url（String）：必选参数，需要跳转的tabBar页面的路径，路径后不带参数

        success（function）：非必须，接口调用成功的回调函数

        fail（function）：非必须，接口调用失败的回调函数

        complete（function）：非必须，接口调用结束的回调函数（调用成功、失败均执行）

②导航到非tabBar页面

调用wx.navigateTo(Object object)方法，可以跳转到非tabBar页面，Object参数如下：

        url（String）：必选参数，需要跳转到非tabBar页面的路径，路径后不带参数

        success（function）：非必须，接口调用成功的回调函数

        fail（function）：非必须，接口调用失败的回调函数

        complete（function）：非必须，接口调用结束的回调函数（调用成功、失败均执行）

③后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面 ，Object参数如下：

        delta（number）：非必须，返回的页面数，如果delta大于现有页数，则返回到首页

        success（function）：非必须，接口调用成功的回调函数

        fail（function）：非必须，接口调用失败的回调函数

        complete（function）：非必须，接口调用结束的回调函数（调用成功、失败均执行）