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

本文涉及的产品
.cn 域名,1个 12个月
简介: 页面配置🍓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 事件中调用获取数据的函数,示例代码如下:

相关文章
|
4天前
|
存储 安全 网络安全
云计算与网络安全:守护数据,构筑未来
在当今的信息化时代,云计算已成为推动技术革新的重要力量。然而,随之而来的网络安全问题也日益凸显。本文从云服务、网络安全和信息安全等技术领域展开,探讨了云计算在为生活带来便捷的同时,如何通过技术创新和策略实施来确保网络环境的安全性和数据的保密性。
|
7天前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习与神经网络:探索复杂数据的表示
【9月更文挑战第26天】深度学习作为人工智能领域的明珠,通过神经网络自动从大数据中提取高级特征,实现分类、回归等任务。本文介绍深度学习的基础、张量表示、非线性变换、反向传播及梯度下降算法,并探讨其在计算机视觉、自然语言处理等领域的应用与挑战。未来,深度学习将更加智能化,揭示数据背后的奥秘。
|
6天前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
6天前
|
缓存 网络协议 网络架构
网络抓包分析【IP,ICMP,ARP】以及 IP数据报,MAC帧,ICMP报和ARP报的数据报格式
本文详细介绍了如何使用网络抓包工具Wireshark进行网络抓包分析,包括以太网v2 MAC帧、IP数据报、ICMP报文和ARP报文的格式,以及不同网络通信的过程。文章通过抓包分析展示了IP数据报、ICMP数据报和ARP数据报的具体信息,包括MAC地址、IP地址、ICMP类型和代码、以及ARP的硬件类型、协议类型、操作类型等。通过这些分析,可以更好地理解网络协议的工作机制和数据传输过程。
网络抓包分析【IP,ICMP,ARP】以及 IP数据报,MAC帧,ICMP报和ARP报的数据报格式
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
312 65
ly~
|
7天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
38 6
|
6天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
20天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。
|
27天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
下一篇
无影云桌面