テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステムをアプリケーション全体として構築していましたが、小さな変更や小さな機能の増加により全体のロジックが変更されることがよくありました。一本の髪の毛によって全身が影響を受けてしまいます。
コンポーネント開発により、個別の開発と保守を効果的に実現でき、それらを自由に組み合わせることができます。開発効率を大幅に向上させ、メンテナンスコストを削減します。
今日は、広告コンポーネントを開始するためのコンポーネント フロントエンド Vue カスタム開始画面を紹介します。広告画像をクリックすると広告の詳細にジャンプします。ソース コードのダウンロード アドレスが添付されています: https://ext.dcloud.net.cn /プラグイン?id=13614
レンダリングは次のとおりです。
1. cc-advertView コンポーネントの使用方法
cc-advertViewコンポーネントの使用には主に次の部分が含まれます。
- コンポーネントをテンプレートに追加し
cc-advertView、そのプロパティを設定します。
<cc-advertView ref="ccAdvert" :timedown="12" imageUrl="https://cdn.pixabay.com/photo/2015/02/13/00/43/apples-634572_1280.jpg" @advertClick="advertClick"></cc-advertView>
このうち、ref属性はコンポーネントインスタンスの取得に使用され、timedown属性はオープニング画面広告の表示時間（単位：秒）の設定に使用され、属性はimageUrl広告画像のアドレスの設定に使用され、@advertClickイベントは広告画像のクリックイベントを監視するために使用されます。
- Vue インスタンス
methodsで広告クリック イベントを処理するメソッドを定義します。
methods: {
// 广告图点击
advertClick() {
console.log("广告图点击");
uni.showModal({
title: '温馨提示',
content: '跳转广告事件'
});
}
}
この方法では、まずメッセージを出力し、次にuni.showModalUni-App の方法を使用してプロンプト ボックスをポップアップ表示し、広告がクリックされたことをユーザーに通知します。
- Vue インスタンスの
onReadyライフサイクル フックで広告を初期化します。
onReady() {
this.$refs.ccAdvert.initAdvert();
}
このメソッドでは、this.$refs.ccAdvert.initAdvert()コンポーネント インスタンスのメソッドを呼び出してinitAdvert広告の初期化を完了します。
HTMLコード実装部分
<template>
<view class="content">
<!-- ref：唯一ref timedown:开屏广告秒数 imageUrl：图片地址 advertClick：广告图点击 -->
<cc-advertView ref="ccAdvert" :timedown="12"
imageUrl="https://cdn.pixabay.com/photo/2015/02/13/00/43/apples-634572_1280.jpg"
@advertClick="advertClick"></cc-advertView>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="/static/image/member-menu4.png" title="我的余额" @menuClick="menuClick"></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="/static/image/member-menu2.png" title="在线客服" @menuClick="menuClick"></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="/static/image/member-menu3.png" title="邀请有礼" @menuClick="menuClick"></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="/static/image/member-menu5.png" title="关于我们" @menuClick="menuClick"></cc-wxBtn>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
this.$refs.ccAdvert.initAdvert();
},
methods: {
// 广告图点击
advertClick() {
console.log("广告图点击");
uni.showModal({
title: '温馨提示',
content: '跳转广告事件'
})
},
}
}
</script>
<style>
page {
background-color: white;
margin-bottom: 50px;
}
</style>