ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序(WeUI框架)

2019-08-27 20:40:43  阅读:207  来源: 互联网

标签:文件 框架 微信 weui WeUI 导入 wxss


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

WeUI
WeUI for小程序二维码:
在这里插入图片描述
WeUI是在微信终端非常出色的UI样式库,提供了非常多丰富的基础UI组件,最重要的是拥有了和微信一致的视觉体验,使得用户即使从微信切换到相关小程序,也不会觉得UI感到突兀。
WeUI for 小程序,也叫做weui-wxss,是写好的样式库,可以理解为之前的bootstrap。

(1)获取框架文件源码
两种方式:去github代码托管平台下载WeUI库或者clone源码
链接:https://github.com/Tencent/weui-wxss
在这里插入图片描述
将文件下载到本地解压即可。

(2)除了上述直接下载文件外,也可以通过git克隆源码到本地
clone源码:
在这里插入图片描述
在这里插入图片描述
(3)预览项目
获取文件成功后,接下来首先在小程序开发工具导入项目,进行预览。
步骤:打开微信开发者工具,点击导入项目,选择weui-wxss项目目录下的dist目录,接着点击导入,就可以看到weui的预览了。
在这里插入图片描述
在这里插入图片描述
(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文件。
在这里插入图片描述
补充说明:
①除了手机扫码,网页也可以浏览效果,官网:https://weui.io
②使用WeUI时,有时会出现错误日志,提示相关图标没有找到,把图标路径修改或者按照代码的图标路径放置图标文件即可。

标签:文件,框架,微信,weui,WeUI,导入,wxss
来源: https://blog.csdn.net/weixin_45343973/article/details/100107563

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有