web移動開發知識點的示例分析

小編給大家分享一下web移動開發知識點的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、生命周期調用函數

常見的生命周期函數有onLaunch、onLoad、onReady、onShow、onHide、onUnload

onLaunch：當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）

onLoad：頁面加載時觸發，一個頁面只會調用一次。通過參數options可以獲取打開當前頁面路徑中的參數。

onReady：頁面初次渲染完成的時候調用。一個頁面只會調用一次，代表頁面已經準備妥當，此時可以與視圖層進行交互。

onShow：當前頁面顯示時觸發。例如從后臺切入前臺。

onHide：當頁面隱藏時觸發。例如從后臺切入 前臺。

onUnload：頁面卸載時觸發。例如使用API中的wx.redirectTo（）或wx.navigateBack（）跳轉其他頁面觸發。

2、組件事件處理函數

組件事件處理函數用于為組件綁定事件，通常為組件綁定事件有兩種 "bind事件類型" 和"catch事件類型"

bind方式，不會阻止冒泡事件向上冒泡，而catch可以阻止冒泡事件向上冒泡

2.1、e.target和e.currentTarget的區別

<view bindtap="viewtap" id="outer">

outer

<view id="inner">inner</view>

</view>

 viewtap:function（e）{

    console.log（e.target.id+"-"+e.currentTarget.id）

  }

單擊outer會輸出outer-outer，單擊inner會輸出inner-outer，而父元素綁定了viewtap事件，子元素沒有綁定viewtap事件，因此

e.target指向的是觸發事件的元素；

e.currentTarget指向的是添加監聽事件的元素；

3、tabBar標簽欄的配置

tabBar用于實現頁面底部的標簽欄，主要屬性如下，其中list是一個數組，數組中的每一個元素都是一個標簽按鈕對象，設置對應的屬性時，可以跳轉到對應的標簽頁。其中list種至少有兩個元素，最多不超過五項

屬性 說明

color 未選擇時，底部導航欄顏色

selectedColor 選中時，底部導航欄顏色

borderStyle 底部導航邊框顏色

backgroundColor 底部導航背景色

list 導航配置數組

pagePath 頁面訪問地址

iconPath 未選擇時圖片路徑

selectedIconPath 選中時圖片路徑

text 導航圖標下方文字

標簽欄示例代碼如下：

"tabBar": {

    "color": "#FF000000",

    "selectedColor": "#ff4c91",

    "borderStyle": "white",

    "backgroundColor": "#ffffff",

    "list": [

      {

        "pagePath": "pages/index/index",

        "iconPath": "images/invite.png",

        "selectedIconPath": "images/invite.png",

        "text": "邀請函"

      },

      {

        "pagePath": "pages/picture/picture",

        "iconPath": "images/marry.png",

        "selectedIconPath": "images/marry.png",

        "text": "照片"

      },

      {

        "pagePath": "pages/video/video",

        "iconPath": "images/video.png",

        "selectedIconPath": "images/video.png",

        "text": "美好時光"

      },

      {

        "pagePath": "pages/map/map",

        "iconPath": "images/map.png",

        "selectedIconPath": "images/map.png",

        "text": "婚禮地點"

      },

      {

        "pagePath": "pages/guest/guest",

        "iconPath": "images/guest.png",

        "selectedIconPath": "images/guest.png",

        "text": "賓客信息"

      }

    ]

  },

 4、條件渲染

wx:if、wx:elif、wx:else，可以用其來控制標簽的顯示與隱藏

代碼示例

<view>

  <block wx:if="{{num1>num2}}">

    <text>比較結果：第一個數大</text>

  </block>

  <block wx:elif="{{num1<num2}}">

    <text>比較結果：第二個數大</text>

  </block>

  <block wx:else="{{num1==num2}}">

    <text>比較結果：兩數相等</text>

  </block>

</view>  

注意：使用wx:if和組件設置hidden屬性都可以實現元素的隱藏與顯示，二者有什么區別？

（1）wx:if 是遇 true 顯示，hidden 是遇 false 顯示。

（2）wx:if 在隱藏的時候不渲染，而 hidden 在隱藏時仍然渲染，只是不呈現。

（3）如果頻繁切換的話，用 wx:if 將會消耗更多資源，因為每次呈現的時候他都會渲染，每次隱藏的時候，他都會銷毀。

（4）如果切換并不頻繁的話，用 wx:if 相對來說較好些，因為它會避免初始就一下渲染那么多

5、列表渲染

在組件上，使用wx:for綁定一個數據，遍歷次數據，就可以使用數組中的各項元素重復渲染該組件。

// index.js中的數據部分

  data: {

  gender:[

    {name:'男',value:'0',checked:true},

    {name:'女',value:'1',checked:false}

  ]

 }

