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

今天药忘吃喽~ 2022-11-02 11:37 78阅读 0赞

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

## 新增文件 ##

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

## 引入官方提供组件 ##

[uni 官网][uni]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
点击进入页面之后有这个组件的使用方法、属性等。我们有很多种引入方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]  
想要直接引入项目中，或者下载之后自己引入自行选择就可以了。

## 自定义组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

例如上图中所示，大写字母开头的都是自定义组件，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 中的生命周期][uni 1]都不相同

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]

值得注意的是：

*  组件的生命周期是 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>

[uni]: https://uniapp.dcloud.io/component/README
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221024/53c002a37f144d86b34083ad08251b2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221024/58cbfd6c1d2a48ce9e027cdf25c231a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221024/1aba14b9d9b74765b03c04a53b53cdb6.png
[uni 1]: https://uniapp.dcloud.io/collocation/frame/lifecycle
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]: /images/20221024/d26e915d8c634be6b06d4d3525655f20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]: /images/20221024/222600a8a3fb4afd95ee77364067b1be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]: /images/20221024/a1f46f337057499e9e676d6e3e264bcc.png