小程序界面设计难？有了这个高颜值UI，我带你一步步解决所有难题

简单介绍

ColorUI是一个Css类的UI组件库&＃xff01;不是一个Js框架。相比于同类小程序组件库&＃xff0c;ColorUI更注重于视觉交互&＃xff01;这个组件以高颜值而得到推广&＃xff0c;深受开发者的喜爱&＃xff0c;由作者文晓港创作&＃xff0c;目前仅更新到2.0版本。

GitHub资源地址&＃xff1a;https://github.com/weilanwl/ColorUI

优势

一&＃xff1a;组件精美&＃xff0c;可以说每一个都制作精良&＃xff0c;作者很用心&＃xff0c;UI功底很扎实。

二&＃xff1a;封装性特别特别的好&＃xff0c;每一个单独的class选择器&＃xff0c;都是一个封装极好的css小组件

三&＃xff1a;感受到了作者的过人之处&＃xff0c;组件代码具有良好的兼容性&＃xff0c;扩展性&＃xff0c;我们可以在它的基础上进行灵活的修改。

使用速成&＃xff0c;快速脱坑

说起小程序&＃xff0c;最头疼的不过是小程序界面的设计&＃xff0c;对于不了解、不精通Css技术的开发者来说简直就是噩梦。因此小编就想着能不能有弄好的组件能直接套用呢&＃xff1f;&＃xff1f;在网上搜了一下&＃xff0c;感觉这个新出现的ColorUI很有意思&＃xff0c;颜值也很高&＃xff0c;就尝试的用了一下&＃xff0c;好用到我简直我不禁膜拜文晓港大佬&＃xff0c;造福苍生啊~~&＃xff01;&＃xff01;&＃xff01;下面说一下这个组件的用法&＃xff0c;和一些简单的小技巧帮助快速脱坑。

• 第一步下载源代码

• 下载完后打开微信开发工具&＃xff0c;点击导入项目&＃xff0c;选择文件demo导入&＃xff0c;作为模板参考
• 再新建个项目--选择文件--点击右键--选择硬盘资源打开--删除所有的文件将下载资源的template更名为你的项目名
• 在app.wxss中添加&＃64;import “icon.wxss"; &＃64;import “colorui.wxss"; 就可以开始用了

使用的小技巧和组件使用的简单介绍

完成项目创建之后&＃xff0c;看着精美的模板&＃xff0c;是不是感叹它的神奇呢&＃xff1f;别着急&＃xff0c;用了之后你会更加感叹&＃xff0c;超级好用&＃xff01;&＃xff01;&＃xff01;

我们简单制作个小程序首页为案例分析下如何操作既简单又方便。

首先提出一些问题&＃xff0c;我们带着问题跟着教程走&＃xff0c;逐步解决问题&＃xff0c;传授技巧&＃xff1a;

1. 怎么快速的找到代码在哪&＃xff1f;
2. 底部导航栏&＃xff0c;顶部标题栏怎么保持它一直在底部、顶部&＃xff1f;
3. 为什么我后页面显示的效果和模板不一样&＃xff1f;
4. 组件&＃xff0c;底部的导航栏怎么点击不出动态的效果呢&＃xff1f;
5. 我想更换组件的图片或文字&＃xff0c;要怎么操作呢&＃xff1f;

每个页面最上面有个标题栏&＃xff0c;有时会带有返回&＃xff0c;关闭等这些按钮&＃xff0c;和页面最底下的tabBar导航栏&＃xff0c;我们先做这两个。

脱坑第一招&＃xff1a;善用后台调试的小箭头&＃xff0c;查看wxml和css样式代码

看到图片中的左上角的箭头图标了吗&＃xff1f;这是我们开发者在浏览器中最常用的元素查看器&＃xff0c;点击后将箭头指向页面的某一部分&＃xff0c;在后台就能看到对应这一部分的页面代码在哪了&＃xff0c;同时还有css样式的代码。

这里提醒一下&＃xff0c;注意要点击才有&＃xff0c;想查看其他文件的代码&＃xff0c;记得点击后点击console再选择wxml更新代码。代码和样式仅用来观看&＃xff0c;不要为了方便直接复制对应的代码和样式。我们可以通过关键字来到对应的文件查找代码或样式。

