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

news2024/12/23 14:30:23

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

文章目录

  • 前言
  • 一、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
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)和网络数据请求的相关知识点,希望对你有所帮助。
积跬步以至千里,积怠惰以至深渊。时代在这跟着你一起努力哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1405050.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flutter 自定义AppBar实现滚动渐变

1、使用ListView实现上下滚动。 2、使用Stack:允许将其子部件放在彼此的顶部,第一个子部件将放置在底部。所以AppBar,写在ListView下面。 3、MediaQuery.removePadding:当使用ListView的时候发现,顶部有块默认的Padd…

【 CSS 】定位

不要因为小小的失败而放弃大大的梦想,每一次坚持都是通向成功的一步。- 马克吐温 1. 定位 1.1 为何使用定位 我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果? 场景1: 某个元素可以自由的在一个盒子内移动位置&#xff0c…

企业如何高效营销?CBTC储能展助力企业市场拓展,黄金展位告急!

不论一家公司的规模有多大,展会都为之提供了一个很好的拓展业务的机会。参展是一种高效的营销方式。主要表现在哪些方面呢? 1、低成本接触合作客户。公司要接触到合格的客户,参加展会是最有效的方式。展会调查研究表明,通过销售电…

Effective C++——绝不在构造和析构构成中使用虚函数

父类的构造函数中调用的虚函数不是“虚”的 class father { public:virtual void log() {cout << "father building." << endl;}father(){log();} };class son : public father { public:virtual void log() {cout << "son building." &…

【面试突击】性能优化面试实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复…

【博士每天一篇论文-综述】Deep Echo State Network (DeepESN)_ A Brief Survey

阅读时间&#xff1a;2023-11-22 1 介绍 年份&#xff1a;2017 作者&#xff1a;C. Gallicchio 比萨大学计算机科学系终身教授助理教授&#xff0c;A. Micheli&#xff0c;比萨大学计算机科学系 期刊&#xff1a; ArXiv 引用量&#xff1a;68 这是两个大牛的论文&#xff0c;…

仓储管理系统——软件工程报告(需求分析)②

需求分析 一、系统概况 仓库管理系统是一种基于互联网对实际仓库的管理平台&#xff0c;旨在提供一个方便、快捷、安全的存取货物和查询商品信息平台。该系统通过在线用户登录查询&#xff0c;可以线上操作线下具体出/入库操作、查询仓库商品信息、提高仓库运作效率&#xff…

年货节电视盒子哪个好?内行分享权威网络电视盒子排行榜

淘宝、京东等已经开始了年货节促销&#xff0c;很多消费者买电视盒子会选择在此时入手&#xff0c;我近来收到了很多关于电视盒子哪个好的咨询&#xff0c;考虑到大家在选购时会参考排行榜&#xff0c;我这次要分享的是网络电视盒子排行榜&#xff0c;目前业内公认最好的电视盒…

LeetCode.2788. 按分隔符拆分字符串

题目 题目链接 分析 题目的意思是给我们一个字符串数组和一个分隔符&#xff0c;让我们按照分隔符把字符串数组分割成新的字符串数组。 看到这个描述&#xff0c;这不就是直接就是利用 按照分隔符分割字符串的系统库函数split()&#xff0c;这个函数的意思就是 把一个字符串…

C++(14.5)——再谈拷贝构造与深浅拷贝

上篇文章中&#xff0c;通过模拟的方式完成了类对象中常用的函数。在本篇文章中&#xff0c;将通过一个例子来进一步说明拷贝构造与深浅拷贝。 目录 1.再谈深浅拷贝与拷贝构造&#xff1a; 2. 流插入与流提取&#xff1a; 2.1 流插入&#xff1a; 2.2 流提取&#xff1a; …

性能优化-OpenCL运行时API介绍

「发表于知乎专栏《移动端算法优化》」 本文首先给出 OpenCL 运行时 API 的整体编程流程图&#xff0c;然后针对每一步介绍使用的运行时 API&#xff0c;讲解 API 参数&#xff0c;并给出编程运行实例。总结运行时 API 使用的注意事项。最后展示基于 OpenCL 的图像转置代码。在…

matlab模型变量一般说明,标定和显示量,以及产生a2l文件,自动填充a2l地址,并使用标定工具ati进行标定(推荐重要)

注意我是用的是matlab2019b 1&#xff0c;输入标定量&#xff0c;使用constant&#xff0c;用cal函数包裹 2&#xff0c;输出显示量&#xff0c;在划线上标注&#xff0c;然后用display函数包裹&#xff0c; 第一步和第二步完成以后&#xff0c;生产标定量a2l 3&#xff0c;输入…

分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别

分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别 目录 分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别分类效果基本描述程序设计参考资料 分类…

2024年【焊工(初级)】考试内容及焊工(初级)新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 焊工&#xff08;初级&#xff09;考试内容参考答案及焊工&#xff08;初级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及焊工&#xff08;初级&#xff09;操作证已考过的学员汇总&#xff0c;相对有…

Centos7 安装redis 详细步骤访问不了github和windows系统下载

windows系统下载 https://hellowindows.cn/ VMware虚拟机安装Windows Server 2016 VL https://blog.csdn.net/qq_37545849/article/details/134828341 VMware全屏时不显示上方命令栏的边缘 此时如果要返回&#xff0c;可以把鼠标移动至屏幕上方边缘短暂停留以呼出命令栏。或使…

MNIST 数据集详析:使用残差网络RESNET识别手写数字(文末送书)

MNIST 数据集已经是一个几乎每个初学者都会接触的数据集, 很多实验、很多模型都会以MNIST 数据集作为训练对象, 不过有些人可能对它还不是很了解, 那么今天我们一起来学习一下MNIST 数据集&#xff0c;同时构建残差网络来识别手写数字。 1.MNIST 介绍 MNIST手写数字数据库具有…

RabbitMQ数据隔离

1、新建用户 2、登录用户&#xff0c;设置虚拟主机 登录用户只能操作自己的虚拟主机&#xff0c;交换机等&#xff0c;不能操作其他人的&#xff01;&#xff01;&#xff01;

【书生·浦语大模型实战营06】《OpenCompass 大模型评测》学习笔记

《OpenCompass 大模型评测》 文档&#xff1a;OpenCompass大模型评测教程 1、主观评测 2、提示词工程 李华每周给2个不同的朋友写一封3页的信&#xff0c;一周写两次。他一年总共写了多少页的信? 李华每周给2个不同的朋友写一封3页的信&#xff0c; 一周写两次。他一年总共…

【数据结构和算法】--- 二叉树(3)--二叉树链式结构的实现(1)

目录 一、二叉树的创建(伪)二、二叉树的遍历2.1 前序遍历2.2 中序遍历2.3 后序遍历 三、二叉树节点个数及高度3.1 二叉树节点个数3.2 二叉树叶子节点个数3.3二叉树第k层节点个数3.4 二叉树查找值为x的节点 四、二叉树的创建(真) 一、二叉树的创建(伪) 在学习二叉树的基本操作前…

OTA 升级软件推荐,附带MD5,CRC16,CRC32,AES算法工具

说明&#xff1a;推荐 OTA 工具软件&#xff0c;可以通过串口按 OTA 协议发送 bin 文件给 MCU,完成 bootloader 升级app 功能 , 这个软件 附带提供 MD5,CRC16,CRC32,AES 算法工具。 文档持续完善中... 1. OTA界面 2.AES.MD5.CRC界面 3.下载链接&#xff1a; 链接: https://p…