更新记录
2.0.5(2023-09-07) 下载此版本
- 增加在Object.prototype上增加扩展方法示例
2.0.4(2023-04-27) 下载此版本
- 优化注释
- 更新z-paging组件至2.5.7
- README完善
- 自定义组件命名修改与文件夹同名方便检索
- 自定义导航栏引入以及示例
2.0.3(2023-04-19) 下载此版本
更新uview
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
项目介绍
主架构 uniapp
介绍
- 组件使用easycom模式,有暗坑详见示例组件内代码注释。
- 目前已经更新至uview2.0,uview1.0版本可在码云里面找到
plugins
- 路由 -> uni-simple-router
- ui框架 -> uview2.x
- api请求 -> uview自带api请求
- 图标 -> Iconfont
- 列表 -> ZPaging
项目结构
├─apis // 接口管理
│ ├─modules // api模块化目录
│ │ └─user.js // 模块化示例user
│ ├─http.api.js // 接口定义文件
│ └─http.interceptor // 拦截器
├─common // 公共文件
│ ├─config // 环境配置 (设置baseurl等)
│ ├─extend // 扩展原型方法
│ ├─filters // 全局过滤器
│ ├─tools // 全局公共方法
│ └─router // 路由文件
├─components // 项目组件库
│ ├─cl-test // easycom测试组件 (示例使用可删除)
│ ├─cl-header // 自定义导航栏
│ └─cl-icon // iconfont图标组件
├─store // vuex
│ ├─$u.mixin // store全局混入方法
│ └─index // vuex
├─uni_modules // 插件市场插件目录
│ ├─uview-ui // uview-ui
│ └─z-paging // z-paging
自定义环境配置
官方文档示例,目前已配置了H5与微信小程序,其他自行配置即可。
Iconfont 注意事项
- 在阿里矢量图标库创建项目
- 添加你所需要使用的图标文件
- 下载文件到本地后替换components/cl-icon里面的文件
Iconfont示例
iconfont库中修改示例:
代码示例:
<cl-icon type="test" size="30" color="#000000"></cl-icon>
依赖安装
- 安装之前请移除下载后自带的package.json 使用下面代码安装依赖即可运行
- uview2.0可在uni_modules下右键即可更新至最新
npm i uni-simple-router uni-read-pages
接口问题
- 因云函数收费所以目前接口无法正常跑通需在
common/config.js
中修改域名为您自己的服务器域名 - 接口定义在
apis/http.api.js
,apis/modules
为接口模块化目录 - 使用接口示例如下,或在Demo中Request请求页签中查看
// 非模块化示例
this.$api.getSearch({ keyword: '111' }).then(res=>{
// ...
})
// 模块化接口示例
this.$api.user.postGoodsInfo().then(res=>{
// ...
})
如何移除所有示例代码?
- 移除pageA与pageB目录
- 移除pages/index目录下除index.vue以外其他文件
- 移除pages.json中无用路由以及subPackages
- 移除components/cl-test测试组件