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):非必须,接口调用结束的回调函数(调用成功、失败均执行)