作者目的
大概用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的配置,下期开始写第一个页面,开始真正的搬砖生涯。我也是边学边写,欢迎指正。