撸一个微信小程序（3）

作者目的

大概用N篇文章去记录，开发一个小程序，虽然项目我已经开源，作为在掘金的第一次写作，还是需要认真一点的。本项目仅涉及前端内容，后端是已经成品的接口，所以还是比较简单的。全部使用微信纯原生写法，小白写法，有什么不对的欢迎指教（喜欢记得关注，转载请标明出处）

本页概况

• ColorUI下载
• ColorUI 导入
• ColorUI 引用
• app.js的配置

正文开始

1、ColorUI下载

地址：https://github.com/weilanwl/ColorUI/
由于官网打不开，我们可以从GitHub上进行下载，colorUI官方提供了样式demo，我们可以直接在本地运行，可以看每个组件的效果。

demo打开效果

这个demo最大的作用就是，在里面找到我们想要的组件，然后进行复制，和简单修改，这样的话，做起来比较简单。

2、ColorUI 导入

这里我们不需要使用template，我们直接复制/template/colorui目录到项目根目录。

最终效果

image.png

3、ColorUI 引用

虽然目录导入进来的，但我们还是无法直接使用它的样式，需要给全局配置一下。找到app.wxss文件，在里面添加如下代码即可。

@import "colorui/main.wxss";
@import "colorui/icon.wxss";

4、app.js的配置

清空掉原来的app.js文件内容，使用下面进行代替，其中xxxxxx代表自己根据实际情况填写，目前都没什么用。其中api这是全局的配置文件，后续需要你上传到自己的服务器，这样就不用每次改小程序代码了。

App({
  onLaunch: function () {
    this.globalData = {
      userInfo: {},
      canIUseGetUserProfile: false,
      hasUserInfo: false,
      weixin:'xxxxxxx',
      appid:'xxxxxxx',
      api:'https://www.somekey.cn/mini/hero/getHeroConfig.json'
    }
  }
})

ENDING

今天只是小试牛刀，对UI框架的导入以及app.js的配置，下期开始写第一个页面，开始真正的搬砖生涯。我也是边学边写，欢迎指正。