入门微信小程序开发(二)wxml与wxss

news/2024/10/31 1:26:32/

一.初识WXML

对于每一位前端开发者而言,熟练的编写静态页面是入门的开始,在小程序中这一点也无法避免。在介绍微信小程序功能交互之前,我们先了解在小程序中如何实现页面布局与页面样式,这里先来介绍WXML。

WXML全称WeiXin Markup Language(微信标记语言),与HTML有些不同的是,这是微信框架提供的一套标签语言。

我们在写HTML页面时,总是习惯使用div进行整体布局,使用span描述文本信息,使用img装载图片等等,但在WXML中会有一些差异。WXML提供的每个标签都是一个组件,使用过vue,react或angular的同学对于组件概念一定不会陌生,鉴于刚入门的前端同学,这里做个简单解释。

 

我们在编程时总会考虑代码复用性,比如一个页面有好几处的样式完全相同,那么我们可以将这一块样式定义在一个class中,接下来只要把这个class加在你需要展示的地方就可以了。

.bth{outline:none;border:none;background:#e4393c;color:#fff;text-align: center;cursor: pointer;
}
<div><button class="btn">按钮1</button><div><button class="btn">按钮2</button></div>
</div>

组件的概念也是如此,比如提示类弹窗在整个网站中的多个页面都会使用,那我们为什么不把这个弹窗功能封装成一个组件呢,之后不管哪个页面需要此功能,只要添加这个组件就可以了。要实现这个组件我们都得先定义好组件模板(HTML,决定组件结构),组件默认样式(CSS,决定组件外观),组件功能(JS,决定组件负责做哪些事)等。

而在小程序框架中,官方已经提前帮我们实现了大量的组件,比如基本视图组件中的view相当于HTML中的div可用来布局;基本内容组件中的text相当于span,可以用来装载多段行内文本,再如媒体组件中的image,它相当于img标签用来承载图片信息。

除此之外,每个小程序组件都默认提供了一些非常nice的属性,这里以image组件为例。

假设我们希望图片加载完成后做一件事情,比如获取图片的宽度,这里就可以利用imagebindload(图片加载完成后触发)属性,打开我们的小程序开发工具,在index.wxml中添加一个image组件:

<view><image bindload='imgLoad' src='https://i0.hdslb.com/bfs/live/6c41e9f57094fae13728cd27e7d1c1379a3f1fcd.jpg@320w_330h_1c_100q.webp'></image>
</view>

对应的,在index.js添加如下代码:

const app = getApp()Page({//图片加载完成后执行的方法imgLoad(image) {console.log(image.detail.width);}
})

保存,可以看到在编辑器console控制台输出了320,这是image组件默认的宽度样式。

再例如图片懒加载在页面优化中也是需要考虑的一点,而image提供了lazy-load属性用于解决图片懒加载问题。

小程序官方提供的组件数量较多,很遗憾没办法一一介绍,但官方已经做了明细的组件分类,我们要做的就是拿到一个页面清楚知道需要用到哪些组件,一个组件需要用到哪些属性,就像搭积木一样,用这些组件来组成小程序的页面,还记得最初学HTML时标签使用的陌生感吗?它并没有难度,只是需要多加练习而已。

二. 关于WXSS

可以放心的是WXSS并没有对于样式高度拓展,之前CSS样式怎么玩,现在在小程序还是一样的玩。这点官方文档有点坑,比如官方说选择器目前只支持如下几种:

项目例子含义
#id#parent选择id='parent'的组件
.class.child选择所有class='child'的组件
elementview选择所有view组件
element,elementview,text选择所有view组件和text组件
::aftertext::after在text组件后面插入内容
::beforetext::before在text组件前面插入内容

但事实证明子代选择器,后代选择器以及伪类选择器大部分都支持,比如下面的例子:

<view class="box"><text>一往情深深几许,</text><text>深山夕照深秋雨。</text><input placeholder="输入作者名字" />
</view>
.box>text:first-child {color: #e4393c;
}input:active {border: 1px solid #ddd;
}

