講道理這周前面幾天真的忙的吐血了,周日周一都是1點才睡,周二真的累的不行,10點就睡了,周三又搞了一晚上,直到昨天才稍微閑下來,本來昨天想趁中午的時間把這第三篇寫下分享給大伙的,但是真的心力不足??,所以稍微休息下今天把這篇寫了。(雖然大概沒啥人看我的文章(ノへ￣、),但是也想給自己記錄下充實的生活日常,時刻提醒自己要保持這種狀態(tài))

那一番嗶嗶完畢后,我們開始進入正題。今天的主題是組件,這篇打算講下微信小程序提供給我們的組件的使用,然后我們真正用代碼來實現(xiàn)這些基本的效果(前面兩篇有朋友說都沒有寫代碼的部分,這點真的抱歉,主要前面的內(nèi)容是起步階段的東西,我的這些主要針對小白,所以想講細點,但是主要還是我更新太慢的緣故(ノへ￣、)).

首先,上一波效果圖給大伙看看先

ironman

那我們就先一步步把這個banner做出來先(banner顧名思義.....emmmm小白們有道翻譯起來,暈不知不覺又幫有道打了一波廣告,我這是真的虧炸).

①在我們之前建的那個工程新建一個頁面(之前那工程沒有刪吧老鐵們,笑,還不知道怎么建的一二篇走起來),先新建一個文件夾,這里隨便取名,我就叫info好了,然后點擊文件夾右鍵,選擇新建page,??

image

接著輸入頁面名稱,這里不需要帶后綴,因為寫完名稱后回車你會驚喜的發(fā)現(xiàn)小程序幫你建好了4個文件.然后我們把這個頁面放到tabbar里,因為這個頁面我們主要用來展示效果,在app.json里配置相關(guān)配置,??

image

其實這里我們還可以看到,"page"這個字段我們是不用填的,新建頁面時小程序就幫我們寫上去了,貼心。那么不出意外就是下面的效果

image

②然后將我們的圖片素材放入到img文件夾中??

11111

這里圖片素材大伙就自己去找了,我就不貼出來了(想要我的鋼鐵俠素材的私聊哈哈哈)

③好了,我們回到頁面,點開info.wxml,現(xiàn)在我們要把banner添加進來,但是在這之前我們要先打開微信小程序的??開發(fā)文檔,選擇開發(fā)-組件,這里就是小程序為我們準備的一系列組件,我們直接用就好了,不需要自己去寫,當然你也可以自己寫組件,這個我們后面再講.我們先定位到swiper這個組件,這個組件就是我們的banner效果的組件,那我們先寫一波代碼,再來好好說下如何看文檔使用這個組件.先在wxml引入這個組件??

<!--pages/info/info.wxml-->
<view class="container-first">
  <swiper
    class="firstPage-swiper"
    indicator-dots="{{indicatorDots}}" 
    indicator-color="{{indicatorColor}}"
    indicator-active-color="{{indicatorActiveColor}}" 
    autoplay="{{autoplay}}" 
    circular="{{circular}}" 
    vertical="{{vertical}}"
    interval="{{interval}}" 
    duration="{{duration}}" 
    previous-margin="{{previousMargin}}" 
    next-margin="{{nextMargin}}" 
    bindchange="bindchange">
    <block wx:for="{{background}}" wx:key="*this">
      <swiper-item >
        <image src="{{item}}" class="img" bindtap="swiperTouch" data-bannerIndex="{{item}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

嘿嘿,突然貼出一段代碼小白們是不是有點不習慣,既然是寫代碼了,這邊代碼就不再是截圖的方式展示了,最上方有注釋哪個文件,然后這里代碼的部分,也方便大伙command+c,command+v,復制粘貼搞起來(當然還是建議不熟的小白自己敲下)。
對于這段代碼我們說明下,swiper中indicator-dots,indicator-color等等的都是這個組件的參數(shù),我們對其進行設(shè)置就會有不同的效果,現(xiàn)在可以打開開發(fā)文檔對照看下參數(shù)的作用??

嘻嘻

這里參數(shù)就根據(jù)自己的需求傳入對應(yīng)的值就可以,那么{{}}里面的又是什么東西,我們可以直接在wxml里面?zhèn)魅刖唧w的參數(shù),但是因為很多情況下我們的參數(shù)可能會因為我們的請求或者場景發(fā)生改變,那么我們就不能寫死在wxml里面,所以我們需要將入?yún)⒂成涞?js文件里,然后在.js文件里處理邏輯,打開info.js,在data這里寫下對應(yīng)參數(shù)??

//info.js
  data: {
    indicatorDots: true,
    indicatorColor: 'rgba(255, 255, 255, .5)',
    indicatorActiveColor:'rgba(255, 255, 255, 1)',
    vertical: false,
    autoplay: true,
    circular: false,
    interval: 2000,
    duration: 500,
    ppreviousMargin: '0px',
    nextMargin: '0px',
    background: ['../info/img/1.jpg', '../info/img/2.jpg',],
  },

.js文件里其實還有很多東西,包括一些函數(shù),這里先不展開討論,我們先將banner這個組件完成先.
background在這里是個數(shù)組,存放圖片的地址,我們現(xiàn)在是本地的圖片,對應(yīng)好本地圖片的地址就可以了.然后我們還需要講樣式跳轉(zhuǎn)下,在info.wxss里寫下我們的樣式

/* pages/info/info.wxss */
.container-first{
  width: 100%;
  height: 423rpx;
}

.firstPage-swiper{
  height: 423rpx;
  width: 100%;
}

.img{
  height: 423rpx;
  width: 100%;
}

現(xiàn)在編譯我們的項目,是不是可以看到banner的效果了,是不是其實很簡單,笑.

④這里單獨把一個參數(shù)拿出來講bindchange,這個比較特殊,是綁定點擊方法的參數(shù),詳細的作用官方文檔里面有描述,我們也稍微講下.代碼里我們綁定的方法也是"bindchange".然后來到info.js文件??

bb

(說好的不貼圖呢,這么快打臉)咳咳,我們還是貼下圖,bindchange是作為方法存在的所以跟data是平級的放在一起,跟其他參數(shù)不一樣,那現(xiàn)在我們編譯我們項目,看到右邊這里來??

piupiu

<swiper-item >
        <image src="{{item}}" class="img" bindtap="swiperTouch" data-bannerIndex="{{item}}"></image>
      </swiper-item>

這里bindtap綁定swiperTouch,在.js文件寫上對應(yīng)的方法

swiperTouch(e){
    console.log('click');
  }

然后點擊圖片就能走方法里面的邏輯了.

好了,基本整個banner的組件就是這樣完成了,嘿嘿,其他微信小程序提供的組件也是可以按照這個思路來寫,從現(xiàn)在開始你就可以愉快的布置自己小程序的界面了........才怪,大概小伙伴們還是對block這個東西耿耿于懷吧,這到底是個什么鬼,為啥不說,其實猜是能猜到是干嘛的了,不過我們就放在下篇來一起講解吧,笑