uni-app全端小程序起步 - 基础组件写法总结

前面一个章节讲述了搭建项目，用命令行新增页面和组件的一个过程。这个章节主要总结一下基础组件的写法和注意的要点。

新增文件

当我们搭建起项目的时候，项目中就会有一个 components 的文件夹，用于存放我们使用的组件。可以放 uni 官网提供的组件，也可以自定义组件。如果为了区分 uni 官方提供的组件和自定义组件也可以在此文件夹下再次新增划分文件夹。只要引用路径写正确，几层文件夹都无所谓。

引入官方提供组件

uni 官网

需要额外引入的组件都是扩展组件（ uni ui ）。

点击进入页面之后有这个组件的使用方法、属性等。我们有很多种引入方法

想要直接引入项目中，或者下载之后自己引入自行选择就可以了。

自定义组件

例如上图中所示，大写字母开头的都是自定义组件，uni 开头的都是官方提供组件。

关于自定义组件的写法其实参考的是 Vue 。

例如：

/* 
    封装对话框（包含遮罩层）
    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>

如果想要自定义插入内容使用即可。

注意的点：

uni 中的生命周期都不相同

1. 应用的生命周期（App）

2. 页面的生命周期（Page）
   以下为部分截图

3. 组件的生命周期 （Component）

值得注意的是：

• 组件的生命周期是 created、mounted，类似于 vue 的写法
• 页面的生命周期是 onLoad、onShow 等，类似于小程序中 Page 中的写法
• 应用的生命周期是 onLaunch、onShow 等，类似于小程序中 App 中的写法

使用方法

此项参考 vue 中组件的写法

在页面中：

<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>