微信小程序框架wepy如何与微信小程序UI库weui搭配使用?
微信小程序框架wepy如何与微信小程序UI库weui搭配使用?
wepy是啥,请见:https://github.com/Tencent/wepy
wepy支持引入npm包,但却没有如何引入weui组件的说明(截至到2018-6-12日没有,没准之后官方会补充呢),import 'weui-wxss'
没用。
issue中给出了一个例子:https://github.com/wepyjs/wepy-weui-demo
大意是把weui中的.wxss文件转为.less文件,然后@import到.wpy文件中
同时还给出了.wxss文件批量转为.less后缀的工具:https://github.com/stiekel/wxss2less
代码如下:
<style lang="less">
@import "../style/weui.less";
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
执行命令wepy build
后,.less文件中的内容,即被复制到.wpy中了,如下:
@import "./../npm/wepy-com-toast/toast.wxss";
@import "./../components/group.wxss";
@import "./../components/wepy-list.wxss";
@import "./../components/counter.wxss";
@import "./../components/panel.wxss";
page {
line-height: 1.6;
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
vertical-align: middle;
}
.weui-cells {
position: relative;
margin-top: 1.17647059em;
background-color: #FFFFFF;
line-height: 1.41176471;
font-size: 17px;
}
......
......
现在weui组件可以用了
但是很丑,为什么其他组件都是@import "./../components/panel.wxss";
weui却把整个文件的内容都拷贝进来了,这也不是import啊,
那么问题来了:
微信小程序框架wepy中如何import而非插入.wxss文件?
很简单:
首先.wxss不用转为.less了,然后:
@import (css) "../style/weui.wxss";
wepy build
后:
@import "./../npm/wepy-com-toast/toast.wxss";
@import "./../components/group.wxss";
@import "./../components/wepy-list.wxss";
@import "./../components/counter.wxss";
@import "./../components/panel.wxss";
@import "../style/weui.wxss";
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
完整代码请见:https://github.com/lvhongqiang/wepy-weui-demo
好了 THE END!
Recent Comments