因为colorUI的文档说明正在完善中，具体样式对应的类名可能不清楚，那么你可将color-ui下载下来，使用HBuilderX运行在浏览器中，打开调试工具，找到对应的节点即可获取对应的类名，（当然你也可能会有其他好的方法）。
使用colorui自定义导航栏
pages.json 配置取消系统导航栏
"globalStyle": { "navigationStyle": "custom" },
App.vue 获得系统信息
"globalStyle": { "navigationStyle": "custom" },
在main.js引入cu-custom组件
import cuCustom from './colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom)
在需要的页面可以直接使用了，如下：
<cu-custom bgColor="bg-gradual-blue" :isBack="true"> <block slot="backText">返回</block> <block slot="content">导航栏</block> </cu-custom>
跨端兼容（如何你只是开发小程序，就不需要考虑）
根据平台特性，uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
<view> <! -- #ifdef APP-PLUS --> <view>仅出现在 5+App 平台下的代码</view> <! -- #endif --> <! -- #ifndef H5 --> <view>除了 H5 平台，其它平台均存在的代码</view> <! -- #endif --> <! -- #ifdef H5 || MP-WEIXIN --> <view>仅在 H5 平台或微信小程序平台存在的代码</view> <! -- #endif --> </view>
发布微信小程序
服务器域名必须是https合法域名
进入开发页面 开发 > 开发设置，设置服务器域名, 如图
发布小程序之前需要配置appid,应用名称、logo,可登录微信公众平台进入设置页，设置小程序的基本信息
使用HBuilderx找到发行 > 小程序-微信，点击后稍等片刻会启动微信开发工具，点击微信开发工具上传，填写上传信息即可，此时上传到微信公共平台是体验版，需要在版本管理>提交审核，等待后台审核，审核完成后，小程序也就上线成功了,如图：
总结
本文主要介绍了使用uni-app框架开发微信小程序，自己对默认模板的补充，包括封装request接口，引用color-ui,动态设置底部tab页，还有通过color-ui提供的导航栏组件，自定义导航栏。本人才疏学浅，表达能力有限，书写过程如有错误欢迎指正，也请点赞评论鼓励（ps: 内心怕怕的）