<!-- index.wxml中的渲染部分 -->

<view>

  <text>性別：</text>

  <radio-group name="gender">

    <label wx:for="{{gender}}" wx:key="value">

      <radio value="{{item.value}}" checked="{{item.checked}}"/>

      {{item.name}}

    </label>

  </radio-group>

</view>

在渲染列表中，可以使用item表示數組的當前項，使用index表示當前項的下標。wx:key表示每一項的唯一標識，此代碼中value的值都是唯一的，也可以用保留關鍵字*this標識將每一項本身作為唯一標識。

在列表渲染中，設置wx:key可以在數據改變后在頁面中重新渲染時，使原有的組件保持自身的狀態，而不是重新創建，提高了列表渲染時的效率。

6、輪播圖的聯動效果實現

1、swiper組件

swiper組件是滑塊視圖容器，經常用于實現輪播圖，在音樂播放器小程序中可以實現標簽頁的切換。

屬性：

屬性 類型 說明

indicator-dots Boolean 是否顯示頁面的指示點，默認為false

indicator-color Color 指示點的顏色

indicator-active-color Color 選中的指示點顏色

autoplay Boolean 是否自動切換，默認為false

current Number 當前所在滑塊的index,默認為0

current-item-id String 當前所在滑塊的item-id

interval Number 自動切換時間間隔（ms）

duration Number 滑動動畫時長（ms）

bindchange EventHandle current改變時會觸發change事件

circular Boolean 是否采用銜接滑動，默認false

（1）自動播放的輪播圖實現

<swiper class="content-info-slipe" indicator-color="rgba（255,255,255,4）" indicator-active-color="#fff"  indicator-dots  autoplay>

      <swiper-item>

        <image src="/images/test3.jpg"></image>

      </swiper-item>

      <swiper-item >

        <image src="/images/test2.jpg"></image>

      </swiper-item>

      <swiper-item >

        <image src="/images/test1.jpg"></image>

      </swiper-item> 

</swiper>

（2）單擊上面一欄的標簽，定位當前current的位置，改變下面的輪播頁面（參考音樂播放器標簽頁的切換）

主要代碼片段

<view class="tab">

  <view class="tab-item {{tab==0 ? 'active' : ''}} " bindtap="changeItem"  data-item="0">音樂推薦</view>

  <view class="tab-item {{tab==1 ? 'active' : ''}}"   bindtap="changeItem" data-item="1">播放器</view>

  <view class="tab-item  {{tab==2 ? 'active' : ''}} " bindtap="changeItem" data-item="2">播放列表</view>

</view>

<view class="content" >

    <swiper current="{{item}}"  bindchange="changeTab">

      <swiper-item >  <include src="play.wxml"/>  </swiper-item>

      <swiper-item >  <include src="info.wxml"/> </swiper-item>

      <swiper-item>   <include src="playlist.wxml"/> </swiper-item>

    </swiper>

</view>

數據和事件綁定部分：changeItem綁定事件函數 用來把當前view標簽里data-item屬性里的值給item，再將item作為current的屬性值，便可以單擊實現標簽頁的轉換。changeTab函數用來將current的值給tab，再利用三目表達式（tab==0 ? 'active' : ''）可以給當前單擊的標簽設置樣式。

Page（{

  data: {

  item:0,

  tab:0

  },

  changeItem:function（e）{

    this.setData（{

      item:e.target.dataset.item

    }）

  },

  changeTab:function（e）{

    this.setData（{

      tab:e.detail.current

    }）

  }

}）

7、頁面跳轉方式

1、wx.switchTab

wx.switchTab用于頁面跳轉，且只能跳到tabBar頁面，并關閉其他的tabBar頁面

常用屬性

屬性 類型 說明

url string 需要跳轉的tabBar頁面的路徑（需要在app.json的tabBar字段定義的頁面）路徑后不能帶有參數

success function 接口調用成功的回調函數

fail function 接口調用失敗的回調函數

complete function 接口調用結束的回調函數（成功失敗都會執行）

2、wx.navigateTo和wx.redirectTo

（1）wx.navigateTo 用于跳轉到應用內的某個頁面，且保留當前頁面。跳轉頁面后，單擊左上角可以返回上一個頁面。需要注意的是，wx.navigateTo只能跳轉到非標簽頁。另外，使用wx.navigateTo可以回到原頁面。

（2）wx.redirectTo 用于跳轉到應用內的某個頁面，且關閉當前頁面，不能返回上一個頁面，只能跳到非標簽頁

屬性與wx.switchTab的一樣，只不過wx.navigateTo和wx.redirectTo的url屬性值路徑可以帶參數，例如url:detail?id=1

3、wx.reLaunch

wx.reLaunch關閉所有頁面，打開到應用內的某個頁面。

以上是“web移動開發知識點的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！