26.微信小程序（WeUI框架）

旧城等待， 2023-06-18 04:00 51阅读 0赞

# 微信小程序（WeUI框架） #

# 前言 #

前言：  
因为小程序的api描述都比较简单，并没有wxml及wxss的描述，有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI（简称MD）、Semantic UI（简称Semantic ）、uni-app、MUI、Element等等类似的框架UI库

小程序UI库WeUI：  
结果当前是当前有的，它就是微信小程序官方推出的小程序UI库WeUI。

# 简介 #

WeUI是什么?  
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。  
WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样式和微信一样，能够很好地和微信融合在一起，给用户较好的体验。

# WeUI #

WeUI for小程序二维码：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

WeUI for 小程序，也叫做weui-wxss，是写好的样式库，可以理解为之前的bootstrap。

（1）获取框架文件源码  
两种方式：去github代码托管平台下载WeUI库或者clone源码  
链接：https://github.com/Tencent/weui-wxss

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

（2）除了上述直接下载文件外，也可以通过git克隆源码到本地  
clone源码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

（3）预览项目  
获取文件成功后，接下来首先在小程序开发工具导入项目，进行预览

步骤：打开微信开发者工具，点击导入项目，选择weui-wxss项目目录下的dist目录，接着点击导入，就可以看到weui的预览了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

（4）使用WeUI库开发  
了解了weui的预览方法，接下来就可以使用weui进行开发了。

使用weui进行开发可以简单分为两个步骤  
①导入weui.wxss文件→文件位置weui-wxss-master\\dist\\style\\weui.wxss  
②参照weui提供的例子使用weui组件

（5）导入weui.wxss文件  
分析：因为weui.wxss是样式文件，所以导入需要在工程的样式文件进行导入，在这里因为要在项目全局使用weui的，所以在项目根目录的app.wxss文件进行导入。  
步骤：在工程下创建style样式文件目录，把weui.wxss文件拷贝进去。接着，在app.wxss通过@import导入weui.wxss文件。

（5）引入样式文件weui.wxss

![在这里插入图片描述][20191130091656493.png]  
（6）参照weui提供的例子使用weui组件  
在example目录找到对应组件的视图层代码和逻辑层代码，比如要使用的九宫格，就位于example目录下的grid，可以直接拷贝使用里面的代码。  
仿照源码，复制相应代码即可，这样就可以简单的调用WeUI组件了

补充说明：  
①除了手机扫码，网页也可以浏览效果，官网：https://weui.io  
②使用WeUI时，有时会出现错误日志，提示相关图标没有找到，把图标路径修改或者按照代码的图标路径放置图标文件即可。

# WeUI基础组件 #

WeUI提供非常多的基础组件，列举如下：

（1）表单组件  
button按钮、input输入框、list列表、slider滑块、Uploader 上传组件  
（2）基础组件  
article 文章、badge 徽章（小红点）、flex 布局、footer 脚注、gallery 画廊、grid九宫格、icons图标、loadmore加载更多、panel面板、preview表单预览、progress进度条  
（3）操作反馈  
actionSheet 弹出式菜单、dialog 对话框、msg 提示页、picker 选择器、toast 弹出式显示  
（4）导航相关  
navbar 导航栏、tabbar 选项栏  
（5）搜索相关  
searchbar搜索栏

# 如有问题或者疑问请留言联系小编！！！！ #

# 感谢来访！！！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019113009160254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191130091611601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191130091621406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191130091629483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191130091656493.png]: https://img-blog.csdnimg.cn/20191130091656493.png