博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。
今天給大家介紹的一款組件前端Vue自定義開屏啟動廣告組件，點擊廣告圖跳轉廣告詳情；附源碼下載地址 ： https://ext.dcloud.net.cn/plugin?id=13614
效果圖如下：
cc-advertView
使用方法
<!-- 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>
//初始化廣告開屏廣告
onReady() {
this.$refs.ccAdvert.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>
