目录
注意:colorUI的app.json文件和原生的微信小程序的app.json有所不同了
之前记录了weUI组件库的基础使用,现在用一下更加【漂酿】的colorUI,weUI组件库的博客在这里:微信小程序-weUI组件库_五速无头怪的博客-CSDN博客
https://blog.csdn.net/black_cat7/article/details/120673884
相较于weUI和原生微信小程序 样式的统一,colorUI更注重于【个性】,它的样式很动感,blingbling的,比较适合做一些活泼的活动小程序.而且,colorUI能兼容uniapp、微信小程序,还能用uniapp发布h5版本,兼容效果非常好。
相较于weUI的使用上,colorUI会更复杂些,准确的说,是更繁琐一些,毕竟是大佬一个人肝出来的,而且对组件的样式、封装做了很强的兼容性处理,所以使用上没有weUI那种有团队做的简易,而且目前colorUI的文档,没有完成,只针对部分内容做了介绍,所以需要大家下载源码自行摸索(其实封装的挺易懂的~)
就算你觉得麻烦不想用,也完全可以留下colorUI的wxss样式文件,肯定在其他项目中能用到,cv大法好呀~
那么前言就介绍到这里,接下来会对colorUI的使用进行介绍。
colorUI在线效果演示:(用uniapp发布的h5)
ColorUI组件库 (color-ui.com)
https://demo.color-ui.com/colorUI仓库镜像地址:
ColorUI群资源 · 语雀 (yuque.com)
https://www.yuque.com/colorui 一些针对colorUI组件介绍的博客:(比官方文档详细w(゚Д゚)w)
小程序与colorUI实战总结_steve1988717的博客-CSDN博客使用colorUI,首先在app.wxss引入这两个文件@import "colorui/main.wxss";@import "colorui/icon.wxss";想实现下面的tabbar的效果,可以按着下面的步骤来写<view class="cu-bar tabbar bg-white"> <view data-num="1" class="acti...https://blog.csdn.net/steve1988717/article/details/96099036小程序ColorUI使用简易教程_仗剑东游的猫-CSDN博客_colorui本教程配合官方示例食用更佳!!!目录前言快速上手使用UniApp开发开始使用自定义导航栏使用原生小程序开发从现有项目开始从新项目开始使用自定义导航栏组件基础元素layout布局Background背景Text文字Icon图标Button按钮Tag标签Avatar头像Progress进度条Border&S...
https://blog.csdn.net/miao_yf/article/details/102971767


你可以参考效果,找到对应的代码,复制到自己的项目里去使用
当然,开着这个项目找不太方便,现在就要用到上面的地址链接了ColorUI组件库效果演示H5,这样方便开发。
template文件夹里就是最基础的微信小程序内容,只不过放好了colorUI组件库的文件


【cu-custom】组件中,还有 colorUI的navigation(顶上的导航栏),详细介绍看下方【自定义顶部导航栏】
而且,在app.wxss(全局样式)文件中也引入好了colorUI的样式文件


colorUI空文件中的app.json文件,【使用顶部导航栏cu-custom组件】,替换默认的顶部导航栏效果,同时,里面舍弃了tabBar配置,博客后面会介绍tabBar在index文件中的配置,详情请看【自定义tabBar】。
colorUI空文件中,app.json文件中,有一行"navigationStyle": "custom" 是原生小程序没有写的
这段代码是用来 关闭【默认导航栏样式】和 引入colorUI自定义顶部导航栏

页面中使用方法:
<!-- 顶部导航栏 组件 -->
<cu-custom bgColor="bg-gradual-blue">
<view slot="content">ColorUI 空白模板</view>
</cu-custom>
效果如下:

你也可以做的更好看一些:
<!-- bgImage==> 顶部导航栏的背景图片
isBack="{{true}} ==》 开启返回箭头
-->
<cu-custom bgImage="../../../images/wave.gif" isBack="{{true}}">
<!-- slot="backText" ==》 跟在返回箭头之后 -->
<view slot="backText">返回</view>
<!-- slot="content"===》居中的标题文字 -->
<view slot="content">微动画</view>
</cu-custom>
这样的 navigation(顶上的导航栏)更加美观个性化:

而且:如果不在wxml中使用
使用自定义tabBar组件,需要对菜单页面进行一定的改造,接下来说明一下其和原生微信小程序在构造上的区别与注意点
原生小程序项目标准格式:


原生小程序的tabBar菜单对应的页面都在pages文件夹下,按照Page格式设置js内容;使用的组件效果则是放在对应的compoents文件夹下,每个tabBar菜单对应是一个Page页面
colorUI使用自定以tabBar的方法
在colorUI中,因为使用的是自定义的tabBar,是通过组件的形式引入到页面中,然后通过样式将这个组件固定定位 position: fixed到页面的下放bottom位置。达到跟原生tabBar类似的效果。
这里就先说一下原理,详细的代码我后单独弄一篇博客,不然这里太长了~
微信小程序-colorUI组件库-自定义tabBar_五速无头怪的博客-CSDN博客
https://blog.csdn.net/black_cat7/article/details/120740381


看上面截图对照,你可能绝对好像自定义tabBar和原生的tabBar也没啥太大区别,尤其是第一种自定义tabBar,跟原生的看起来不能说毫不相关,只能说是一模一样。

但是,原生的tabBar,限制死了就那几样配置参数

路径pagePath、菜单名文字text、未选中图标、选中图标iconPath、selectedIconPath,还有一些操作栏颜色、定位的参数,没有其他多余的配置项目了(不过也满足基础使用了)
但是如果想要实现在tabBar上的一些样式、显示效果的改动,害得是自定义tabBar

像这个
按钮、红色角标都得靠封装的自定义tabBar组件来实现,原生的tabBar没法做到,各有所长吧。
关于微信小程序自定义tabBar,可以在官方文档了解一下大概内容:
以上,就是colorUI组件库的基础介绍和如何使用的介绍,更加详细的组件使用、属性说明都在上方的链接中,有不少博客参考。
前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU
@作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中,用于实现
提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信
对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同
技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进
在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更
前言微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售,必须先通过微信平台(pay.weixin.qq.com)去将商家进行注册。注册成
介绍 最近在做微信小程序时,顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了,在另外一款手机差很多。我在查阅资料后,提出了一种方法解决这个问题,即:在页面onLoad或组件created时,利用微信小程序提供的API,获取系统状态栏高度和胶囊信息,进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证,能做到精准对齐。理论 胶囊样式应该是垂直居中,有1px的border,border-radius为18px。 若要使顶部标题栏与胶囊对齐,则其高度必须是导航栏高度,标题栏内容也要垂直居中,顶部标题栏的外边距或内边距必须是状态栏高度。 如果顶部
运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中,普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据,比如查看联系人,短信,通话记录等等,以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息,然后查询联系人号码,再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid