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

相关推荐
Redstone Monstrosity2 分钟前
字节二面
前端·面试
李小星同志4 分钟前
高级算法设计与分析 学习笔记6 B树
笔记·学习
东方翱翔9 分钟前
CSS的三种基本选择器
前端·css
霜晨月c16 分钟前
MFC 使用细节
笔记·学习·mfc
小江湖199429 分钟前
元数据保护者,Caesium压缩不丢重要信息
运维·学习·软件需求·改行学it
Fan_web32 分钟前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
风等雨归期38 分钟前
【python】【绘制小程序】动态爱心绘制
开发语言·python·小程序
yanglamei196240 分钟前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue
前端·数据库·flask
千穹凌帝41 分钟前
SpinalHDL之结构(二)
开发语言·前端·fpga开发
dot.Net安全矩阵1 小时前
.NET内网实战:通过命令行解密Web.config
前端·学习·安全·web安全·矩阵·.net