当前位置: 首页 > 编程日记 > 正文

微信小程序之WXSS模板样式、页面配置(.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',   //请求的方式
      data:{          //发送到服务器的数据
        name:'gedeshidai',
        age:21
      },
      success:(res)=>{ //请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },

在这里插入图片描述

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

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

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

在这里插入图片描述

6、跳过 request 合法域名校验

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

7、关于跨域和 Ajax 的说明

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


总结

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

相关文章:

Java之网络通信框架mina

mina是一个基于java nio的网络通信框架。主要屏蔽了网络通信的一些细节,对Socket进行封装,并且是NIO的一个实现架构,可以帮助我们快速的开发网络通信,常用于游戏的开发、中间件服务端的程序中。Apache的Mina(Multipurpose Infrastructure Networked Applications)是一个网络应用框架,可以帮助用户开发高性能和高扩展性的网络应用程序;它提供了一个抽象的、事件驱动的异步API,使。

CSS局限属性contain:优化渲染性能的利器

在网页开发中,优化渲染性能是一个重要的目标。CSS局限属性contain是一个强大的工具,可以帮助我们提高网页的渲染性能。本文将介绍contain属性的基本概念、用法和优势,以及如何使用它来优化网页的渲染过程。

Docker网络详解

如何自定义一个网络?查看新创键的mynet详细信息:# 创建两个使用相同自定义网络的容器# 测试容器互连^C^C。

DNS轮询解析是什么?

在其最简单的实现中,轮回DNS的工作方式是,不仅用一个潜在的IP地址来响应DNS请求,而且用一个潜在的IP地址列表来响应承载相同服务的几个服务器。传统的负载均衡技术通常需要专门的硬件或软件,但DNS轮询解析是一种负载分配、负载平衡或容错技术,通过管理域名系统(DNS)对来自客户计算机的地址请求的响应,按照适当的统计模型,提供多个冗余的互联网协议服务主机,将流量分散到多个服务器上。因此,虽然轮询DNS是一种简单有效的负载平衡方法,但它也存在一些限制和潜在的问题,需要根据实际情况进行选择和使用。

一文搞懂网络OSI网络模型

在互联网技术里,有两件事最为重要,一个是TCP/IP协议,它是万物互联的事实标准;另一个是Linux操作系统,它是推动互联网技术走向繁荣的基石。在网络编程中最重要的模型便是OSI七层网络模型和TCP/IP四层网络模型七层模型,也称为OSI(Open System Interconnection)参考模型,是国际标准化(ISO)指定的一个用于计算机或通信系统间互联的标准体系。建立七层模型的主要目的是为解决各种网络互联时遇到的兼容性问题。

常见的几种网络抓包及协议分析工具

网络工程师必备技能-抓取网络数据。在本篇博客中,我们将集中记下几个问题进行探讨:Wireshark 是免费的抓取数据包、分析数据包的工具,兼容 Windows、Linux、Mac等主流平台。使用 wireshark 抓包需要的工具是:安装了 wireshark 的 PC。wireshark 抓包的范围是:抓取安装了 wireshark 的 PC 本机的网卡上流经的数据包。其中,网卡指的是 PC 上网使用的模块,常见的包括:以太网网卡、wifi 无线网卡,PC 分别使用它们用于连接以太网、wifi 无线网络。

为什么网线接法要分交叉连接和直连连接两种方式

水晶头有两种连接方式T568A和T568B。网线的两头都使用同一标准连接就是直连线,两头使用不同的标准就是交叉线。

TCP服务器最多支持多少客户端连接

本文从理论和实际两个方面介绍了一个 TCP 服务器支持的最大连接数

websocket服务端本地部署

即登录cpolar官网后,点击预留,保留一个固定tcp端口地址,然后将其配置到相应的隧道中即可。这里我们用cpolar内网穿透来映射内网端口,它支持http/https/tcp协议,不限制流量,无需公网ip,也不用设置路由器,操作简单。注意:该隧道选择的是临时tcp地址和端口,24小时内会变化,如需固定tcp地址,可升级为专业套餐做tcp地址固定!cpolar安装成功后,默认会配置两个默认隧道:一个ssh隧道和一个website隧道,可自行删减或者修改。,可以查看到token码,复制并执行命令进行认证。

python基础小知识:引用和赋值的区别

通过引用,就可以在程序范围内任何地方传递大型对象而不必在途中进行开销巨大的赋值操作。不过需要注意的是,这种赋值仅能做到顶层赋值,如果出现嵌套的情况下仍不能进行深层赋值。赋值与引用不同,复制后会产生一个新的对象,原对象修改后不会影响到新的对象。如果在原位置修改这个可变对象时,可能会影响程序其他位置对这个对象的引用

基于深度学习的细胞感染性识别与判定

通过引入深度学习技术,我们能够更精准地识别细胞是否受到感染,为医生提供更及时的信息,有助于制定更有效的治疗方案。基于深度学习的方法通过学习大量样本,能够自动提取特征并进行准确的感染性判定,为医学研究提供了更高效和可靠的手段。通过引入先进的深度学习技术,我们能够实现更快速、准确的感染性判定,为医学研究和临床实践提供更为可靠的工具。其准确性和效率将为医学研究带来新的突破,为疾病的早期诊断和治疗提供更可靠的支持。通过大规模的训练,模型能够学到细胞感染的特征,并在未知数据上做出准确的预测。

TCP三次握手和四次挥手

看了大量的文章都不知道ack包,fin包,syn包是干嘛的?我搜了一些概念以及总结道一起是不是更容易理解一些方便后续面试使用

WebSocket 入门实战

这个简单示例演示了如何使用 Spring Boot 和 Spring WebSocket 创建一个基本的 WebSocket 服务。通过这个例子,可以了解 WebSocket 在实时通信中的应用,如果大家在平时工作当中有遇到需要实时推送的场景,比如大屏实时展示数据变化,就可以用这种发放时。

Docker网络配置&网络模式

网络相关概念,子网掩码、网关、规则的介绍及网络模式bridge、host详解,Dockers自定义网络配置

TCP怎么保证传输过程的可靠性?

校验和发送方在发送数据之前计算校验和,接收方收到数据后同样计算,如果不一致,那么传输有误确认应答,序列号TCP进行传输时数据都进行了编号,每次接收方返回ACK都有确认序列号。超时重试这里是引用连接管理流量控制阻塞控制..._tcp传输过程可靠性

华为路由器OSPF动态链路路由协议配置

【代码】华为路由器OSPF动态链路路由协议配置。

揭秘代理IP:原理、类型及其在大数据抓取中的作用

代理IP的原理:代理服务器作为客户端与目标网站之间的中介,当请求数据时,不是直接由用户的原始IP地址发送到目标网站,而是先发送到代理服务器。- 提升抓取效率:利用多个代理IP实现并发抓取,可以分散请求负载,提高数据采集速度,尤其是在需要大量数据或高频率访问时尤为关键。- 地域定位:某些代理IP能够提供特定地区的IP地址,这使得爬虫能够抓取特定区域的内容,比如针对不同国家或地区的本地化信息。- 绕过反爬机制:通过不断更换代理IP,爬虫可以避免因频繁访问而触发目标网站的反爬策略,从而继续高效地抓取数据。

你了解计算机网络的发展历史吗?

计算机网络是指将一群具有独立功能的计算机通过被互联起来的,在通信软件的支持下,实现的系统。计算机网络是计算机技术与通信技术紧密结合的产物,两者的迅速发展渗透形成了计算机网络技术。简而言之呢,计算机网络就是实现两台计算机相互沟通的介质。

教新手解决api-ms-win-crt-runtime-l1-1-0.dll丢失问题,简单有效修复dll文件问题

在使用电脑的过程中突然提示api-ms-win-crt-runtime-l1-1-0.dll错误的信息,那么出现在这样的问题有什么办法可以很好的解决api-ms-win-crt-runtime-l1-1-0.dll错误呢?今天就教大家解决api-ms-win-crt-runtime-l1-1-0.dll错误的几种办法,比较适合不懂电脑的萌新宝宝!如果你电脑电脑出现了这样的问题那么可以来试试吧!

websocket介绍并模拟股票数据推流

Websockt是一种网络通信协议,允许客户端和服务器双向通信。最大的特点就是允许服务器主动推送数据给客户端,比如股票数据在客户端实时更新,就能利用websocket。

怎么选择数据安全交换系统,能够防止内部员工泄露数据?

数据泄露可能给企业带来诸多风险:财产损失、身份盗窃、骚扰和诈骗、经济利益受损、客户信任度下降、法律风险和责任等,《2021年度数据泄漏态势分析报告》中显示,在数据泄露的主体中,内部人员导致的数据泄漏事件占比接近60%。飞驰云联文件安全交换系统,可以满足企业多场景下的文件交换需求,帮助企业终结多工具、 多系统并行使用的局面,减少因文件交换行为分散带来的数据管理不集中、难以管控的问题, 帮助企业内部构建统一、安全的企业数据流转通道。对于不能下载保存的数据,使用截屏、录屏的方式窃取并外泄数据;

什么?Postman也能测WebSocket接口了?

作为一位过来人也是希望大家少走一些弯路,如果你不想再体验一次学习时找不到资料,没人解答问题,坚持几天便放弃的感受的话,在这里我给大家分享一些自动化测试的学习资源,希望能给你前进的路上带来帮助。

Linux系统之ifconfig命令的基本使用

ifconfig是Linux中常用的网络配置工具之一,用于配置和显示网络接口的具体状况。

网页爬虫对于网络安全有哪些影响?

在当今信息爆炸的时代,网络已经成为人们获取信息、交流思想和开展业务的重要平台。然而,随着网络的普及和技术的不断发展,网络安全问题也日益凸显,其中网页爬虫对网络安全的影响不容忽视。本文将就网页爬虫对网络安全的影响进行深入分析,并提出相应的应对措施。网页爬虫,也称为网络爬虫或网络机器人,是一种自动化的程序,能够在互联网上抓取、收集和存储网页信息。总之,网页爬虫对网络安全的影响不容忽视,需要各方共同努力,采取有效的措施和策略,共同维护网络空间的安全和稳定。

TCP中的三次握手和四次挥手

我们知道TCP是运输层的面向连接的可靠的传输协议。**面向连接的**,指的就是在两个进程发送数据之前,必须先相互“握手”,确保两进程可以进行连接。并且这个传输是点对点的,即一个TCP连接中只有一个发送方和接收方;**可靠的**,指的是在任何网络情况下,在TCP传输中数据都将完整的发送到接收方。

一文搞懂深度信念网络!DBN概念介绍与Pytorch实战

深度信念网络(Deep Belief Networks, DBNs)是一种深度学习模型,代表了一种重要的技术创新,具有几个关键特点和突出能力。首先,DBNs是由多层受限玻尔兹曼机(Restricted Boltzmann Machines, RBMs)堆叠而成的生成模型。这种多层结构使得DBNs能够捕获数据中的高层次抽象特征,对于复杂的数据结构具有强大的表征能力。其次,DBNs采用无监督预训练的方式逐层训练模型。

在微信小程序中如何改变默认打开的页面

如果我们想要改变默认打开的页面,只需要将需要打开的页面路径放在 "pages" 字段的第一个位置即可。但是,对于博主来说,我们可能需要根据自己的需求改变默认打开的页面,以满足用户的期望和提供更好的用户体验。通过调用这个方法,在需要改变默认打开页面的时候,我们可以在 app.js 文件的 onLaunch 生命周期函数中执行跳转操作,将我们想要打开的页面路径作为参数传入。在这个启动页面中,我们可以根据用户的登录状态、上一次的使用记录等条件来判断应该跳转到哪个页面,从而实现改变默认打开的页面。

OpenHarmony之HDF驱动框架

HDF最核心几大块:配置管理,驱动管理,对外服务,消息机制对外接口侧重于服务,消息,而不是设备节点,这个是很大的一个转变以上内容主要概括了《OpenHarmony之HDF驱动框架》基础知识,为了让大家更快的了解《OpenHarmony4.0&Next》,我特意邀请几位行业大佬,联合整理了一份思维导图提供大家参考学习,大家可以根据自己的情况借鉴:《做鸿蒙应用开发到底学习些啥?除了上面整理的思维导图以外,这里还特别整理的一份《鸿蒙 (Harmony OS)开发学习手册》给大家进行参考学习:一、入门必看。

IP地址的四大类型:动态IP、固定IP、实体IP、虚拟IP的区别与应用

这种IP地址的分配是临时性的,用户每次连接都可能获得不同的IP。了解动态IP、固定IP、实体IP和虚拟IP的区别以及各自的应用场景,有助于网络管理员和用户在不同情境下做出明智的IP地址选择,确保网络通信的稳定性和高效性。每种IP类型都有其独特的优势,根据实际需求进行选择,是网络设计和管理中的重要考虑因素。动态IP、固定IP、实体IP和虚拟IP是四种不同类型的IP地址,它们各自具有独特的特点和应用场景。实体IP:是每个设备在物理网络上的唯一标识,确保网络通信的准确性。

2024 年软件工程将如何发展

人工智能、数字孪生技术、平台工程和混沌工程正在改变软件开发,并为开发运营带来更高的自动化、生产力和弹性。