但也有不支持的部分,比如在手机上大家是没办法使用:hover伪类,毕竟手机上没有鼠标悬浮。

关于WXSS,小程序也做了亮点拓展,我们先说新增的尺寸单位rpx,官方描述如下:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

并提供了如下几个手机型号的转换例子:

设备型号rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

这里我提前查了下这三款手机的逻辑像素比:

  • iPhone5:320px x 568px
  • iPhone6 : 375px x 667px
  • iPhone6 plus : 414px x 736px

我们从UI设计师手上拿的图一般都是px单位的标注,如果在小程序上直接用px做单位会因为各类手机屏幕占宽比不同,导致一样的设计在不同设备上表现差异的问题,所以以往我们通常用rem或者vw来解决这个问题,而rpx只是小程序提供的另一解决方案。

注意,小程序根目录的app.wxss是指全局样式,只要在里面写的样式,会对所有页面生效,就相当于小程序默认为每个页面引入了这个样式表。所以当有一些样式可复用,而我们又想手动控制是否引入时,利用@import就是不错的方法。

三.总结

关于微信WXML与WXSS的介绍先说这里,较为遗憾的是,我确实没办法把小程序中的每个组件都说一遍,还得各位自行过一遍,大致知道哪个是做什么,在日后开发中,能立马想到该使用哪个组件。

知道了这些,我们已经可以初步搭建静态的小程序页面了.


http://www.ppmy.cn/news/305210.html

相关文章

【微信小程序WXS 模块】

WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内&#xff0c;或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数&#xff0c;默认为私有的&#xff0c;对其他模块不可见。一个模…

小程序wxs使用教程

1、什么是wxs wxs是小程序的一种脚本语言&#xff0c;它类似JavaScript&#xff0c;但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言&#xff0c;它可以在wxml中使用&#xff0c;并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。 2…

robots.txt的作用是什么,看完了我默默加在了自己网站上

文章目录 背景robots.txt的主要作用使用示范User-agentDisallowAllowSitemap 总结 背景 最近在研究网站SEO相关的东西&#xff0c;第一次接触到robots.txt&#xff0c;才发现实际上很多网站都用到了它&#xff0c;尤其是对搜索引擎依赖特别高的C端系统或者网站&#xff0c;是一…

微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)

上一篇讲了WXML:小程序版HTML&#xff0c;这一篇介绍WXSS:小程序版CSS。 1. WXSS:小程序版CSS。 WXSS是一套样式语言&#xff0c;为了便于前端开发的上手&#xff0c;WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式&#xff0c;同时在CSS基础上进行了修改扩充…

【微信小程序】WXML WXSS JS

目录 &#x1f353;小程序代码的构成 - WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 &#x1f347;小程序代码的构成 - WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 &#x1f352;小程序代码的构成 - JS 逻辑交互 1. 小程序中的 .js 文件 2. 小程序中 .js 文…

【小程序】中WXS的语法详解

文章目录 WXS基本使用&#x1f370;WXS的介绍&#x1f370;WXS的写法&#x1f370;WXS的练习(一)&#x1f370;WXS的练习(二) WXS基本使用 &#x1f370;WXS的介绍 WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建…

微信小程序 | 小程序WXSS-WXML-WXS

&#x1f5a5;️ 微信小程序 专栏&#xff1a;小程序WXSS-WXML-WXS &#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; ✨ 个人主页&#xff1a;CoderHing的个人主页 &#x1f340; 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ &#x1…

20230608----重返学习-react项目的细节

day-088-eighty-eight-20230608-react项目的细节 react项目的细节 进入登录页的情况分析 什么情况下&#xff0c;会进入登录页&#xff1f; 手动输入 /login 地址http://127.0.0.1:3000/#/login 登录成功&#xff1a;跳转到首页push() 我原本想进入的是 个人中心/我的收藏/…