才接触小程序。想找个ui框架。。也不知道咋弄;

下载地址:点击打开链接

  1. 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下
  2. 引入weui.wxss
  3. 方式一:在app.wxss内或者需要的页面引入style/weui.wxss。
  4. 方式二:在app.wxss内或者需要的页面引入style/widget下的组件的wxss
 

WeUI的使用

<view class="page">
<view class="page__hd">
<view class="page__title">WeUI</view>
<view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="kind-list">
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
<view class="kind-list__item">
<view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
<view class="weui-flex__item">{{item.name}}</view>
<image class="kind-list__img" src="data:images/icon_nav_{{item.id}}.png"></image>
</view>
<view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
<view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
<navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access">
<view class="weui-cell__bd">{{page}}</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
<view class="page__ft">
<image src="data:images/icon_footer.png" style="width: 84px; height: 19px;"></image>
</view>
</view>

根组件

<view class="page">
</view>
页头和主体使用class="page__xx"(注意是两个下划线)

<view class="page">
<!--页头-->
<view class="page__hd"></view>
<!--主体-->
<view class="page__bd"></view>
</view>
其他组件采用weui-xx,例如class = "weui-flex"。

<view id="{{item.id}}" class="weui-flex" >
<view class="weui-flex__item">{{item.name}}</view>
<image class="kind-list__img" src="data:images/icon_nav_{{item.id}}.png"></image>
</view>

以上都收集自网络。自己用过可以的。

WeUI 在小程序中使用的更多相关文章

  1. 微信小程序中的组件

    前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...

  2. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  3. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  4. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  5. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  6. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

  7. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

  8. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  9. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

随机推荐

  1. td过长,将固定宽度table撑开

    解决办法: 在table上加上样式: table{table-layout:fixed;word-break:break-all} table-layout:fixed   tablle的列宽由表格宽 ...

  2. Linux更改ssh端口号,很easy!

    因为公司业务需求,可能涉及到更改ssh远程的端口号,用下面方法轻松解决,废话不多说! 1.打开ssh端口配置文件:vim /etc/ssh/sshd_config,找到如下图所示的端口,改为自己想改的 ...

  3. AMD、CMD和CommonJS规范(转)

    CommonJS规范  CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中.CommonJS规范是为了解决JavaScript的作用域问题而定义 ...

  4. avalon.js的循环操作在表格中的应用

    avalon.js的循环操作在表格中的应用 一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVV ...

  5. Linux文件服务器实战(匿名用户)

    一.进程与线程 二.vsftp服务器 1.文件传输协议(file transfer protocol,FTP) 基于该协议ftp客户端和服务端实现文件共享,上传下载文件 FTP基于TCP协议生成一个虚 ...

  6. django+xadmin在线教育平台(十二)

    6-4 用form实现登录-1 上面我们的用户登录的方法是基于函数来做的.本节我们做一个基于类方法的版本. 要求对类的继承有了解. 基础教程中基本上都是基于函数来做的,其实更推荐基于类来做.基于类可以 ...

  7. MySQL创建民族表的SQL语句

    MySQL创建民族表的SQL语句 CREATE TABLE `nation` ( `id` ) unsigned NOT NULL AUTO_INCREMENT, `nation` ) NOT NUL ...

  8. 关于Mysql唯一索引的操作方法(添加删除)

    首先我们查看一下News数据表的索引信息      使用命令 show index from ‘数据表名称’; 目前数据表中仅有一个主键索引 继续,我们给news表添加两个唯一索引(两种方法) 方法一 ...

  9. ubuntu中使用apt命令安装ipython失败解决方案

    在最近使用ubuntu安装ipython时,出现如下报错: 出现这个问题,主要是因为apt还在运行,故解决方案为: 1.找到并且杀掉所有的apt-get 和apt进程 运行下面的命令来生成所有含有 a ...

  10. sql语句(Oracle和sqlserver)

    查询表的首句:(Oracle) select * from (select a.*, rownum as rn from tab_name a order by col )where rn = 1 o ...