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

相关推荐
swipe11 分钟前
AI 应用里的 Memory,不是“保存聊天记录”,而是管理上下文预算
前端·llm·agent
慧一居士26 分钟前
nuxt3 项目和nuxt4 项目区别和对比
前端·vue.js
威联通安全存储1 小时前
破除“重前端、轻底层”的数字幻象:如何夯实工业数据的物理底座
前端·python
inksci1 小时前
Js生成安全随机数
前端·微信小程序
吴声子夜歌2 小时前
TypeScript——泛型
前端·git·typescript
寒秋花开曾相惜2 小时前
(学习笔记)3.8 指针运算(3.8.3 嵌套的数组& 3.8.4 定长数组)
java·开发语言·笔记·学习·算法
猩猩程序员2 小时前
Pretext:一个绕过 DOM 的纯 JavaScript 排版引擎
前端
竹林8182 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑实录
前端·javascript
是翔仔呐2 小时前
第11章 显示外设驱动:I2C协议OLED屏、SPI协议LCD屏字符/图片/中文显示
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee
_李小白2 小时前
【AI大模型学习笔记之平台篇】第五篇:Trae常用模型介绍与性能对比
人工智能·笔记·学习