介绍 & lt; view 类=皃age"祝辞& lt;/view> & lt; view 类=皃age"比;
& lt; view 类=皃age__hd"祝辞& lt;/view> & lt; !——页头——比;
& lt; view 类=皃age__bd"祝辞& lt;/view> & lt; !——主体——比;
& lt; view> & lt;/view> & lt; !——未设置页脚——比;
& lt;/view> & lt; view 类=皐eui-footer"在我是页脚& lt;/view> & lt; view 类=皐eui-footer"比;
& lt; view 类=皐eui-footer__links"祝辞
,,,& lt; navigator url=?”,类=皐eui-footer__link"在上海物联网科技有限公司& lt;/navigator>
& lt;/view>
& lt; view 类=皐eui-footer__text"祝辞Copyright ?,程序媛专用& lt;/view>
& lt;/view> & lt; view 类=皃age"比;
,,,& lt; view 类=皃age__hd"比;
,,,,,,,& lt; view 类=皃age__title"祝辞Button
,,,,,,,& lt; view 类=皃age__desc"在按钮,WeUI采用小程序原生的按钮为主体,加入一些间距的样式。;/view>
,,,& lt;/view>
,,,,
,,,& lt; view 类=皃age__bd page__bd_spacing"比;
,,,,,,,& lt; button 类=皐eui-btn",类型=皃rimary"在页面主操作,Normal
,,,,,,,& lt; button 类=皐eui-btn",类型=皃rimary",禁用=皌rue"在页面主操作,Disabled
,,,,,,,& lt; button 类=皐eui-btn",类型=癲efault"在页面次要操作,Normal
,,,,,,,& lt; button 类=皐eui-btn",类型=癲efault",禁用=皌rue"在页面次要操作,Disabled
,,,,,,,& lt; button 类=皐eui-btn",类型=皐arn"在警告类操作,Normal
,,,,,,,& lt; button 类=皐eui-btn",类型=皐arn",禁用=皌rue"在警告类操作,Disabled
,,,,,,,& lt; view 类=癰utton-sp-area"比;
,,,,,,,,,,,& lt; button 类=皐eui-btn",类型=皃rimary",平原=皌rue"在按钮& lt;/button>
,,,,,,,,,,,& lt; button 类=皐eui-btn",类型=皃rimary",禁用=皌rue",平原=皌rue"在按钮& lt;/button>
,,,,,,,,,,,& lt; button 类=皐eui-btn",类型=癲efault",平原=皌rue"在按钮& lt;/button>
,,,,,,,,,,,& lt; button 类=皐eui-btn",类型=癲efault",禁用=皌rue",平原=皌rue"在按钮& lt;/button>
null
null
null
null
null
null
小编给大家分享一下小程序如何引入框架WeUI,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
首先来看下WeUI的官方介绍:
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI框架,这样可以省去以后很多麻烦。
WeUI作为一个开源的移动端UI框架,由于它是微信官方提供的对微信的兼容性没有太大问题,而且和各组件的样式和微信一样,能够很好地和微信融合在一起,给用户较好的体验。
使用步骤
1,在GitHub上https://github.com/weui/weui-wxss/下载程序代码,解压后可以看到如下目录:
2,我们只需要将weui-wxss-master \ dist \ \ WeUI风格。wxs文件导入到小程序项目的根目录下:
3,新建微信小程序项目,将WeUI。wxs文件导入到小程序项目的根目录下:
4,在项目中引用:在全局app.wxss中加入WeUI。wxs的引用——@ import“weui.wxss"
5根组件使用class="页"
6页面骨架
7除此之外都是按照weui——开头后接组件名称,例如类=皐eui-footer”
8组件的子组件样式,例如视图。weui-footer组件还有链接和版权信息。
9,具体组件在小程序中新建个项目,地址指向weui-wxss-master \ dist,就可以随时查找自己要的效果,剩下的就是复制粘贴了,或者导入从github上下载代码中的实例使用,在项目中使用weui的样式如下:
示例代码:
