The previous chapter described the process of building a project and adding pages and components using the command line. This chapter mainly summarizes the writing of the basic components and the points to note.
Add file
When we set up the project, there will be a components folder in the project to store the components we use. You can put the components provided by the uni official website, or you can customize the components. If you want to distinguish between the components provided by uni and custom components, you can also add a new division folder under this folder. As long as the reference path is written correctly, it doesn't matter how many levels of folders are.
Introduce official components
The components that need to be introduced are extended components (uni ui).
After clicking to enter the page, there are usage methods, properties, etc. of this component. We have many ways to introduce
If you want to import it directly into the project, or you can import it by yourself after downloading it.
Custom component
For example, as shown in the figure above, those beginning with capital letters are all custom components, and those beginning with uni are all officially provided components.
Regarding the writing of custom components, I actually refer to Vue.
E.g:
/*
封装对话框（包含遮罩层）
show:boolean 显示
title:string 提示头
content:boolean 提示内容
confirm:boolean 显示确认按钮
@confirm:function 绑定确认事件
cancel:boolean 显示取消按钮
@cancel:function 绑定取消事件
*/
/*
示例
<Dialog :show="overlayShow" :title="dialog.title" :content="dialog.content" :tips="dialog.tips" :confirm="dialog.confirm" @confirm="confirm" :cancel="dialog.cancel" @cancel="cancel" />
*/
<template>
<!-- 弹出框 -->
<view
v-if="show"
>
<view
class="overlay"
@click="_cancleClick"
/>
<view class="dialog-box">
<view class="dialog-content">
<view class="dialog-main">
<view class="reminder">{
{
title }}</view>
<view class="dialog-txt">
<view class="dialog-info">{
{
content}}</view>
<view class="dialog-info">{
{
tips}}</view>
</view>
<view class="dialog-btn">
<view
:class="[cancel?'':'onlyOneBtn','d-btn','sureBtn']"
@click="_sureClick"
v-if="confirm"
>{
{
confirmText}}</view>
<view
:class="[confirm?'':'onlyOneBtn','d-btn','cancelBtn']"
@click="_cancleClick"
v-if="cancel"
>{
{
cancelText}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "Dialog",
props: {
show: {
type: Boolean,
default() {
return true;
}
},
title: {
type: String,
default() {
return "温馨提示";
}
},
content: {
type: String,
default() {
return "";
}
},
tips: {
type: String,
default() {
return ""
}
},
confirm: {
type: Boolean,
default() {
return true;
}
},
confirmText: {
type: String,
default() {
return '确认';
}
},
cancel: {
type: Boolean,
default() {
return true;
}
},
cancelText: {
type: String,
default() {
return '取消';
}
}
},
methods: {
_sureClick(e) {
this.$emit("confirm");
},
_cancleClick() {
this.$emit("cancel");
}
}
};
</script>
<style lang="scss" scoped>
/* 弹框信息 - 省略 */
</style>
If you want to customize the inserted content, you can use it.
Attention:
The life cycles in uni are not the same
- Application life cycle (App)
- The life cycle of the page (Page) The
following are some screenshots
- Component life cycle (Component)
It is worth noting that:
- The life cycle of the component is created, mounted, similar to the way of writing vue
- The life cycle of the page is onLoad, onShow, etc., similar to the way of writing in Page in the applet
- The life cycle of the application is onLaunch, onShow, etc., similar to the writing in the App in the applet
Instructions
This item refers to the writing of components in vue
In the page:
<template>
<view>
<Dialog
:show="visitTipShow"
:content="visitDialog.content"
:confirm="visitDialog.confirm"
:tips="visitDialog.tips"
@confirm="visitTipShow = false"
confirmText="知道了"
:cancel="visitDialog.cancel"
/>
<Dialog
:show="dialogShow"
content="请求授权当前位置"
@confirm="openSetting"
:cancel="dialog.cancel"
/>
</view>
</template>
<script>
import Dialog from "@/components/Dialog/index.vue";
export default {
components: {
Dialog },
data() {
return {
visitTipShow: false,
visitDialog: {
content: "请使用电脑访问 ****",
tips: "进行登记",
confirm: true,
cancel: false
},
dialogShow: false,
dialog: {
confirm: true,
cancel: false
}
};
},
methods:{
openSetting(){
}
}
}
</script>