wepy集成colorui 样式框架

一、导读

1. colorUI 是一款css类库，超高的颜值，但是奈何自己使用的是wepy框架，官方给的是原生的方法，这里介绍一下如何在wepy项目中使用。
2. 项目源码git地址：传送门
3. 预览小程序：
   

二、步骤

1. 首先修改app.wpy，添加全局样式，和使用全局组件

...
    usingComponents: {
      "cu-custom": "/public/styles/colorui/components/cu-custom"
    },
...
<style lang="less">
@import "/public/styles/colorui/main.wxss";
@import "/public/styles/colorui/icon.wxss";
</style>

2. 修改colorUI中的cu-custom.js文件，引入wepy,修改组件初始数据，变成wepy的写法

import wepy from 'wepy'

  /**
   * 组件的初始数据
   */
  data: {
    StatusBar: wepy.$instance.globalData.StatusBar,
    CustomBar: wepy.$instance.globalData.CustomBar,
    Custom: wepy.$instance.globalData.Custom
  },

3. 页面中就可以这么使用demo中的标题栏

    <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
        <view slot="backText">返回</view>
        <view slot="content">海报</view>
    </cu-custom>