微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求

分类：Json作者：哥的时代

学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。各位小伙伴，如果您：
想系统/深入学习某技术知识点…
一个人摸索学习很难坚持，想组团高效学习…
想写博客但无从下手，急需写作干货注入能量…
热爱写作，愿意让自己成为更好的人…

文章目录

前言

一、WXSS 模板样式
1、什么是 WXSS
2、WXSS 和 CSS 的关系
二、WXSS 模板样式 - rpx
1、什么是 rpx 尺寸单位
2、rpx 的实现原理
3、rpx 与 px 之间的单位换算*
三 、WXSS 模板样式 - 样式导入
1、什么是样式导入
2、@import 的语法格式
四、WXSS 模板样式 - 全局样式和局部样式
1、全局样式
2、局部样式
五、页面配置
1、页面配置文件的作用
2、页面配置和全局配置的关系
3、页面配置中常用的配置项
六、网络数据请求
1、小程序中网络数据请求的限制
2、配置 request 合法域名
3、发起 GET 请求
4、发起 POST 请求
5、在页面刚加载时请求数据
6、跳过 request 合法域名校验
7、关于跨域和 Ajax 的说明

一、WXSS 模板样式

1、什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

2、WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。
与 CSS 相比，WXSS 扩展的特性有：

  • rpx 尺寸单位
  • @import 样式导入

在这里插入图片描述

二、WXSS 模板样式 - rpx

1、什么是 rpx 尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

2、rpx 的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。

  • 在较小的设备上，1rpx 所代表的宽度较小
  • 在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

3、rpx 与 px 之间的单位换算*

在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则：

  • 750rpx = 375px = 750 物理像素
  • 1rpx = 0.5px = 1物理像素

在这里插入图片描述


官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

三 、WXSS 模板样式 - 样式导入

1、什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

2、@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

在这里插入图片描述

四、WXSS 模板样式 - 全局样式和局部样式

1、全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

2、局部样式

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：

  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

五、页面配置

1、页面配置文件的作用

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

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

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3、页面配置中常用的配置项

在这里插入图片描述

六、网络数据请求

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

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

  • 只能请求 HTTPS 类型的接口
  • 必须将接口的域名添加到信任列表中

在这里插入图片描述

2、配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.gedeshidai.com 域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

  • 域名只支持 https 协议
  • 域名不能使用 IP 地址或 localhost
  • 域名必须经过 ICP 备案
  • 服务器域名一个月内最多可申请 5 次修改

