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