【微信小程序】一文带你搞懂小程序的页面配置和网络数据请求

这篇具有很好参考价值的文章主要介绍了【微信小程序】一文带你搞懂小程序的页面配置和网络数据请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

页面配置

每个小程序页面都有一个.json文件,该文件用来对小程序的页面进行配置。

页面配置文件的作用

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

页面配置和全局配置的关系

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

如:当在app.json中全局配置导航栏的文字为苏凉时,此时每个页面的导航栏标题都为苏凉

微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json配置文件”就可以实现这种需求。

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

页面配置

在页面配置文件(.json)中我们可以通过修改以下属性来配置页面文件。

属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor Hexcolor #000000 导航栏背景颜色,如#000000
navigationBarTextStyle String white 导航栏标题颜色,仅支持black / white
backgroundColor Hexcolor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading的样式,仅支持dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

如:
微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

网络数据请求

网络数据请求的限制

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

  1. 只能请求HTTPS类型的接口
  2. 必须将接口的域名添加到信任列表中,如下图所示:
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

下面我们一起来看看如何进行域名配置。

配置request合法域名

步骤:

  1. 登录小程序管理后台:微信小程序管理后台
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

  2. 下拉点击开发下的开发设置
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

  3. 下拉找到服务器域名,点击开始配置
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

  4. 微信扫码进行身份验证,手机上点击开启
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络
    5.输入你需要配置的域名,保存并提交。
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络
    此时在服务器域名中存在了刚刚所提交的域名。即设置成功。
    微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

回到微信小程序开发者工具;详情-项目配置-request合法域名中就保存了刚才我们在小程序管理后台中配置的域名了。此时我们就可以在小程序中合法使用这两个域名。
微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

配置服务器域名注意事项:

  1. 域名只支持https协议
  2. 域名不能使用IP地址或localhost
  3. 域名必须经过ICP备案
  4. 服务器域名一个月内最多可申请5次修改(小程序管理后台显示还可修改49次,为显示bug,实际上就只有5次,请谨慎使用。)

发起get/post请求

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

在wxml中给按钮绑定一个单击事件:

<button type="primary" bindtap="Get_request">发起GET请求</button>

通过wx.request方法请求数据。

 Get_request(){
     wx.request({
       url: 'https://suliang.blog.csdn.net', //请求地址
       method:"GET", //请求方式 
       data:{         //发送到服务器的数据
           name:'suliang',
           age:21
       },
       success:(result)=>{    //请求成功后的回调函数
             console.log(result);
       }

     })
 }

点击按钮,get请求成功。
微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

同理:发起POST请求也是如此,只需将method的值修改为PSOT即可。

在页面刚加载时请求数据

在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数。
在页面的.js文件中的监听页面加载设置即可。

   /**
     * 生命周期函数--监听页面加载
     */
 onLoad(options) {
     this.Get_request();
 },

跳过request合法域名校验

如果后端程序员仅仅提供了http 协议的接口、暂时没有提供https协议的接口。

此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启 「开发环境不校验请求域名、TLS版本及HTTPS证书」 选项,跳过request合法域名的校验。

注意:跳过request合法域名校验。仅限在开发和调试阶段使用,正式上线和发布时,仍然需要配置合法的request域名。

微信小程序体验版怎么看网络请求,微信小程序,小程序,微信小程序,网络

关于跨域和ajax请求

跨域:指的是浏览器不能执行其他网站的脚本

  1. 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器而是微信客户端,所以小程序中不存在跨域的问题。

  2. Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”。文章来源地址https://www.toymoban.com/news/detail-784893.html

