小程序~WeUI下载使用
【1】简介
因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库。有的,它就是WeUI。
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
WeUI是在微信终端非常出色的UI样式库,提供了非常多丰富的基础UI组件,最重要的是拥有了和微信一致的视觉体验,使得用户即使从微信切换到相关小程序,也不会觉得UI感到突兀。
它的界面如图:
![](https://upload-images.jianshu.io/upload_images/4770884-79d01a6c0f331bcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/378/format/webp)
【2】下载配置
下载链接:https://github.com/Tencent/weui-wxss
- 将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图
注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss。
2.将style文件夹拷贝到小程序根目录中,如下图。
3.weui.wxss的引入方法
方法一.在app.wxss内或者需要的页面引入style/weui.wxss。
/**app.wxss**/ @import 'style.weui.wxss'
方式二:在app.wxss内或者需要的页面引入style/widget下的组件的wxss。
/**app.wxss---->引入button的wxss**/ @import 'style.widget.weui-button.weui-button.wxss';
注意:这样引入前提是weui.wxss放在全局的位置如图
![](http://upload-images.jianshu.io/upload_images/4770884-e16fe3e90ae9580d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/816/format/webp)
这样就可以简单的调用WeUI组件了。
![](http://upload-images.jianshu.io/upload_images/4770884-7b959355e98cfa59.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/379/format/webp)
【3】微信开发工具预览
-
使用微信开发者工具打开源代码工程的dist目录
打开微信开发者工具,点击导入项目,选择
weui-wxss
项目目录下的dist
目录。
接着点击导入,就可以看到weui
的预览了。
【4】使用
了解了weui
的预览方法,接下来我们就可以使用weui
进行一些简单的开发了,在这里,我们完成一个九宫格的开发。
新建一个空白的小程序工程,选择新建项目,填写项目名称、appId、项目目录之后,就进入小程序的开发页面。
新建了小程序工程之后,我们就可以在这个工程上使用weui
了。
使用weui
进行开发可以简单分为两个步骤。
(1)导入weui.wxss文件 (2)参照weui提供的例子使用weui组件
接下来我们按步骤尝试即可。
.
相关文章
- Python 下载 图片、音乐、视频 和 断点续传
- C#一个简单下载程序实例(可用于更新)
- git clone下载特定版本的repo
- Struts2 文件下载
- 微信小程序 - 下载图片并且显示进度
- 无法加载程序集XXX.dll 此程序集可能是从 Web 上下载的
- Google Earth Engine(GEE)——利用MODIS 的叶面积指数影像掩膜dem批量下载
- 在Android Studio中下载Android SDK的两种方式(Android Studio3.0、windows)
- 111 Storm源码下载及目录熟悉
- kubespray-offline 下载并离线部署 kubernetes 自定义版本
- 微信小程序 - 引入并使用 Fly.js 请求库(超级详细的教程及运行示例)提供 Fly.js 源码源文件下载,贴心的配置示例及注释,优雅快速的发起 http 网络请求
- 《STM32库开发实战指南:基于STM32F4》----第2章 如何用DAP仿真器下载程序 2.1 仿真器简介
- Java下载文件,中文名乱码(attachment;filename=中文文件名)
- uniapp 小程序点击下载文件
- 小程序点击下载文件并重命名
- ImageNet数据集简介、下载、使用方法之详细攻略
- Maven - 解决Maven下载依赖包速度慢问题
- 分享一百多套开发视频教程的下载地址
- linux下自己下载的程序装哪?
- java学习笔记(1)java的基础介绍 、JDK下载、配置环境变量、运行java程序
- 下载eclipse 配置eclipse 新建Java项目 写一个小程序 运行
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
- arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
- Axure谷歌浏览器Chrome扩展程序下载及安装方法
- 用USBISP/USBasp编程器给Atmega328P下载Arduino bootloader引导程序
- Fundebug后端Java异常监控插件更新至0.3.1,修复Maven下载失败的问题
- 借助浏览器下载网页上的图片或一些内容的常用方法
- STM32使用JLINK的SWD接口下载程序(keil环境下)
- STM32 SWD下载出现no target connect解决方法
- ESP8266之下载不进去程序终极解决方法
- FlyMCU下载程序出错怎么解决
- Python 基础 之 多任务 gevent 协程应用的简单案例,简单实现下载网上文件的功能(urllib,gevent 等)
- 正点原子开拓者FPGA,程序固化下载到板子里面
- MySQL的下载及安装详细教程
- ts缓存批量下载合并