微信小程序26~50

一.组件navigator组件和其属性open-type和其属性的使用url当前小程序内的跳转链接eg.url/pages/list/list(里面的链接一定是在app.json的page数组里写过的路径)open-type:跳转方式navigate保留当前页面跳转到其他页面但不能跳转TabBar页面下面导航redirect:关闭当前页面跳转到其他页面但不能跳转TabBar页面下面导航switchTab:跳转到tabBar页面并关闭其他非tabBar页面reLaunch关闭所有页面打开到应用内的某个页面navigateBack关闭当前页面返回上一页或多级页面注意1.路径后可以带参数。路径参数键1参数值1参数键2参数值2eg./pages/list/list?id1price1002.open-typeswithTab时不支持传参!-- 在进行 页面跳转时 需要在路径的前面加 / 斜线 否则跳转不成功 -- !-- 传参 -- navigator url/pages/list/list?id10numhua到商品列表页面/navigator !-- navigate:不能跳转到TabBar页面保留上一级页面-- !-- 跳转不成功因为cate是tabBar-- navigator url/pages/cate/cate open-typenavigate到商品分类页面/navigator !-- redirect:不能跳转到TabBar页面关闭上一级页面-- !-- 跳转不成功因为cate是tabBar-- navigator url/pages/cate/cate open-typeredirect到商品分类页面/navigator !-- switchTab:只能跳转到TabBar页面,关闭其他所有的TabBar页面 -- !-- 跳转成功-- navigator url/pages/cate/cate open-typeswitchTab到商品分类页面/navigator !-- reLaunch:关闭所有页面打开小程序中某一个页面 -- navigator url/pages/list/list open-typereLaunch到商品列表页面/navigatorscroll-x和scroll-y滚动条--重要scroll-x和scroll-y组件子组件属性scroll-x/y为true即可实现启用scroll-x在scroll-view标签上添加scroll-xtrue。父容器scroll-view样式white-space: nowrap;强制内容不换行。width: 100%;给定固定宽度通常占满父容器。overflow: hidden;隐藏超出部分由组件内部处理滚动。子元素样式display: inline-block;使子元素横向并排。或使用Flex 布局推荐兼容性更好图标使用阿里巴巴矢量库-加入购物车-添加到项目-fontClass-项目设置里设为base64-点击链接-复制css内容-开发者工具中添加scss-全部粘贴背景图的使用background-imageurl在线链接背景图只能使用在线链接或者base64的图片---建议用前者后者代码过长二.事件系统绑定事件的方法在小程序不能通过on的方式绑定事件也没有click等事件小程序中绑定事件使用bind方法click事件也需要使用tap事件来进行代替bind方法使用1.bind事件名”函数“或者bind事件名”函数“2.在对应js里的page里写事件处理函数button typeprimary bind:taphandler绑定事件/button !-- 第二种绑定事件的方法bind事件名 -- button typewarn bindtaphandler绑定事件/button !-- 在小程序中input输入框没有样式需要自行添加 -- input typetext bindinputgetInputVal/Page({ // 事件处理函数需要写到page方法中才可以 handler(event){ console.log(event); }, getInputVal(value){ console.log(value.detail.value); } })事件冒泡与阻止事件冒泡事件分为冒泡事件和非冒泡事件冒泡事件当一个组件的事件被触发后该事件会向父节点传递非冒泡事件当一个组件的事件被触发后该事件不会向父节点传递使用bind绑定的事件会触发事件冒泡如果想阻止事件冒泡可以使用catch来绑定事件。事件传参:data-自定义属性’数据‘经常会在组件上添加一些自定义数据然后在事件处理函数中获取这些自定义数据从而完成业务逻辑的开发例如view />事件传参 -mark自定义属性viewmark-id“10O”bindtap“handler”/mark和data-*很相似主要区别在于mark----标记包含从触发事件的节点到根节点上所有的标记属性值currentTarget.dataset 或者target.dataset只包含事件绑定者或者事件触发者那一个节点的>WXML语法声明和绑定数据页面使用的数据要在Page方法里的data对象中声明定义数据声明好以后在WXML使用Mustache语法双大括号{{ }} 将变量包起来从而将数据绑定在{{ }}内部可以做一些简单的运算支持如下几种方式1. 算数运算2.三元运算3. 逻辑判断4. 其他...注意事项在《{》语法中只能写表达式不能写语句也不能调用js相关的方法Page({ //在小程序页面中所需要使用的数据均来自于data对象 data:{ id:1, isChecked:true, school:尚硅谷, obj:{ name:tom } })修改数据不推荐通过赋值的方式进行修改通过赋值的方式修改数据无法改变页面的数据要通过调用setData()方法进行修改setData()方法接收对象作为参数key是需要修改的数据value是最新的值setData()方法有两个作用1. 更新数据2驱动视图更新Js里 Page{( // 更新num updateNum(){ //获取数据 // console.log(this.data.num); //通过赋值的方式直接修改数据 //能够修改数据但不能改变页面上的数据 // this.data.num1 //this.setData两个作用 //1.更新数据 //2.驱动视图页面的数据更新 this.setData({ //key:是需要更新的数据 //value:是最新的值 num:this.data.num1 }) console.log(this.data.num); } )} WXML里 view bindtapupdateNum更新num/viewsetData({ })修改对象类型数据以下都是写在某个函数里的新增修改可以用路径值//新增单个/多个属性 this.setData({ //如果给对象新增属性可以将key写成数据路径的方式 a.b.c userInfo.name:tom, userInfo.age:80 }) //-----------修改--------------------------------- //修改单个/多个属性 this.setData({ //如果修改对象的属性也可以将key写成数据路径的方式 a.b.c userInfo.name:Jerry, userInfo.age:80 })多个新增/修改1.const 新对象{展开运算符修改的/新增}this.setData({ userInfo:新对象})const userInfo{ ...this.data.userInfo, name:jerry, age:18 } this.setData({ //前面是原来后面是上面刚const的 //键和值一样可以简写成userInfo userInfo:userInfo })2.Object.assign()将多个对象合并成一个对象const userInfoObject.assign(this.data.userInfo,{name:jerry},{age:18}) this.setData({ userInfo })setData{}修改数组新增1.数组pushthis.setData({ 数组名数组路径})2.const 新数组XX this.setData({ 数组名新数组})3.const 新数组【...数组添加的内容】this.setData({ 数组名新数组})updateList(){ //1.新增数组元素 //法一如果直接使用push方法可以直接更新data但是不能更新 页面中的数据 this.data.list.push(4) this.setData({ list:this.data.list }) //法二 const newListthis.data.list.concat(4) this.setData({ list:newList }) //法三 const newList[...this.data.list,4] this.setData({ list:newList }) }修改setData({ 要修改的东西修改内容})this.setData({ // list[1]:6 list[0].name:jerry })删除1.对数组进行处理后this.setData({ 数组名改过的数组})2.新数组this.setData({ 数组名新数组})//3.删除数组元素 //法一 this.data.list.splice(1,1) this.setData({ list:this.data.list }) //法二 const newListthis.data.list.filter(itemitem!2) this.setData({ list:newList })简易双向绑定机制属性前加model例如input model:value{(value}] /注意1.只能是一个单一字段的绑定错误用法input model:value值为{value}] /2.不支持数组和对象错误用法input model:value{a.b } /列表渲染wx:for 配上wxkey在组件上使用wxfor属性绑定一个数组或对象既可使用每一项数据重复渲染当前组件每一项的变量名默认为item下标变量名默认为index在使用wx:for进行遍历的时候建议加上wx:key属性wx:key的值以两种形式提供1.字符串代表需要遍历的array中 item的某个属性该属性的值需要是列表中唯一的字符串或数字且不能动态改变2.保留关键字*this代表在for循环中的 item本身当item本身是一个唯一的字符串或者数字时可以使用注意事项1如果不加wx:key会报一个warning如果明确知道该列表是静态即以后数据不会改变或者不必关注其顺序可以选择忽略。2.在给wx:key添加属性值的时候不需要使用双大括号语法直接使用遍历的array中item的某个属性!-- 如果渲染的是数组item数组的每一项 index下标-- view wx:for{{numList}}{{item}}-{{index}}/view !-- 如果渲染的是对象item对象属性的值index对象属性-- view wx:for{{obj}}{{item}}-{{index}}/view !-- wx:key 提升性能 -- !-- wx:key 属性值有两种添加形式 -- !-- 1.字符串需要的是遍历的数组中item的某个属性要求该属性是列表中唯一的字符串或者数字不能进行动态改变-- view wx:for{{fruitList}} wx:keyid{{item.name}}/view !-- 2.保留关键字*this *this代表的是item本身item本身是唯一的字符串或数字 -- view wx:for{{numList}} wx:keythis{{item}}/view列表渲染-进阶对默认变量名和下标进行修改1.wx:for-item指定数组当前元素的变量名2.wx:for-index指定数组当前下部的变量名!-- 数组 -- !-- 如果需要修改默认的变量名需要使用wxfor-item属性 -- !-- 两个属性要和wx:for写到一个组件上 -- !-- 在重命名修改后需要使用最新的变量名-- view wx:for{{fruitList}} wx:keyid wx:for-itemfruitItem wx:for-indexi {{fruitItem.name}} /view!-- 对象 -- view wx:for{{obj}} wx:keyindex wx:for-itemvalue wx:for-indexkey {{value}}-{{key}} /view view wx:for{{fruitList}} wx:keyid wx:for-itemfruitItem wx:for-indexi view 名字:{{fruitItem.name}}/view view价格{{fruitItem.price}}/view /viewwx:for用在block/0标签中以渲染一个包含多个节点的结构块block/并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性block/标签在wxml中可以用于组织代码结构支持列表渲染、条件渲染等!-- block不是一个组件只是渲染函数 -- !-- 也就只是包装元素可以阻止代码结果支持列表渲染 -- !-- block不会在页面中做任渲染只接受控制属性 -- block wx:for{{fruitList}} wx:keyid wx:for-itemfruitItem wx:for-indexi view 名字:{{fruitItem.name}}/view view价格{{fruitItem.price}}/view /block条件渲染主要用来控制页面结构的展示和隐藏有两种方式1. 使用wx:if、wx:elif、wx:else 属性组2.使用 hidden 属性wx:if 和 hidden 二者的区别:1.wx:if当条件为true时将结构展示出来否则结构不会进行展示通过移除/新增节点的方式来实现--注意要连贯 组件间不能被打断!-- wx:elis wx:else 不能单独使用 必须结合wx:if来使用-- view wx:if{{num1}}num等于{{num}}/view !-- 使用了wx:if属性组的组件不能被打断 必须连贯才行 -- !-- view/view -- view wx:elif{{num2}}num等于{{num}}/view view wx:elsenum大于2,目前num为{{num}}/view2.hidden当条件为true时会将结构隐藏否则结构会展示出来通过display样式属性来实现的!-- hidden属性 -- !-- true:隐藏false显示 -- view hidden{{!isFlag}}如果isFlag是true展示结构否则隐藏结构/view生命周期运行机制前台小程序展示后台当用户「关闭]小程序时小程序并没有真正被关闭而是进入了「后台状态当用户再次进入微信并打开挂起进入后台5s---30min内用户回来销毁半小时没用/资源紧张就销毁冷启动第一次打开 / 被销毁后回来热启动后台切前台 eg挂起30min内回来热启动更新启动时同步更新和启动时异步更新启动时同步更新定期检查最近使用的小程序是否有更新。如果有更新下次小程序启动时会同步进行更新更新到最 新版本后再打开小程序。启动时异步更新在启动前没有发现更新小程序每次冷启动时都会异步检查是否有更新版本。如果发现有新版本将会异步下载 新版本的代码包将新版本的小程序在下一次冷启动进行使用当前访问使用的依然是本地的旧版本代码一个小程序完整的生命周期由应用生命周期、页面生命周期和组件生命周期三部分来组成 小程序生命周期伴随着一些函数这些函数由小程序框架本身提供被称为生命周期函数生命周期函数会按照顺序依次自动触发调用。应用生命周期是指应用程序进程从创建到消亡的整个过程 小程序的生命周期指的是小程序从启动到销毁的整个过程页面生命周期注意1.tabBar页面之间相互切换页面不会被销毁2.点击左上角返回上一个页面会销毁当前页面小程序API小程序提供的API几乎都挂载在wx对象下例如wx.request()、wx.setStorage()等wx对象实际上就是小程序的宿主环境微信所提供的全局对象异步 API支持 callback Promise 两种调用方式1.当接口参数 Object 对象中不包含success/fail/complete 时将默认返回Promise2.部分接口如request,uploadFile本身就有返回值因此不支持Promise风格的调用方式它们的promisify需要开发者自行封装。同步API事件监听API