微信小程序框架wepy如何与微信小程序UI库weui搭配使用?

June 12, 2018

微信小程序框架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!