1.组件案例1跳转到商品列表跳转要用navigation组件常用的属性有2个注意事项a.路径后可以带参数。参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔例如/list?id10namehua在onLoad(options)生命周期函数中获取传递的参数b.open-typeswitchTab时不支持传参!-- 在进行 页面跳转时需要在路径的前面加 / 斜线否则跳转不成功 -- navigator url/pages/list/list?id10numhua到商品列表页面/navigator navigator url/pages/cate/cate?id10numhua open-typeswitchTab到商品分类页面/navigator !-- navigate:只能跳转到非 TabBar 页面不能跳转到 TabBar 页面保留上一级页面-- navigator url/pages/list/list open-typenavigate到商品列表页面/navigator navigator url/pages/cate/cate open-typenavigate到商品分类页面/navigator !-- redirect:只能跳转到非 TabBar 页面不能跳转到 TabBar 页面关闭上一级页面-- navigator url/pages/list/list open-typeredirect到商品列表页面/navigator navigator url/pages/cate/cate open-typeredirect到商品分类页面/navigator !-- switchTab:只能跳转到 TabBar 页面不能跳转到非 TabBar 页面关闭其他所有的非 TabBar 页面-- navigator url/pages/list/list open-typeswitchTab到商品列表页面/navigator navigator url/pages/cate/cate open-typeswitchTab到商品分类页面/navigator !-- reLaunch:关闭所有页面打开小程序中某一个页面 -- navigator url/pages/list/list open-typereLaunch到商品列表页面/navigator navigator url/pages/cate/cate open-typereLaunch到商品分类页面/navigator !-- navigateBack:返回上一页或者返回前几页默认只能返回上一页 -- !-- delta:返回的层级默认是 1如果想返回几级就写几 -- navigator open-typenavigateBack delta1返回上一页/navigator2推荐商品区域在微信想小程序中如果想实现内容滚动需要使用scroll-view组件scroll-view可滚动视图区域适用于需要滚动展示内容的场景用于在小程序中实现类似于网页中的滚动条效果用户可以通过手指滑动或者点击滚动条来滚动内容。来学习两个属性scroll-x:允许横向滚动scroll-y允许纵向滚动scroll-view classscroll-x scroll-x view1/view view2/view view3/view /scroll-view scroll-view classscroll-y scroll-y view1/view view2/view view3/view /scroll-view3实现结构样式view classgoods-hot scroll-view scroll-x classscroll-x view view classgood-item image src../../assets/floor/1.png mode/ text灰太狼/text text66/text /view /view view view classgood-item image src../../assets/floor/2.png mode/ text蕉太狼/text text99/text /view /view view view classgood-item image src../../assets/floor/3.png mode/ text红太狼/text text88/text /view /view view view classgood-item image src../../assets/floor/1.png mode/ text黑太狼/text text77/text /view /view view view classgood-item image src../../assets/floor/2.png mode/ text银太狼/text text55/text /view /view /scroll-view /view4字体图标的使用在项目中使用到的小图标一般由公司设计师进行设计设计好以后上传到阿里巴巴矢量图 标库然后方便程序员来进行使用小程序中的字体图标使用方式与Web开发中的使用方式是一样的注意事项使用字体图标可能会报错[渲染层网络层错误] Failed to load font.. 该错误可忽略但在控制台出现错误会影响开发调试解决方案是将字体图标转换成base64的格式2.事件系统1事件绑定和事件对象!-- 第一种绑定事件的方式bind:事件名 -- button typeprimary bind:taphandler绑定事件/button !-- 第二种绑定事件的方式bind事件名 -- button typewarn bindtaphandler绑定事件/buttonPage({ // 事件处理函数需要写到 Page() 方法中才可以 handler (event) { // console.log(事件触发了~~~) console.log(event) } })2事件分为冒泡事件和非冒泡事件事件分为冒泡事件和非冒泡事件冒泡事件当一个组件的事件被触发后该事件会向父节点传递非冒泡事件当一个组件的事件被触发后该事件不会向父节点传使用bind绑定的事件会触发事件冒泡如果想阻止事件冒泡可以使用catch来绑定事件view classcatch bind:tapparentHandler button catch:tapbtnHandler按钮/button /viewPage({ parentHandler () { console.log(父组件绑定的事件) }, btnHandler () { console.log(子组件触发的事件) }, })3事件传参-data-*自定义数据view bind:tapparentHandler>// pages/cate/cate.js Page({ // 按钮触发的事件处理函数 btnHandler (event) { // currentTarget 事件绑定者也就是指哪个组件绑定了当前事件处理函数 // target 事件触发者也就是指哪个组件触发了当前事件处理函数 // currentTarget 和 target 都是指按钮因为是按钮绑定的事件处理函数同时点击按钮触发事件处理函数 // 这时候通过谁来获取数据都可以 console.log(event.currentTarget.dataset.id) console.log(event.target.dataset.name) }, // view 绑定的事件处理函数 parentHandler (event) { // 点击蓝色区域不点击按钮 // currentTarget 事件绑定者view // target 事件触发者view // currentTarget 和 target 都是指 view如果想获取 view 身上的数据使用谁都可以 // 点击按钮不点击蓝色区域 // currentTarget 事件绑定者view // target 事件触发者按钮 // 如果想获取 view 身上的数据就必须使用 currentTarget 才可以 // 如果想获取的是时间触发者本身的数据就需要使用 target console.log(event) // 在传递参数的时候如果自定义属性是多个单词单词与单词直接使用中划线 - 进行连接 // 在事件对象中会被转化为小驼峰写法 console.log(event.currentTarget.dataset.parentId) // 在传递参数的时候如果自定义属性是多个单词单词如果使用的是小驼峰写法 // 在事件对象中会被转化为全部小写的 console.log(event.currentTarget.dataset.parentName) } })4事件传参-mark自定义数据view bind:tapparentHandler mark:parentid1 mark:parentnametom !-- 如果需要使用 mark 进行事件传参需要使用 mark: 自定义属性的方式进行参数传递 -- !-- button bind:tapbtnHandler mark:id1 mark:nametom按钮/button -- button mark:id1 mark:nametom按钮/button /view// pages/cart/cart.js Page({ // 按钮绑定的事件处理函数 btnHandler (event) { console.log(event.mark.id) console.log(event.mark.name) }, // view 绑定的事件处理函数 parentHandler (event) { // 先点击蓝色区域不点击按钮 // 通过事件对象获取的是 view 身上绑定的数据 // 先点击按钮不点击蓝色区域 // 通过事件对象获取到的是 触发事件的节点 以及 父节点身上所有的 mark 数据 console.log(event) } })5声明和绑定数据!-- 如果需要展示数据在 wxml 中需要使用双大括号写法将变量进行包裹 -- !-- 展示内容 -- view{{ school }}/view view{{ obj.name }}/view !-- 绑定属性值 如果需要动态绑定一个变量,属性值也需要使用双大括号进行包裹 -- view id{{ id }}绑定属性值/view !-- 如果属性值是布尔值,也需要使用双大括号进行包裹 -- checkbox checked{{ isChacked }}/ !-- 算术运算 -- view{{ id 1 }}/view view{{ id - 1 }}/view !-- 三元运算 -- view{{ id 1 ? 等于 : 不等于 }}/view !-- 逻辑判断 -- view{{ id 1 }}/view !-- 在双大括号写法内部只能写表达式,不能写语句,也不能调用 js 的方法 -- !-- view{{ if (id 1) {} }}/view --// index.js Page({ // 在小程序页面中所需要使用的数据均来自于 data 对象 data: { school: 青青草原, obj: { name: tom }, id: 1, isChecked: false, } })6setData()修改数据7setData()一修改对象类型数据增单个/多个属性修改单个/多个属性删除单个/多个属性8setData()-修改数组类型数据新增数组元素修改数组元素删除数组元素view{{ num }}/view button bind:tapupdateNum更新 num/button view classline/view view{{ userInfo.name }}/view view{{ userInfo.age }}/view button typewarn bind:tapupdateUserInfo修改对象类型数据/button view classline/view view wx:for{{ list }} wx:keyindex{{ item }}/view !-- view{{ list[0].name }}/view -- button typeprimary bind:tapupdateList修改数组类型数据/button// pages/cate/cate.js Page({ data: { num: 1, userInfo: { name: tom, age: 18, test: 111 }, list: [1,2,3] // list: [ { id:1, name:tom } ] }, // 更新 num updateNum () { // 获取数据 // console.log(this.data.num) // 通过赋值的方式直接修改数据 // 能够修改数据,但是不能改变页面上的数据 // this.data.num 1 // console.log(this.data.num) // this.setData 两个作用 // 1.更新数据 // 2.驱动视图更新 this.setData ({ // key: 是需要可更新的数据 // value: 是最新的值 num: this.data.num 1 }) }, // 更新userInfo updateUserInfo () { // // 新增单个 / 多个属性 // this.setData({ // // 如果给对象新增属性可以将 key 写成数据路径的方式 a.b.c // userInfo.name: tom, // userInfo.age: 18 // }) // // 修改单个 / 多个属性 // this.setData({ // // 如果需要修改对象属性可以将 key 写成数据路径的方式 a.b.c // userInfo.name: jerry, // userInfo.age: 20 // }) // 目前进行新增和修改都是使用数据路径如果新增和修改数据量比较小还可以 // 如果修改数据很多,每次都写数据路径,就太麻烦了 // 可以使用 ES6 提供是展开运算符 和 Object.assign() // // ES6 提供是展开运算符 // // 通过展开运算符能够将对象中的属性复制给另一个对象 // // 后面的属性会覆盖前面的属性 // const userInfo { // ...this.data.userInfo, // name: jerry, // age: 20 // } // this.setData({ // userInfo // }) // // Object.assign() 将多个对象合并为一个对象 // const userInfo Object.assign(this.data.userInfo,{ name: jerry },{ age: 20 }) // this.setData ({ // userInfo // }) // // 删除单个属性 // delete this.data.userInfo.age // console.log(this.data.userInfo) // this.setData({ // userInfo: this.data.userInfo // }) // 删除多个属性 rest 剩余参数 const { age, test, ...rest } this.data.userInfo this.setData({ userInfo: rest }) }, // 更新 list updateList () { // 新增数组元素 // 如果直接使用 push 方法可以直接更新 data但是不能更新 页面中的数据 // this.data.list.push(4) // this.data.list.push(4) // this,this.setData({ // list: this.data.list // }) // const newList this.data.list.concat(4) // this.setData({ // list: newList // }) // const newList [ ...this.data.list, 4 ] // this.setData({ // list:newList // }) // 修改数组元素 // this.setData({ // // list[1]:6 // list[0].name: jerry // }) // 删除数组元素 // this.data.list.splice(1, 1) // this.setData({ // list:this.data.list // }) const newList this.data.list.filter(item item ! 2) this.setData({ list: newList }) } })9列表渲染-基本使用10列表渲染-进阶用法11条件渲染!-- wx:if 属性组 -- !-- wx:if wx:elif wx:else -- !-- 只有对应的条件成立属性所在的组件才会进行展示 -- !-- view wx:if{{ num 1 }}num 等于 {{ num }}/view view wx:elif{{ num 2 }}num 等于 {{ num }}/view view wx:elsenum 大于 2 目前 num 等于 {{ num }}/view -- !-- wx:elif wx:else 不能单独使用在使用的时候必须结合 wx:if 来使用 -- !-- view wx:if{{ num 1 }}num 等于 {{ num }}/view view wx:elif{{ num 2 }}num 等于 {{ num }}/view view wx:elsenum 大于 2 目前 num 等于 {{ num }}/view -- !-- 使用了wx:if 属性组不能被打断组件必须连贯才可以 -- view wx:if{{ num 1 }}num 等于 {{ num }}/view view wx:elif{{ num 2 }}num 等于 {{ num }}/view view wx:elsenum 大于 2 目前 num 等于 {{ num }}/view !-- hidden 属性 -- !-- hidden 属性 属性值 如果是 true就会隐藏结构如果是 false才会展示 -- view hidden{{ !isFlag }}如果 isFlag 是true展示结构否则隐藏结构/view !-- wx:if 控制结构的展示和隐藏是通过新增和移除结构来实现的 -- !-- hidden 属性控制结构的展示和隐藏是通过 css 的 display 属性来实现 -- button typewarn bind:tapupdateNum更新 num/buttonPage({ data: { num: 1, isFlag: true }, // 更新 num updateNum () { this.setData({ num: this.data.num 1 }) } })12简易双向数据绑定!-- 单向绑定数据能够影响页面但是页面更新不会影响到数据 -- !-- input typetext value{{ value }}/ -- !-- 双向绑定数据能够影响页面页面更新也能够影响数据 -- !-- 如果实现简易双向绑定需要在对应的属性前面添加 model: -- !-- input typetext model:value{{ value }}/ -- !-- 如果需要获取复选框的选中效果需要给 checked 添加 model: -- !-- checkbox model:checked{{ isChecked }}/是否同意该协议 -- !-- 注意事项1属性值只能是一个单一字段的绑定 -- !-- input typetext model:value值为{{ value }}/ -- !-- 注意事项2属性值不能写数据路径也就是不支持对象和数组 -- input typetext model:value{{ obj.value }}/// pages/cart/cart.js Page({ data: { value: 123, isChecked: false, obj: { value: 123 } } })13小程序运行机制14小程序生命周期介绍15小程序更新机制16应用生命周期页面生命周期17生命周期两个细节18小程序API介绍19网络请求Page({ data: { list: [] }, // 获取数据 getData () { // 如果需要发起网络请求需要使用 wx.request API wx.request({ // 接口地址 url: https://gamll-prod.atguigu.cn/mall-api/index/findBanner, // 请求方式 method: GET, // 请求参数 data: {}, // 请求头 header: {}, // API 调用成功以后执行的回调 success: (res) { // console.log(res) if (res.data.code 200) { this.setData({ list: res.data.data }) } }, // API 调用失败以后执行的回调 fail: (err) { console.log(err) }, // API 不管调用成功还是失败后执行的回调 complete: (res) { console.log(res) } }) } })