【微信小程序】页面配置,网络数据请求

简介: 页面配置🍓1. 页面配置文件的作用🍒2. 页面配置和全局配置的关系🍍3. 页面配置中常用的配置项网络数据请求🧅1. 小程序中网络数据请求的限制🥦2. 配置 request 合法域名🍊3. 发起 GET 请求🍉4. 发起 POST 请求🥝5. 在页面刚加载时请求数据

页面配置


🍓1. 页面配置文件的作用


小程序中,每个页面都有自己的 .json 配置文件,用来对 当前页面 的窗口外观、页面效果等进行配置。


🍒2. 页面配置和全局配置的关系


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


如果某些小程序页面 想要拥有特殊的窗口表现 ,此时,“ 页面级别的 .json 配置文件 ”就可以实现这种需求。



注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。


🍍3. 页面配置中常用的配置项


属性 类型 默认值 描述


navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色,如 #000000

navigationBarTextStyle String white 当前页面导航栏标题颜色,仅支持 black / white

navigationBarTitleText String  当前页面导航栏标题文字内容

backgroundColor HexColor #ffffff 当前页面窗口的背景色

backgroundTextStyle String dark 当前页面下拉 loading 的样式,仅支持 dark / light

enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新的效果

onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px


网络数据请求


🧅1. 小程序中网络数据请求的限制


出于 安全性 方面的考虑,小程序官方对 数据接口的请求 做出了如下

两个限制:


① 只能请求 HTTPS 类型的接口


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


🥦2. 配置 request 合法域名


需求描述:假设在自己的微信小程序中,希望请求 https://www.escook.cn/ 域名下的接口


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


注意事项:


① 域名只支持 https 协议


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


③ 域名必须经过 ICP 备案


④ 服务器域名一个月内最多可申请 5 次修改

🍊3. 发起 GET 请求


调用微信小程序提供的 wx. request () 方法,可以发起 GET 数据请求,示例代码如下:

  get(){
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method:'GET',
      data:{
        name:'热爱编程的小白白',
        age:21
      },
      success: (res)=> {
        console.log(res.data)
        }
    })
  },

WXML:

<button bindtap="get">GET请求</button>

效果:



🍉4. 发起 POST 请求


调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求,示例代码如下:

  get(){
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:'POST',
      data:{
        name:'热爱编程的小白白',
        age:21
      },
      success: (res)=> {
        console.log(res.data)
        }
    })
  },




🥝5. 在页面刚加载时请求数据


在很多情况下,我们需要 在页面刚加载的时候 , 自动请求一些初始化的数据 。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:

相关文章
|
30天前
|
前端开发 小程序 Java
uniapp-网络数据请求全教程
这篇文档介绍了如何在uni-app项目中使用第三方包发起网络请求
45 3
|
3月前
|
安全 算法 网络安全
量子计算与网络安全:保护数据的新方法
量子计算的崛起为网络安全带来了新的挑战和机遇。本文介绍了量子计算的基本原理,重点探讨了量子加密技术,如量子密钥分发(QKD)和量子签名,这些技术利用量子物理的特性,提供更高的安全性和可扩展性。未来,量子加密将在金融、政府通信等领域发挥重要作用,但仍需克服量子硬件不稳定性和算法优化等挑战。
|
3月前
|
存储 安全 网络安全
云计算与网络安全:保护数据的新策略
【10月更文挑战第28天】随着云计算的广泛应用,网络安全问题日益突出。本文将深入探讨云计算环境下的网络安全挑战,并提出有效的安全策略和措施。我们将分析云服务中的安全风险,探讨如何通过技术和管理措施来提升信息安全水平,包括加密技术、访问控制、安全审计等。此外,文章还将分享一些实用的代码示例,帮助读者更好地理解和应用这些安全策略。
|
3月前
|
安全 网络安全 数据安全/隐私保护
网络安全与信息安全:从漏洞到加密,保护数据的关键步骤
【10月更文挑战第24天】在数字化时代,网络安全和信息安全是维护个人隐私和企业资产的前线防线。本文将探讨网络安全中的常见漏洞、加密技术的重要性以及如何通过提高安全意识来防范潜在的网络威胁。我们将深入理解网络安全的基本概念,学习如何识别和应对安全威胁,并掌握保护信息不被非法访问的策略。无论你是IT专业人士还是日常互联网用户,这篇文章都将为你提供宝贵的知识和技能,帮助你在网络世界中更安全地航行。
|
3月前
|
弹性计算 安全 容灾
阿里云DTS踩坑经验分享系列|使用VPC数据通道解决网络冲突问题
阿里云DTS作为数据世界高速传输通道的建造者,每周为您分享一个避坑技巧,助力数据之旅更加快捷、便利、安全。本文介绍如何使用VPC数据通道解决网络冲突问题。
168 0
|
27天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
81 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
567 3

热门文章

最新文章