微信小程序开发之——weui-wxss的使用

news/2024/10/30 23:19:16/

概述:

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览:

用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)

Github下载地址:
https://github.com/weui/weui-wxss?from=timeline&isappinstalled=0&utm_source=tuicool&utm_medium=referral

这里写图片描述

使用:

  1. 组件的wxml结构请看dist/example/下的组件
  2. 样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss

使用示例:

  1. 下载weui-wxss压缩包,解压。
  2. 把dist/style/weui.wxss文件放到你项目的根目录(或者其他目录)。
  3. 在app.wxss中添加如下代码:@import 'weui.wxss';
    注意:路径要对应上!

接下来我们以SearchBar为例,在自己的小程序里使用SearchBar样式。

  1. 新建快速项目
  2. 去除掉无用代码
  3. 把weui.wxss文件拷贝到项目目录
  4. 在app.wxss里引用样式文件 @import 'weui.wxss';
  5. 新建一个searchbar文件夹,在app.jason中定义searchbar页面
  6. 把weui-wxss里的 weui-wxss-master\dist\example\searchbar 文件都拷贝到你新建的项目 searchbar文件里
  7. 调试、查看结果
    这里写图片描述
    其他效果同理

demo下载地址:
http://download.csdn.net/detail/sundayaaron/9709961

如果我的文章对您有帮助,微信支付宝打赏:

这里写图片描述
这里写图片描述


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

相关文章

微信小程序 Wxs篇

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 【注意】 WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。WXS 与 JavaScript 是不同的语言,有自己的语法&…

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

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

【微信小程序WXS 模块】

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

小程序wxs使用教程

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

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

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

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

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

【微信小程序】WXML WXSS JS

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

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

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