構(gòu)建頁面

在index.wxml

<!--index.wxml-->
<view class="index">
  <view id="view1" class="view-item" bindtap="clickMe" data-name="按鈕1" data-age="35"> view1</view>
  <view id="view2" class="view-item" bindtap="clickMe" data-name="按鈕2" data-age="44"> view2</view>
  <view class="view-item">{{clickmsg}}</view>
</view>

index.wxss

.view-item {
  text-align: center;
  padding: 10px;
  background-color: burlywood;
  border-radius: 5px;
  margin: 20px;
}

image.png

index.js

  clickMe:function(e) {
    // 通過dataset來將wxml中的數(shù)據(jù)給傳遞過來
    console.log(e.currentTarget.dataset)
    count++
    this.data.clickmsg = '點擊了' + e.currentTarget.id +  '當(dāng)前已經(jīng)點擊了' + count + '次'
    // 必須要這樣寫才能更新數(shù)據(jù)
    this.setData(this.data)
  }

image.png

注意: 我們可以通過dataset來將wxml中的數(shù)據(jù)給傳遞過來,其中的age和name都是在wxml中設(shè)置的,命名規(guī)范必須是data-xxx,如果我們要取具體的某個值(例如name),可以使用console.log(e.currentTarget.dataset.name):

image.png

頁面跳轉(zhuǎn)共有兩種方式

clickMe(e) {
    wx.redirectTo({
      url: '../home/home'
    })
  }
  
  
    clickMe(e) {
    wx.navigateTo({
      url: '../home/home'
    })
  }

兩者的區(qū)別:

• wx.navigateTo的執(zhí)行:

  • 假使我們從A頁面跳轉(zhuǎn)到home頁面,再從home頁面跳轉(zhuǎn)到user,再從user頁面返回,日志打印如下:

    
    
    image.png

home會依次執(zhí)行onload---onshow---onready,當(dāng)頁面從home跳轉(zhuǎn)到user時,會先調(diào)用home的onhide,然后加載user,執(zhí)行onload---onshow---onready.當(dāng)從user返回時,user頁面會銷毀,執(zhí)行user的onUnload,然后home的頁面出現(xiàn),執(zhí)行home的onshow

• wx.redirectTo:
  
  image.png

與wx.navigateTo的區(qū)別在于,當(dāng)從home跳轉(zhuǎn)到user時,會執(zhí)行home的onUnload的方法,實際是home在跳轉(zhuǎn)時被銷毀了,"替換"成了user的頁面,當(dāng)從user返回時,不再返回的是home頁面,而是原來home的上一級頁面.

tabbar之間的切換來實現(xiàn)跳轉(zhuǎn)

tabbar的切換與iOS的tabbar十分相似.假使home和user兩個page分別為tabbar的兩個模塊,且默認(rèn)選中home,當(dāng)小程序啟動后,我們從點擊user,再點擊home,可以看到如下日志:

image.png

小程序啟動后,會執(zhí)行home的onLoad----onshow---onready函數(shù),當(dāng)我們點擊tabbar切換到user時,會先執(zhí)行home的onhide,然后再執(zhí)行user的onLoad----onshow---onready函數(shù);當(dāng)我們再次點擊tabbar切換home時,會執(zhí)行user的onhide,再執(zhí)行home的onshow.說明:此時頁面中home和user同時存在,點擊哪個顯示哪個執(zhí)行onshow(當(dāng)然是指不是第一次加載的情況),原先顯示的將執(zhí)行onhide來隱藏自己.

在.wxml中實現(xiàn)頁面的跳轉(zhuǎn)

<navigator url="../user/user?name=dll" >
            <button type="primary">導(dǎo)航組件跳轉(zhuǎn)到User</button>
    </navigator>

如果是想通過redirect方式跳轉(zhuǎn),只需要在navigate組件后聲明即可:

<navigator url="../user/user?name=dll" redirect >
            <button type="primary">導(dǎo)航組件跳轉(zhuǎn)到User</button>
    </navigator>