微信小程序2
1.组件跳转实现组件跳转需要用到navigation组件该组件有两个常用属性1url:当前小程序跳转链接2open-type:跳转方式navigate:保留当前页面跳转到应用内某个页面但不能跳转到tabber页面redirect:关闭当前页面跳转到应用内某个页面但不能跳转到tabber页面switchTab:跳转到tabBar页面并关闭其他所有非tabBar页面reLaunch:关闭所有页面跳转到应用内某个页面navigateBack关闭当前页面跳转到上一级或多级页面#路径后可以带参数路径和参数之间用分隔参数键和参数值用号相连不同参数用分割例如/list?id10namehua,在onLoad生命周期函数中获取传递的参数#open-typeswitchTab时不支持传参在进行路径跳转时需要在路径前加/2.内容滚动scroll_view:可滚动视图区域适用于需要滚动展示内容的场景用于在小程序中实现类似于网页中滚动条的效果用户可以通过手指滑动或点击滚动条来滚动内容。1scroll-x:允许横向滚动2scroll-y:允许纵向滚动3.背景图片当编写小程序样式文件时可以使用background-image来设置元素的背景图片#小程序的background-image不支持本地路径需网络图片或base64或image/组件4.事件绑定和事件对象小程序中绑定事件几乎与网页中绑定事件几乎一样但在小程序中不能通过on方式绑定事件也没有click等事件小程序中绑定事件使用bind方法click事件也需要tap事件进行替换绑定事件有两种方法1bind:事件名bind后面需要跟上冒号冒号后面要跟上事件名例如view bind:tapfnName/view(2)bind事件名,bind后面直接跟上事件名例如:view bindtapfnName/view事件处理函数需要写到.js文件中在.js文件中需要小程序提供的Page方法来注册小程序的页面可以直接在Page方法中创建事件处理函数5.事件分类和阻止事件冒泡事件分为冒泡事件和非冒泡事件冒泡事件当一个组件的事件触发后该事件会向父节点传递非冒泡事件当一个组件的事件触发后该事件不会向父节点传递使用Bind绑定的事件会触发冒泡如果不想触发事件冒泡可以使用catch触发事件6.事件传参事件传参在触发一些事件时将一些数据作为参数传递给事件处理函数的过程就是事件传参在微信小程序中会经常在组件上添加一些自定义数据然后在事件处理函数中获取这些自定义的数据从而完成业务逻辑的开发在组件上通过data-*的方式定义需要传递的数据其中*是自定义的属性例如view data-id100 bindtaphandler/然后通过事件对象进行获取自定义数据7.mark自定义数据小程序进行传参的时候除了data-*属性传递参数外还可以使用mark标记传递参数mark是一种自定义属性可以在组件上添加用于识别具体触发事件的target节点。同时mark还可以用于承载一些自定义数据在组件上使用mark:自定义属性的方式将数据传递给事件处理函数例如:view mark:id100 bindtaphandler/,然后通过事件对象进行获取自定义数据8.声明和绑定数据小程序页面中使用的数据均需要在Page方法的data对象中进行声明定义在将数据声明好只后在WXML使用Mestance语法(双大括号{{ }})将变量包起来从而将数据绑定在{{ }}内部可以做一些简单的运算支持如下几种方式1.算数运算2.三元运算3.逻辑判断4.其他。。。#在{{ }}语法中只能写表达式不能写语句也不能调用js相关的方法9.setDATA()修改数据小程序中修改数据不推荐使用赋值的方法进行修改通过赋值的方法修改数据无法改变页面的数据而是要通过setDATA方法进行修改setDATA方法接受方法作为参数key是需要修改的数据value是最新的值setDATA方法有两个作用1.更新数据2.驱动视图更新10.简易双向数据绑定在WXML中普通属性的绑定是单向的例如input value{{value}}如果希望用户输入数据的同时改变data中的数据可以借助简易双向绑定。在对应属性之前添加model:前缀即可例如input model:value{{value}}/#简易双向绑定的属性值如下限制#只能是一个单一字段的绑定例如错误用法input model:value值为{{value}}/#尚不能写data路径也就是不支持数组和对象例如错误用法input model:value{{a,b}}/11.列表渲染列表渲染就是指通过循环遍历一个数组或对象将其中的每个元素渲染到页面上在组件上使用wx:for属性绑定一个数组或对象既可以使用每一项数据重复渲染当前组件每一项的变量名默认为item,下标变量名默认为index在使用wx:for进行遍历时建议加上wx:key属性we:key的值以两种形式提供1.字符串代表需要遍历的array中item的某个属性该属性的值需要是列表中唯一的字符串或数字且不能动态改变2.保留关键字*this代表在for循环中的item本身当item本身是一个唯一的字符串或数字时可用#如果不加wx:key会报一个warning,如果明确知道该列表是静态即以后的数据不会改变或者不必关注其顺序可以选择忽略#在给wx:key添加属性值的时候不需要使用双大括号语法直接使用遍历的array中的item的某个属性1.如果需要对默认的变量名和下标进行修改可以使用wx:for-item和wx:for-index使用wx:for-item可以指定数组当前元素的变量名使用wx:for-index可以指定数组当前下标的变量名2.将wx:for用在block/标签上以渲染包含多个节点的结构块block/并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性block/标签在wxml中可以用于组织代码结构支持列表渲染条件渲染等12.条件渲染条件渲染主要用来控制页面结构的展示和隐藏在微信小程序中实现条件渲染有两种方式1使用wx:if,wx:elif,wx:else属性组2.使用hidden属性wx:if: 当条件为true时结构展现出来否则结构不会展示通过移除/新增节点的方式实现hidden: 当条件为true时结构隐藏否则结构展示出来通过display样式属性的方式实现