撸一个微信小程序(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的配置,下期开始写第一个页面,开始真正的搬砖生涯。我也是边学边写,欢迎指正。

你可能感兴趣的:(撸一个微信小程序(3))