大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢。

直入主题:

1.下载weui

 进入GitHub https://github.com/weui/weui-wxss/ 进入如下页面,点击红色框选下载程序代码

  解压后进入文件夹,图示路径下的weui.wxss就是我们所需要的weui库

 2.引入weui

  打开微信开发者工具创建项目(这个就不在介绍了),目录如下

  创建好项目,接下来要做的就是将刚才下载解压的weui文件夹里的weui.wxss,直接复制粘贴放在项目根目录下即可

  到此引入步骤还没结束,要在项目中使用,还需要在全局app.wxss中加入@import "weui.wxss",至此完成引入

 3.使用weui

  从GitHub上下载的weui文件夹里除了我们要使用的weui.wxss文件,还有一个很重要的文件夹,那就是example文件

  直接将该文件扔进vscode里,我们就可以看到各个组件的代码。微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示,当然我们也可以直接进weui的小程序手机上查看weui的样式,然后根据需求来选择组件的使用,但是这里都没有介绍weui具体的使用,但是example文件夹里有。

  上图所示就是weui使用代码,这里我们随意挑选一个模块badge示例,对应的badge.wxml的代码其实就是weui的各个badge徽章标记的样式,我们直接将badge.wxml中的代码复制,粘贴到小程序项目中的新建页面test.wxml中看看。

  保存一下,我们就可以在模拟器中看到如下效果

  

  到这里我们就已经完成了weui的引入和使用了,接下来只需要根据需求筛选就好

微信小程序weui的使用的更多相关文章

  1. 微信小程序 weui 使用方法

      https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui   下载地址用于H5    运用示例 ...

  2. 微信小程序——weui的使用

    使用在根目录中复制weui.wxss,app.wxss中引入 在weui.io中查看到自己想要的样式表后,到第二个网站复制代码,复制到自己的项目中即可 <!--pages/register/re ...

  3. 微信小程序-weui实例代码提取

    搜索框 对应代码如下: wxss文件 <view class="page"> <view class="page__hd"> <v ...

  4. 微信小程序从零开始开发步骤-引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  5. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  6. 使用weui开发微信小程序

    一.使用weui 学习一个新的技术,想要最短时间掌握并熟练使用它,那就是直接做项目了.把技术直接应用到项目中来,直接做出东西,这是我的方法,因为我很懒不太喜欢看一步一步看文档,看理论. 那怎么使用we ...

  7. 微信小程序:app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui

    微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...

  8. 微信小程序开发(二)——使用WeUI组件库

    一.前言 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库.有的,它就是 ...

  9. 微信小程序使用weui扩展组件踩坑

    最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...

随机推荐

  1. JavaScript 基础学习(一)JavaScript 简介

    定义 JavaScript是基于对象和事件驱动的语言,应用与客户端.其中: 基于对象:提供好了很多对象,可以直接拿过来使用 事件驱动:html做网站静态效果,javascript动态效果(网页能根据客 ...

  2. Java架构-高并发的解决实战总结方案

    Java架构-高并发的解决实战总结方案 1.应用和静态资源分离 刚开始的时候应用和静态资源是保存在一起的,当并发量达到一定程度的时候就需要将静态资源保存到专门的服务器中,静态资源主要包括图片.视频.j ...

  3. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...

  4. hash类型的应用场景 —— Redis实战经验

    hash类型是一个string类型的field和value的映射表,每个 hash 可以存储 232 - 1 键值对(40多亿),hash类型主要有以下应用场景. 1. 购物车 以用户id为key,商 ...

  5. javascript单词

    abstract n. 摘要,抽象的东西 adj. 抽象的,理论的 vt. 移除,摘要,偷 vi. 做摘要 do aux. 助动词(无词意) v. 干,做 if conj. 如果,是否,即使 n. 条 ...

  6. # ConfigureAwait常见问题解答

    原文: https://devblogs.microsoft.com/dotnet/configureawait-faq/ .NET 在七多年前在语言和类库添加了 async/await .在那个时候 ...

  7. python3-cookbook笔记:第四章 迭代器与生成器

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...

  8. P3902 递增

    链接:P3902 ----------------------------------------- 这道题就是最长上升子序列的模板题,因为我们修改的时候可没说不能改成小数(暴力) --------- ...

  9. opencv —— 在 VS 中的配置

    添加一个新的 .cpp 文件到工程中 打开菜单栏视图中的属性管理器                                                      选择 Debug|x64 ...

  10. 修改sudoers

    使用visudo命令 [root@898f990a8808 etc]# visudo