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)

在这里插入图片描述

  1. 页面的生命周期(Page)
    以下为部分截图

在这里插入图片描述

  1. 组件的生命周期 (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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值