到了这里,关于【微信小程序】一文带你搞懂小程序的页面配置和网络数据请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C/S、B/S架构详解,一文带你搞懂

      CS架构(Client-Server Architecture)是一种分布式计算模型,其中客户端和服务器之间通过网络进行通信。在这种架构中,客户端负责向服务器发送请求,并接收服务器返回的响应。服务器则负责处理客户端的请求,并返回相应的结果。CS架构通常用于构建大型的网络应用程序,

    2024年02月16日
    浏览(88)
  • 一文带你搞懂PyTorch中所有模型查看的函数model.modules()系列

    model一般继承nn.Model 他的实例一般具有几个有序 字典 , _modules,_parameters,_buffers,表示当前model的子模块,自己注册的parameters和buffers 注意,_modules字典keys对应子模块名字,value对应子模块的实例,所以可以迭代的调用子模块的子模块,比如下面两个函数 因为是字典,所以可

    2024年02月06日
    浏览(47)
  • 【MDX】一文带你搞懂SQL Server Analysis Services 的安装和使用

    目录 Step 1: Install developer and management tools 安装 new stand-alone SQL Server installation or add the feature to an existing installation 安装 SQL Server Management Studio 安装 SSDT 安装 Visual Studio Step 2: Install databases Step 3: Install projects Step 4: 创建项目 Step 5: 定义数据源 Step 6: 部署Analysis Services项目 Step 7: F

    2023年04月08日
    浏览(58)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(70)
  • 手把手带你搞懂AMS启动原理

    彻底搞懂AMS即ActivityManagerService,看这一篇就够了 最近那么多教学视频(特别是搞车载的)都在讲AMS,可能这也跟要快速启动一个app(甚至是提高安卓系统启动速度有关),毕竟作为安卓系统的核心系统服务之一,AMS以及PMS都是很重要的,而我之前在 应用的开端–PackageManag

    2024年02月12日
    浏览(123)
  • 一篇文章带你搞懂前端Cookie

    浏览器Cookie相信各位点进这篇文章的小伙伴应该不陌生了,它是前端领域中一个非常重要的内容,当然也是面试的一个考点,不知道各位小伙伴是否真正掌握了Cookie呢?当然没有掌握也是没有关系的,可以跟着小编的脚步一起来学习一下前端Cookie,没有熟练掌握的小伙伴看完这

    2024年02月04日
    浏览(46)
  • Linux 有哪些搜索方式?5分钟带你搞懂!

    5分钟带你掌握 Linux 的三种搜索方式 1.find 命令 find 命令是用来在给定的目录下查找符合给定条件的文件 语法格式: find [查找起始路径] [查找条件] [处理动作] (1)根据名称查找: find [查找起始路径] -name 文件名 或者 find [查找起始路径] -iname 文件名 -name \\\"PATERN\\\":完全匹配文

    2024年01月16日
    浏览(45)
  • 带你搞懂人工智能、机器学习和深度学习!

    不少高校的小伙伴找我聊入门人工智能该怎么起步,如何快速入门,多长时间能成长为中高级工程师(聊下来感觉大多数学生党就是焦虑,毕业即失业,尤其现在就业环境这么差),但聊到最后,很多小朋友连人工智能和机器学习、深度学习的关系都搞不清楚。 今天更文给大

    2024年02月02日
    浏览(50)
  • 一文让你搞懂javascript如何实现继承

    一、本文想给你聊的东西包含一下几个方面:(仅限于es6之前的语法哈,因为es6里面class这用上了。。) 1.原型是啥?原型链是啥? 2.继承的通用概念。 3.Javascript实现继承的方式有哪些?   二、原型是啥?原型链是啥? 1.原型是函数本身的prototype属性。 首先js和java不

    2024年02月04日
    浏览(57)
  • 一篇文章带你搞懂stm32工程文件

    本文以stm32f4为例,讲解stm32标准库工程中各个文件的作用,学艺不精,如有错误,望大家私信或评论指出。 先看思维导图 startup_stm32f427xx.s  该文件是stm32的启动文件,由汇编语言编写,主要是做stm32上电时的配置设置(如堆栈指针,时钟数)并跳转到main函数中,执行c代码。

    2024年02月21日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包