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关闭所有页面，打开到应用内的某个页面。