day03视图与逻辑

一.页面导航

1.声明式导航

通过navigator来跳转

1.1 导航到tabBar页面

比如跳转到tabBar页面就需要navigator来跳转，要用到他的url和open-type属性

image-20220728163233305

image-20220728163819582

1.2 导航到非tabBar页面

非tabBar页面只是没有配置为tabBar的页面，注意还是页面

配置其他都一样，将open-type改为navigate即可

为了简便，当跳转的为非tabBar页面可以省略opentype

1.3 后退

点击实现后退效果，两个关键属性 opentype为navigateBack，delta为数字表示后退的层级

image-20220728170141004

为了简便如果只是返回上一个页面可以省略，delta

2. 编程式导航

2.1 tabBar

到tabBar需要调用 wx.switch(object)方法，里面的对象配置属性为

image-20220728170357703

2.2 非tabBar

wx.navigateTo（）

里面的对象属性同上

2.3 后退

wx.navigateBack（）

配置对象为

image-20220728170640656

3. 导航传参

声明式导航传参通过里面的url查询字符串的方式

image-20220728171237078

编程式导航通过对象里面的url来传参

image-20220728171523626

在onLoad接受导航参数

任何形式导航参数都可以在onLoad钩子中获取到，通过他的参数options

image-20220728172613489

二.页面事件

2.1下拉刷新

实现页面数据重新加载

  • 首先需要开启下拉刷新

  • 配置背景颜色和loading样式

  • 监听下拉的事件函数 onPullDownRefresh

image-20220728174319103

  • 停止下拉刷新效果，因为下拉刷新就是刷新了数据，但是你会发现loading效果还是在继续，所以这个时候需要手动去取消刷新效果，wx.stopPullDownRefresh（）调用这个方法即可停止刷新

2.2 上拉触底

就是往上波动也就是页面向下滑动的过程中会到一个程序去刷新下面的数据

image-20220728175548963

通过 onReachBottom（）事件来监听上拉触底

是当一页的高度走完了之后触发

上拉触底距离是指触发上拉触底事件时，滚动条距离页面底部的距离

可在全局或者页面的json文件配置，通过onReachBottmDistance来配置

不用写单位，默认px

image-20220728180930268

上拉触底案例：

首先获取接口数据，并渲染到页面，直接通过rgba赋予背景色

image-20220728194458332

image-20220728194505712

image-20220728194510500

然后在上拉触底事件中，再次获取数据，关键步骤在于获取数据里面给data赋值，是在重复的用解构赋值，添加值进来

image-20220728194736449

image-20220728194742804

然后添加loading效果查看官方文档，可看到wx.showloading

获取值之前就loading

image-20220728194938453

注意一个request的回调，complete，表示完成数据请求

image-20220728195240720

节流处理：

为什么要进行节流处理，因为当我们上拉触底的时候，如果疯狂上拉，会疯狂获取数据显然这样是不行的

而上拉触底节流一般分为这几个步骤，现在data定义节流阀，然后再获取数据的函数里面修改节流阀，最后在上拉触底事件里面判断节流阀

image-20220728200121615

image-20220728200128253

image-20220728200134826

2.3 自定义编译模式

当我们每次在编辑其他页面的时候，每次重新编译都要重新点进这个页面才能看效果很麻烦

我们可以自定义每次编译完成都进入自己的页面

image-20220728200342551

三.生命周期

小程序的生命周期分为应用生命周期和页面生命周期，其中应用生命周期包含页面生命周期也就是相当于vm和vc的关系

image-20220729192915024

所以与之对应应用生命周期函数就是小程序从启动到销毁的那些函数，而页面生命周期函数就是一个页面从加载到销毁的一些函数

3.1 应用生命周期

应用生命周期函数在app.js中来声明，分别是onLaunch，onShow，onHide

image-20220729193306525

前台就是当前在这个小程序里面就是前台，后台就是退回桌面，此时小程序后台运行

image-20220729193542211

可以在开发工具模拟切后台，没有在工具，工具栏管理打开

image-20220729193757224

3.2 页面生命周期

页面周期函数有五个

image-20220729193848715

一般在onLoad初始化数据，在onReady修改页面内容比如修改当面页面标题

四.WXS脚本