脱坑第二招&＃xff1a;善用小程序快捷键&＃xff0c;加快效率

最好用的就是ctrl&＃43;F&＃xff0c;可以在所在文件中输入关键字搜索到具体位置&＃xff0c;除此外还有其他常用快捷键&＃xff0c;同时还有代码提示生成的一些插件&＃xff0c;有兴趣的可以上网查找&＃xff0c;我是配置的Visual Studio Code的插件&＃xff0c;微信开发工具自己就有了。

ctrl&＃43;F/鼠标连点三下 选择光标所在的行

ctrl&＃43;S 保存并编译代码

Alt&＃43; ↑ ↓ 移动光标所在行的整行代码

shift&＃43;鼠标 按住shift&＃xff0c;鼠标前后点击的范围内代码被选中

shift&＃43;alt&＃43;F 格式化代码&＃xff0c;代码缩进等

有了上面两招&＃xff0c;就可以在模板文件里查找对应想要的组件代码啦~&＃xff0c;这里注意&＃xff1a;在摘取代码时&＃xff0c;习惯这些顺序 1.搜索组件关键字 2.找到对应的代码&＃xff0c;注意看下你的代码有没有更外层的&＃xff0c;记得别忘了复制&＃xff0c;否则会和模板的效果不一样。 3.复制所在的文件中wxss的额外css样式。 最后看下js和json文件有没有数据&＃xff0c;有则一样复制。

看下效果&＃xff0c;上面1、3问题都解决了&＃xff0c;来看在2、5问题&＃xff0c;怎么保持顶框和底框动呢&＃xff1f;&＃xff1f;我们知道小程序有个app.json里有tabBar底层导航栏设置&＃xff0c;但细心的朋友能发现我们代码里是没有的&＃xff0c;说明colorUI没有使用这样的方法&＃xff0c;只是单纯固定了组件而已&＃xff0c;而方法更是简单的令人发指&＃xff0c;就是在组件的最外层的style最后补上shdow foot。我们也可以通过第一招来查看模板代码&＃xff0c;也可以发现shdow foot的存在。这里就不贴代码了

效果图

图片中最右边为我的效果图&＃xff0c;选取了左边的红色组件和中间的黑色组件。可以看到组件效果成功&＃xff0c;并且颜色&＃xff0c;文字有所改变&＃xff0c;怎么做到的呢&＃xff1f;&＃xff1f;

这里贴代码哈&＃xff0c;具体修改不在图上标识了。首先&＃xff0c;我们能看到最外层class中有bg-white 和内层里有 text-green text-gray&＃xff0c;知道了吧&＃xff0c;这里我们可以到icon.wxss里搜一下关键词&＃xff0c;能看到也有其他的颜色的样式&＃xff0c;我这里就不贴图了&＃xff0c;复制后能更改样式颜色&＃xff0c;文字也可以通过js进行绑定动态修改或直接修改。

最后一个问题哈&＃xff0c;组件&＃xff0c;底部的导航栏怎么点击不出动态的效果呢&＃xff1f;

你能发现点击底部导航栏其他图标&＃xff0c;没有变色或者页面跳转的效果。为什么呢&＃xff1f;简单来说&＃xff0c;colorUI就只是个组件&＃xff0c;并没有这些功能&＃xff0c;需要你自己为图标标签或者按钮标签添加事件&＃xff0c;在js里编写方法实现颜色的变化和页面的跳转等功能&＃xff0c;这才是我们开发小程序的核心代码。至于实现方法就当做是作业留给各位的读者啦~~

最后贴一下我制作的首页页面&＃xff0c;完成后我会在评论区留下共享地址。

小编也是在学习小程序的初期&＃xff0c;头一次在头条发干货&＃xff0c;如果小编有什么错误或者你们有什么疑问也欢迎评论区留言。最后看在满满的干粮的份上&＃xff0c;点个关注吧&＃xff01;&＃xff01;&＃xff01;感谢&＃xff01;&＃xff01;&＃xff01;