uniapp 项目实践总结(三)全局公共组件和样式以及方法的使用
上一篇讲解了如何创建一个新的 uniapp 项目,这篇来讲解以下如何注册和使用全局的公共组件,全局样式和全局方法。
目录
- 目录结构
- 公共组件
- 公共样式
- 公共方法
目录结构
创建好项目以后,可以先初始化一下目录,下面是我自己的习惯。
┌─components
├─hybrid
│ ├─html
│ │ └─error.html
│ └─q-icon
│ └─q-icon.vue
├─pages
│ └─index
│ └─index.vue
├─static
│ ├─fonts
│ │ └─iconfont.css
│ └─image
│ └─logo.png
├─scripts
│ └─http.js
│ └─index.js
│ └─urls.js
│ └─utils.js
├─styles
│ └─extend.scss
│ └─global.scss
│ └─mixin.scss
│ └─reset.scss
│ └─variable.scss
├─App.vue
├─favicon.ico
├─index.html
├─main.js
├─manifest.json
├─pages.json
├─uni.promisify.adaptor.js
└─uni.scss
下面是官方给出的目录结构规范。
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 详见
| └─ios iOS原生资源目录 详见
├─hybrid App端存放本地html文件的目录,详见
├─wxcomponents 存放小程序组件的目录,详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─Info.plist iOS原生应用配置文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量
公共组件
下面开始公共组件的编写、注册和使用。
编写公共组件
在 uniapp 项目下是基于 vue 框架来写页面的,因此可以使用 vue 的相关知识点来新建公共组件。
在刚刚的目录结构下面,有一个components
文件夹,里面就是存放相关的全局公共组件。
我们就以全局公共图标组件为例展示一下,可以采用{作者名称}-${组件名称}
命名文件夹,{作者名称}-${组件名称}.vue
来命名组件。
- 新建文件夹
q-icon
; - 在
q-icon
文件夹下面新建q-icon.vue
组件; - 开始编写组件内容;
tips:关于图标,可以到iconfont里面找到一些你喜欢的图标加入到购物车然后添加到自己的项目里面,最后下载下来放入/static/fonts/iconfont.css
里面即可。
下面这部分是模板内容,里面有图标名称,大小和颜色的绑定。
<template>
<view class="q-icon">
<text
:class="{ demo: true, [`demo-${name}`]: true }"
:style="{ fontSize: size * 2 + 'rpx', color: color }"
>
</text>
</view>
</template>
下面这部分是方法,里面有父组件传递的消息参数和格式定义以及默认值。
<script