wsx是小程序独有的一套脚本语言，wxml无法调用页面js中的函数，需要data来转换一层，但是可以调用wxml定义的函数，wxs典型应用就是过滤器，将数据处理过后再渲染到页面，wsx的语法跟js一样，但是遵循的是commonJS语法

4.1 基本用法

跟script标签一样有标签，写在wxml中

image-20220729194735331

刚才是内嵌式，还可以外联

image-20220729195019143

注意没有对象简写形式

如何引入外联的wxs脚本

image-20220729195223554

4.2 注意

  • 虽然跟js很像，但是还是不是js语言

  • wxs典型场景就是过滤器，经常配合插值语法使用，不能作为事件回调

    image-20220729195532644

  • 具有隔离性，不能调用js里面的函数，也不能调用小程序的api

  • 在ios设备，wxs会比js快2-20倍

五.本地生活案例完善

继续本地生活的案例这次做分页

点击list每一项应该进入一个新的页面并且展示他的内容，所以要把这些都改成navigator组件

image-20220801134336731

并且应该把当前的id和name都传过去

注意参数为变量直接用插值语法

image-20220801134940662

5.1 设置标题内容创建编译模式

因为我们这里的标题是动态获取的，不能再json文件修改，通过文档可发现 wx.setNavigationBarTitle动态设置标题

又见文档可知，要修改视图层的内容比如标题等，应该在onReady生命周期函数中来

image-20220801135800415

但是由于参数要在onLoad获取

image-20220801135856776

image-20220801135925731

为了方便我们来调试商铺列表页面数据，可以创建编译模式

image-20220801140132409

5.2 获取并渲染商铺列表数据

这里主要注意两点

一个是我们后面会上拉触底继续获取请求看到更多数据，这个前面也做过的核心就在我们的数据应该是老数据和新数据的一个合并获取

image-20220801141858134

还有一个点就是我们需要获取数据里面返回来的总数据条数，好做分页功能，具体是个什么作用后面会说，这里主要注意一点对象名如果带有-这个分隔符就不能用什么.什么来获取了必须要用【】这个形式而且里面引号包裹

5.3 上拉刷新

首先需要在获取数据里面开启关闭loading效果

image-20220801161358072

然后设置一下上拉触底的距离

image-20220801161534540

然后逻辑就是在上拉触底事件中将page+1 再获取数据，这个时候就会融合目前数据和下一页数据

image-20220801161829451

然后记得还要做节流

初始为true，在获取数据里面先判断是否为true，进来先改为false，然后complete改为true，下拉触底事件判断是否为true，true再page+1，否则return

image-20220801163208531

判断数据是否加载完毕：

为什么要进行判断，因为当我们数据没有了，你还继续下拉刷新，不判断的话就会继续去请求数据，返回一些空数据回来，正常逻辑这个时候不应该再发起请求了

这里有个公式，用到前面说的total，专门用来判断数据是否记载完毕的公式，当前页码乘以每一页展示的数据>=总数据那么就说明加载完毕了

所以可以在我们上拉触底再来一个判断

image-20220801164946021

用微信自带的弹出提示框

wx.showToast

只不过他要注意的是他默认icon为success，如果不需要要手动修改为none

image-20220801165234871

5.4 下拉刷新

首先应该开启下拉刷新事件

image-20220801170440812

然后我们下拉刷新主要作用就是回到第一页的状态，那就需要重新规划一些数据

image-20220801170713223

这个时候处理我们的关闭刷新窗口，按理说是放在我们complete回调里面

image-20220801170829484

但是有个问题就是，这样一弄不光是下拉刷新，上拉等一系列操作都会去停止一下下拉刷新，显然不对，这里应该这么做

通过一个回调，给这个获取数据的函数传一个形参回调函数，然后判断有回调就执行回调

image-20220801171000337

image-20220801171025712

image-20220801171052707

5.5 wxs处理手机号

首先在外面创建一个wxs文件

image-20220801172105632

里面为一个函数，然后需要使用commonJs语法导出

注意没有对象的简写形式

image-20220801172359858

然后wxml这边导入

image-20220801172534524

注意这里面的，splice方法，如果不删除，就第二个参数为0，并且要插入就写上你要插入的数据

image-20220801172743829

Tags:

VirMach 便宜 VPS

QNews

QNews