共计 3987 个字符,预计需要花费 10 分钟才能阅读完成。
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 setup name="qIcon">
const props = defineProps({
// 名称
name: {
type: String,
default: "home",
},
// 大小
size: {
type: Number,
default: 16,
},
// 色彩
color: {
type: String,
default: "#333",
},
});
</script>
上面这部分是组件的款式,能够引入刚刚在 iconfont 下载的文件。
<style scoped>
@import "/static/fonts/iconfont.css";
.q-icon {padding: 10rpx;}
</style>
注册公共组件
- 引入到
main.js
文件进行注册;
在 main.js
文件进行一下引入。
import qIcon from "./components/q-icon/q-icon.vue";
app.component("q-icon", qIcon);
- 应用
easycom
办法进行注册;
"easycom": {
"autoscan": true,
"custom": {"^q-(.*)": "@/components/q-$1/q-$1.vue"
}
}
- 主动注册,发现不必以上办法,也能够间接应用,只有是在
components
文件夹外面并且合乎官网标准就可;
应用公共组件
实现以上两步当前就能够应用公共组件了。
关上 /pages/index/index.vue
,在template
外面写入以下内容。
<q-icon name="user" :size="20" color="#333" />
公共款式
编写公共款式能够缩小咱们款式的反复冗余,进步页面渲染效率和页面编写速度,上面就是编写、注册和应用的办法。
编写公共款式
在刚刚的目录 styles
上面,曾经提前创立好了一些款式文件。
上面就做一个刚刚图标公共款式的示例。
- 在
variable.scss
外面退出一个色彩变量$iconBgColor: #666;
; - 在
global.scss
外面写一个款式;
// 图标
.block-icon {border: 2rpx solid $iconBgColor;}
注册公共款式
- 能够在
main.js
外面引入之前写好的全局文件;
import "./styles/global.scss";
- 能够在
App.vue
外面引入;
<style lang="scss">
/* 每个页面公共 css */
@import "./styles/global.scss";
</style>
应用公共款式
例如:在 /pages/index/index.vue
外面应用公共款式。
<view class="block-icon"> Uniapp </view>
公共办法
以下是公共办法的编写、注册和应用的办法。
编写公共办法
这次以一个简略的求和函数办法为例。
在 scripts
文件夹外面的 utils.js
外面写入一个办法。
// 通用办法
// 求和办法
const sum = (a, b) => a + b;
const utils = {sum,};
export default utils;
注册公共办法
- 引入到
/scripts/index.js
;
// 公共办法
import utils from "./utils.js";
const apis = {utils,};
export default apis;
- 引入到
main.js
;
import apis from "./scripts/index.js";
// vue2
Vue.prototype.$apis = apis;
// vue3
app.config.globalProperties.$apis = apis;
应用公共办法
在 /pages/index/index.vue
调用办法。
- 页面局部
<view class="text-sum">
<input
class="text-sum-ipt"
type="text"
v-model.number="sum.num1"
placeholder="请输出数字 1"
/>
<text>+</text>
<input
class="text-sum-ipt"
type="text"
v-model.number="sum.num2"
placeholder="请输出数字 2"
/>
<text> 后果是:{{sum.result}}</text>
</view>
<button type="primary" @click="calcSum"> 求和 </button>
- 款式局部
.text-sum {
display: flex;
padding: 50rpx 0;
text-align: center;
.text-sum-ipt {
margin: 0 20rpx;
width: 100rpx;
border: 1rpx solid $iptBorColor;
}
}
$iptBorColor
是我在 uni.scss
外面退出的一个变量:
/* 首页变量 */
$iptBorColor: #999;
- 办法局部
export default {data() {
return {
sum: {
num1: 0,
num2: 0,
result: 0,
},
};
},
methods: {calcSum() {this.sum.result = this.$apis.utils.sum(this.sum.num1, this.sum.num2);
},
},
};
最初
看一下最初的成绩展现。
以上就是全局注册公共组件、款式和办法的次要内容,有不足之处,请多多斧正。