前の章では、コマンドラインを使用してプロジェクトを構築し、ページとコンポーネントを追加するプロセスについて説明しました。この章では、主に基本的なコンポーネントの記述と注意点を要約します。
ファイルを追加
プロジェクトを設定すると、使用するコンポーネントを格納するためのコンポーネントフォルダーがプロジェクトにあります。大学の公式ウェブサイトで提供されているコンポーネントを配置することも、コンポーネントをカスタマイズすることもできます。ユニコンポーネントとカスタムコンポーネントによって提供されるコンポーネントを区別したい場合は、このフォルダーの下に新しい分割フォルダーを追加することもできます。参照パスが正しく記述されている限り、フォルダのレベルがいくつあってもかまいません。
公式コンポーネントを紹介する
導入する必要のあるコンポーネントは、拡張コンポーネント（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>
挿入されたコンテンツをカスタマイズしたい場合は、それを使用できます。
注意的点：
大学のライフサイクルは同じではありません
- アプリケーションのライフサイクル（アプリ）
- ページのライフサイクル（ページ）
以下はいくつかのスクリーンショットです
- コンポーネントのライフサイクル（コンポーネント）
注目に値するのは：
- コンポーネントのライフサイクルは、vueの記述方法と同様に、作成、マウントされます。
- ページのライフサイクルは、アプレットのPageでの書き込み方法と同様に、onLoad、onShowなどです。
- アプリケーションのライフサイクルはonLaunch、onShowなどであり、アプレットでのアプリの記述と同様です。
指示
この項目は、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>