<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" alt="ColorUI简介"></img></p>
## 前言
ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。
## 交流
微信群:加入微信群请先添加开发者微信,备注UniApp插件市场。QQ群:240787041 或扫描二维码。
<p align="center"><img src="https://image.weilanwl.com/colorui/githubQrcode.jpg" alt="" style="max-width:100%;" width="748"></p>
## 素材
ColorUI在语雀有个群友共同在维护的知识库,里面有一些群友改的模板和UI素材供开发使用哦!
[语雀-ColorUI群资源](https://www.yuque.com/colorui)
## 使用UniApp开发
### 开始
下载源码解压获得`/Colorui-UniApp`文件夹,复制目录下的 `/colorui` 文件夹到你的项目根目录
`App.vue` 引入关键Css `main.css` `icon.css`
```
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>
```
### 使用自定义导航栏
导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。
`App.vue` 获得系统信息
```
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
```
`pages.json` 配置取消系统导航栏
```
"globalStyle": {
"navigationStyle": "custom"
},
```
复制代码结构可以直接使用,注意全局变量的获取。
使用封装,在`main.js` 引入 `cu-custom` 组件。
```
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
`page.vue` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
```
| 参数 | 作用 |类型 | 默认值 |
| -------- | -----: |-----: | :----: |
| bgColor | 背景颜色类名 |String | '' |
| isBack | 是否开启返回 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | -----: |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄!) |
## 使用原生小程序开发
### 从现有项目开始
下载源码解压获得`/demo`,复制目录下的 `/colorui` 文件夹到你的项目根目录
`App.wxss` 引入关键Css `main.wxss` `icon.wxss`
```
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```
### 从新项目开始
下载源码解压获得`/template`,复制`/template`并重命名为你的项目,导入到小程序开发工具既可以开始你的新项目了
### 使用自定义导航栏
导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。
`App.js` 获得系统信息
```
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
```
`App.json` 配置取消系统导航栏,并全局引入组件
```
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
```
`page.wxml` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
```
| 参数 | 作用 |类型 | 默认值 |
| -------- | -----: |-----: | :----: |
| bgColor | 背景颜色类名 |String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | -----: |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄!) |
## 赞赏
<p align="center"><img src="https://image.weilanwl.com/colorui/githubAppreciate.jpg" alt="" style="max-width:100%;" width="600"></p>
没有合适的资源?快使用搜索试试~ 我知道了~
会员制微信电商项目-wx_shop.zip
共154个文件
js:44个
json:38个
wxss:25个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 135 浏览量
2024-01-30
21:24:27
上传
评论
收藏 1.59MB ZIP 举报
温馨提示
会员制微信电商项目-wx_shop
资源推荐
资源详情
资源评论
收起资源包目录
会员制微信电商项目-wx_shop.zip (154个子文件)
.gitignore 145B
.gitignore 145B
json_data.js 46KB
NoteService.js 10KB
product.js 9KB
walkingstepsync.js 9KB
index.js 8KB
ProductService.js 7KB
cart.js 7KB
UpvoteService.js 7KB
index.js 6KB
index.js 6KB
index.js 5KB
membershipplan.js 5KB
index.js 5KB
search.js 4KB
index.js 4KB
note.js 3KB
PointService.js 3KB
point.js 3KB
WaterFallView.js 3KB
order.js 3KB
index.js 3KB
index.js 3KB
OrderService.js 2KB
level.js 2KB
index.js 2KB
ScrollCategory.js 2KB
index.js 2KB
postnote.js 2KB
index.js 1KB
membershipcard.js 1KB
index.js 1KB
LevelService.js 1KB
UserService.js 1KB
PaidService.js 1KB
MembershipService.js 1KB
WXBizDataCrypt.js 1KB
userLockCheck.js 967B
app.js 926B
cu-custom.js 857B
util.js 774B
requestSync.js 393B
index.js 306B
errorpage.js 9B
userlockedpage.js 9B
level_data.json 3KB
app.json 2KB
project.config.json 738B
project.config.json 689B
membership_plan_data.json 476B
package.json 272B
index.json 268B
package.json 266B
package.json 266B
package.json 263B
package.json 263B
package.json 261B
package.json 261B
package.json 260B
package.json 258B
package.json 256B
product.json 199B
index.json 193B
index.json 193B
search.json 193B
sitemap.json 191B
walkingstepsync.json 148B
membershipplan.json 143B
membershipcard.json 137B
postnote.json 136B
level.json 133B
cart.json 133B
note.json 130B
point.json 130B
order.json 130B
config.json 78B
config.json 78B
errorpage.json 64B
userlockedpage.json 64B
cu-custom.json 48B
WaterFallView.json 48B
userLockCheck.json 48B
ScrollCategory.json 48B
LICENSE 1KB
LICENSE 1KB
LICENSE 48B
LICENSE 44B
README.md 5KB
DIFF.md 3KB
README.md 2KB
README.md 2KB
会员体系.md 1KB
CHANGELOG.md 472B
readme.md 1B
USG.PNG 506KB
home.PNG 343KB
detail.PNG 251KB
myInfo.PNG 205KB
order.PNG 63KB
共 154 条
- 1
- 2
资源评论
武昌库里写JAVA
- 粉丝: 3228
- 资源: 1925
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功