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移动开发知识点的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！