3、发起 GET 请求

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

  //发起GET数据请求
  getInfo(){
    wx.request({
      url: 'https://www.gedeshidai.com',//请求的接口地址，必须基于https协议
      method:'GET',   //请求的方式
      data:{          //发送到服务器的数据
        name:'gedeshidai',
        age:21
      },
      success:(res)=>{ //请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },

在这里插入图片描述

4、发起 POST 请求

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

  //发起POST数据请求
  postInfo(){
    wx.request({
      url: 'https://www.gedeshidai.com',//请求的接口地址，必须基于https协议
      method:'POST',

在这里插入图片描述

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

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

  onLoad(options) {
    this.getInfo()
    this.postInfo()
  },

在这里插入图片描述

6、跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。
注意：
跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

在这里插入图片描述

7、关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

总结

以上就是微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求的相关知识点，希望对你有所帮助。
积跬步以至千里，积怠惰以至深渊。时代在这跟着你一起努力哦！

原文地址：https://blog.csdn.net/m0_64074924/article/details/135754702

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

优化cesium里的热力图
文章浏览阅读2.4k次。最近要优化cesium里的热力图效果，浏览了网络上的各种方法，发现大多是贴在影像上的。这么做好是好，但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。经过尝试，决定修改下cesium heatmap，让他达到我们需要的要求。首先先下载 cesium heatmap包。其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释} else {} };
python读写json文件方法详解
文章浏览阅读1.2w次，点赞3次，收藏19次。在 Python中读取 json文件也可以使用 sort （）函数，在这里我介绍一个简单的示例程序： （4）如果我们想将字符串转换为列表形式，只需要添加一个变量来存储需要转换的字符串即可。在上面的代码中，我们创建了一个名为` read`的对象，然后在文件的开头使用`./`关键字来命名该对象，并在文件中定义了一个名为` json`的变量，并在其中定义了一个名为` json`的字段。比如，我们可以使用 read方法读取 json文件中的内容，然后使用 send方法将其发送到 json文件中。_python怎么读取json文件
Python API：它是什么以及如何使用它
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口，它是一种设备，例如用于使用编程代码发送和检索数据的服务器。最常见的是，该技术用于从源检索数据并将其显示给软件应用程序及其用户。当您访问网页时，API 的工作方式与浏览器相同，信息请求会发送到服务器，如何在 Windows PC 中手动创建系统还原点服务器会做出响应。唯一的区别是服务器响应的数据类型，对于 API，数据是 JSON 类型。JSON 代表 JavaScript Object Notation，它是大多数软件语言中 API 的标准数据表示法。_api是什么 python
解决一个JSON反序列化问题-空字符串变为空集合
文章浏览阅读802次，点赞10次，收藏10次。解决一个JSON反序列化问题-空字符串变为空集合_cannot coerce empty string ("") to element of `java.util.arraylist
Untiy Json和Xml的序列化和反序列化
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_unity json反序列化存储换行
使用ant design vue的a-upload上传组件，自定义上传事件，点了导入图标按钮就自动打开了电脑上的文件夹，将选中的.json文件里的数据解析出来页面使用（纯前端操作）
文章浏览阅读796次。reader.readAsText(data.file)中data.file的数据格式为。使用FileReader对象读取文件内容，最后将文件内容进行处理使用。_a-upload 同时支持文件和文件夹
json解析之fastjson和jackson使用对比
文章浏览阅读775次，点赞19次，收藏10次。fastjson是由国内的阿里推出的一种json处理器，由java语言编写，无依赖，不需要引用额外的jar包，能直接运行在jdk环境中，它的解析速度是非常之快的，目前超过了所有json库。提示：以下是引用fastjson的方法，数据未涉及到私密信息。_解析器用fastjson还是jackson
【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用
文章浏览阅读940次。【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用_使用什么方法检查qjsondocument是否为空
ajax与 JSON
文章浏览阅读957次，点赞34次，收藏22次。主要内容原生 ajax重点重点JSON熟悉章节目标掌握原生 ajax掌握jQuery ajax掌握JSON第一节 ajax1. 什么是ajaxAJAX 全称为，表示异步的Java脚本和Xml文件，是一种异步刷新技术。2. 为什么要使用ajaxServlet进行网页的变更往往是通过请求转发或者是重定向来完成，这样的操作更新的是整个网页，如果我们只需要更新网页的局部内容，就需要使用到AJAX来处理了。因为只是更新局部内容，因此，Servlet。
@JsonFormat与@DateTimeFormat
文章浏览阅读1.4k次，点赞45次，收藏13次。主要介绍了JsonFormat与@DateTimeFormat注解实例解析,文中通过示例代码介绍的非常详细，对大家的学习 或者工作具有一定的参考学习价值,需要的朋友可以参考下 这篇文章主要介绍了从数据库获取时间传到前端进行展示的时候，我们有时候可能无法得到一个满意的时间格式的时间日期，在数据库中显 示的是正确的时间格式，获取出来却变成了时间戳，@JsonFormat注解很好的解决了这个问题，我们通过使用 @JsonFormat可以很好的解决：后台到前台时间格式保持一致的问题，
@JsonDeserialize和@JsonSerialize注解的使用
文章浏览阅读1k次。JsonDeserialize：json反序列化注解，作用于setter()方法，将json数据反序列化为java对象。可以理解为用在处理接收的数据上。_jsondeserialize
labelme标注的json文件转yolo格式
文章浏览阅读2.7k次。labelme标注的json文件是在数据标注时产生，不能直接应用于模型训练。各大目标检测训练平台或项目框架均有自己的数据格式要求，通常为voc、coco或yolo格式。由于yolov8项目比较火热，故此本博文详细介绍将json格式标注转化为yolo格式的过程及其代码。_labelme json 转 yolo
mysql聚合函数andjson_object 例子
文章浏览阅读790次，点赞26次，收藏6次。GROUP_CONCAT_UNORDERED(): 与GROUP_CONCAT类似，但不保证结果的顺序。COUNT_DISTINCT_AND_ORDERED(): 计算指定列的不同值的数量，并保持结果的顺序。COUNT_ALL_DISTINCT(): 计算指定列的所有不同值的数量（包括NULL）。AVG_RANGE(): 计算指定列的最大值和最小值之间的差异的平均值。JSON_OBJECT(): 将结果集中的行转换为JSON对象。COUNT_DISTINCT(): 计算指定列的不同值的数量。_mysql json 聚合
ajax同步与异步,json-serve的安装与使用,node.js的下载
文章浏览阅读1.2k次。ajax同步与异步,json-serve的安装与使用,node.js的下载_json-serve 与node版本
C# 操作json
文章浏览阅读1.7k次。`.net core`提供了Json处理模块，在命名空间`System.Text.Json`中，下面通过顶级语句，对C#的Json功能进行讲解。_c# json
python之json文件读写操作
文章浏览阅读2.8k次。主要介绍了python对于json文件的读写操作内容_python读取json文件
Json中文乱码问题的解决方法——C#实现
文章浏览阅读770次。然而，有时候在处理包含中文字符的Json数据时会出现乱码的情况。本文将介绍一种解决Json中文乱码问题的常见方法，并提供相应的源代码和描述。而某些情况下，中文字符可能会被错误地编码或解码，导致乱码的出现。通过适当地控制编码和解码过程，我们可以有效地处理包含中文字符的Json数据，避免乱码的发生。通过控制编码和解码过程，我们可以确保Json数据中的中文字符能够正确地传输和解析。为了解决这个问题，我们可以使用C#的System.Text.Encoding类提供的方法进行编码和解码的控制。_c# json 中文编码
【工具】XML和JSON互相转换
文章浏览阅读997次。【代码】【工具】XML和JSON互相转换。_xml 转json
jsonpath提取数据
文章浏览阅读1.1k次。json path 提取数据_jsonpath数组取值
pandas read_json时ValueError: Expected object or value的解决方案
文章浏览阅读3w次，点赞35次，收藏36次。本文主要介绍了pandas read_json时ValueError: Expected object or value的解决方案，希望能对学习python的同学们有所帮助。文章目录1. 问题描述2. 解决方案_valueerror: expected object or value
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot