『全栈开发』小程序开发过程全记录(四):UI框架整合

『全栈开发』小程序开发过程全记录(四):UI框架整合
jiutian99
jiutian99
98
阅读
0
评论
2021年10月25日08:02:52 0 98

UI是所有软件产品的颜值,使用UI系统,能够保证颜值在7~8分左右,而且不用花大量的时间写样式代码。所以,整合一套好用的“大漂亮”UI框架进来,是项目正式开发前,需要做的一项基础工作。

经过精心挑选之后,决定使用的UI框架叫做 ColorUI (一款想给你点颜色看看的UI)。好啦~我们开始搬砖~~

第一步:下载ColorUI组件

打开度娘直接搜索 ColorUI,第一个搜索结果 就是ColorUI官网,点击【下载开发版】即可。这一步简单的很~

第二步:将组件整合到uni-app项目中

打开 ColorUI-master\Colorui-UniApp,将colorui文件夹,复制到项目中。

在app.vue引入css

在main.js引入cu-custom 组件 

完成以上两个步骤,就可以在项目中使用colorui了,怎么使用呢?

最简单粗暴的方式,可以从ColorUI的源码中复制自己想要的部分去使用。使用方式是导入下载的压缩包里面的那个demo文件,把它导入到小程序项目中。

打开后这里就可以查看你所需要的元素的源代码了:

之后找到你需要的标签,点击左下角打开路径(方便找到对应代码在哪,可忽略此步骤),再打开相应的xxx.wxml文件将你需要代码复制到你自己的项目中,就可以使用了。

到这一步对于使用微信小程序原生开发,应该就够用了。但是,使用uni-app设计页面,还可以再"偷懒"一步。就是下载一个已经整合了colorUI+uni-app的全套模板。

我下载的是这一套:

1、打开Hbuilder,导入项目

2、运行

看一下运行效果

OK,完成以上步骤。接下来,我们来做一个使用的示例。

做一个简单的授权登陆页面,授权登陆页面大概长什么样子?上一个步骤,别人画好的授权登陆页面,就挺好的,我们就照猫画虎也弄一个吧~

余额充值 点赞(0)
weinxin
账号+金额发此微信
充值后请把会员账号/用户名+充值金额发送到此微信:tourism52
历史上的今天
01月
18
Web,教程,Gin,最佳,实践,Web,教程,Gin,最佳,实践, 菜鸟教程

Go Web教程24:Gin最佳实践

Go Web教程24:Gin最佳实践 概述 前面讲了Go中,怎样集成Gin,怎样定义Gin中间件。 今天把我的Gin CURD最佳实践代码分享给大家 创建bannerApi.go,...
文件,系统,安全 菜鸟教程

文件系统安全

文件系统安全Table of Contents◾Null 字符问题PHP 遵从大多数服务器系统中关于文件和目录权限的安全机制。这就使管理员可以控制哪些文件在文件系统内是可读的。必须...
指令,分隔符 菜鸟教程

指令分隔符

指令分隔符同 C 或 Perl 一样,PHP 需要在每个语句后用分号结束指令。一段 PHP 代码中的结束标记隐含表示了一个分号;在一个 PHP 代码段中的最后一行可以不用分号结束。...
jsp,及其,应用 菜鸟教程

JSP及其应用

是 Servlet 的扩展,本质上还是 Servlet每个 Jsp 页面就是一个 Servlet 实例Jsp 页面会被 Web 容器编译成 Servlet,Servlet 再负责响...
java,基础, vs ,python,学习,多态 菜鸟教程

Java基础 VS Python基础学习6--多态

面向对象编程三大机制,继承、封装、多态。今天大家一起来Java和Python的多态,简单来说,多态是指,针对某个类型的方法调用,其真正执行的方法取决于运行时期实际类型的方法。这话说...
Web,安全,Web,安全,此刻,您,已向,整个,世界, 菜鸟教程

Web 安全

Web 安全 此刻,您已向整个世界提供了您的 IP 地址。 请确保您没有同时提供对私人数据的访问权限。 您的 IP 地址是公共的 访问因特网是要冒安全方面的风险的。 当您连到因特网...

Comment list 共有 0 条评论

暂无评论