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

最新推荐文章于 2025-02-09 16:25:20 发布

An丶清风

最新推荐文章于 2025-02-09 16:25:20 发布

阅读量5.2k

点赞数 3

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/An_Cool_bree/article/details/117753771

版权

本文介绍了微信小程序的标记语言WXML和样式语言WXSS。WXML作为微信框架的组件化标签语言，类似HTML但具有组件特性。文章通过实例展示了如何使用image组件及其属性。而WXSS在保持CSS样式的基础上，增加了尺寸单位rpx以适应不同设备屏幕。全局样式表app.wxss的应用和组件的复用性被强调，帮助开发者快速搭建小程序页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.初识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>

最低0.47元/天解锁文章