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的区别

outer

inner

 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,可以用其来控制标签的显示与隐藏

代码示例

 

    比较结果:第一个数大

 

 

    比较结果:第二个数大

 

 

    比较结果:两数相等

 

  

注意:使用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}

  ]

 }

  性别:

 

   

     

      {{item.name}}

   

 

在渲染列表中,可以使用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)自动播放的轮播图实现

     

       

     

     

       

     

     

       

       

(2)单击上面一栏的标签,定位当前current的位置,改变下面的轮播页面(参考音乐播放器标签页的切换)

主要代码片段

  音乐推荐

  播放器

  播放列表

   

         

       

         

   

数据和事件绑定部分: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移动开发知识点的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站题目:web移动开发知识点的示例分析
浏览地址:http://pwwzsj.com/article/posppi.html