资讯专栏INFORMATION COLUMN

使用ColorUI组件

weizx / 1086人阅读

摘要:复制我们要使用的那段代码到我们小程序项目中。三总结使用还是很简单的。下载的官方代码,每个组件一个多带带目录,目录中包含了该组件所有的代码,找起来很方便。

 项目初始化请参照:使用ColorUI构建小程序项目_LookOutThe的博客-CSDN博客

目录

一、开发准备工作

1.在前端开发工具中打开下载好的demo目录

2.浏览器打开demo

3.微信开发工具打开上一篇构建好的项目

二、开始使用

1.找需要使用的组件

2.复制我们要使用的那段代码到我们小程序项目中。

三、总结


一、开发准备工作

1.在前端开发工具中打开下载好的demo目录

我使用的是HBuilderX,该步骤是为了复制我们需要的代码

2.浏览器打开demo

官方demo:(ColorUI组件库 )   该步骤是为了找我们要用的组件 

3.微信开发工具打开上一篇构建好的项目

我用的是自己的项目,也就是采用的是从现有项目开始。

二、开始使用

1.找需要使用的组件

1.1从浏览器打开的demo中查找需要使用的demo,比如我们需要使用一个进度条

1.2可以看到是在basics下的Process模块,点击去后如下图:

 1.3 比如我们要使用第一个,那么在HBuilderX中打开的demo中查找:

所有组件都在pages下,浏览器找的是basics下的Process模块。

那么就在basic目录下的progress目录中打开.wxml文件。

2.复制我们要使用的那段代码到我们小程序项目中。

 赋代码:

      61.8%        61.8%        61.8%  

 这里面有一个loading变量,没有值的话,进度条是空,我们可以给这个变量赋值

 在index.js中,设为true,然后点击保存,编译,效果如下。

这是在我现有项目中沾进去的,直接沾到了最后。不影响测试进度条。

三、总结

       使用还是很简单的。我们首先构建项目,然后在浏览器demo中找我们需要的组件,然后在前端工具中打开的代码里面找到需要的代码,复制到小程序项目中。就可以使用了。

       下载的官方代码,每个组件一个多带带目录,目录中包含了该组件所有的代码,找起来很方便。比如.wxml中bindtap绑定了一些函数,直接去当前目录下的.js文件中就能找到,直接复制到小程序项目中就可以使用了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/122365.html

相关文章

  • 小程序·云开发实战 - 校园约拍小程序

    摘要:接下来我将结合项目的讲解给大家分享一些实用技术和对于云开发的一些经验,希望对正在学习小程序的你有帮助。 创意来源于生活,之所以开发这个校园约拍小程序,是因为在摄影选修课上常听老师抱怨外出写生老找不到模特,许多大学生都想拥有一套专属自己记忆的摄影作品,记录下不会磨灭的美好回忆,可如何找到让自己满意的摄影师是他们的难题。悦拍屋是一个校园摄影o2o的约拍平台,提供全方位的约拍服务,同时提供一...

    QiShare 评论0 收藏0
  • 2019,帮助你更好的开发小程序

    摘要:前言原生开发小程序有了两个项目,在原生开发小程序经验技巧方面有一些自己的总结,此篇文章做原创分享本文适合老手查看,新手请参阅官方文档,同步至。 前言 原生开发小程序有了两个项目,在原生开发小程序经验技巧方面有一些自己的总结,此篇文章做原创分享! 本文适合老手查看,新手请参阅官方文档,同步至github。 1.发布订阅处理复杂逻辑 支持先订阅后发布,以及先发布后订阅 方法源码 var E...

    DevTalking 评论0 收藏0
  • vue学习笔记(三)

    摘要:直接创建组件使用标签名组件模板,根据组件构造器来创建组件。相应的,实例也被称为父组件。而且不允许子组件直接修改父组件中的数据,强制修改会报错。 一、组件 (一)什么是组件 组件(Component)是 Vue.js最强大的功能之一。组件可以扩展 HTML元素,封装可重用的代码组件是自定义元素(对象)。 (二)创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词,例如:。 1、使用...

    fsmStudy 评论0 收藏0
  • vue学习笔记(三)

    摘要:直接创建组件使用标签名组件模板,根据组件构造器来创建组件。相应的,实例也被称为父组件。而且不允许子组件直接修改父组件中的数据,强制修改会报错。 一、组件 (一)什么是组件 组件(Component)是 Vue.js最强大的功能之一。组件可以扩展 HTML元素,封装可重用的代码组件是自定义元素(对象)。 (二)创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词,例如:。 1、使用...

    zsirfs 评论0 收藏0
  • React 深入系列2:组件分类

    摘要:无状态组件和有状态组件无状态组件和有状态组件,划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件,划分依据是根据组件的职责。 React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 React 组件有很多种分类方式,常见的分类方式有函数组件和类组件,无状态组件和有状态组件...

    fizz 评论0 收藏0

发表评论

0条评论

weizx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<