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

相关推荐
雯0609~几秒前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ4 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z9 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
CV学术叫叫兽16 分钟前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年27 分钟前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
彭世瑜33 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40434 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish35 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five36 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序36 分钟前
vue3 封装request请求
java·前端·typescript·vue