04 视图与逻辑

1 页面导航

2 页面导航的两种方式 

 

2.1 声明式导航

1 跳转到tabBar页面

 url 必须以‘/’开头，

要跳转tabBar 的地址必须指定open-type='switchTab'

 2 跳转到非tabBar 页面

3 后退导航

 2.2 编程式导航

1 导航到tabBar页面

 

 

2  导航到非tabBar页面

3 后退导航

 

 

3 导航传参

3.1 声明式导航传参

3.2 编程式导航传参

 3.3 在 onLoad 中接收导航参数

4 页面事件

4.1 下拉刷新

4.1.1 什么是下拉刷新

下拉刷新 是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而 重新加载页面数据 的行为。

4.1.2 开启下拉刷新

４.１.３配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口

的样式，其中：

⚫ backgroundColor 用来配置下拉刷新 窗口的背景颜色 ，仅支持16 进制的颜色值

⚫ backgroundTextStyle 用来配置下拉刷新 loading 的样式 ，仅支持 dark 和 light

４.１.４监听页面的下拉刷新事件

 ４.１.５停止下拉刷新的效果

４.１.６什么是上拉触底

 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

 用户有可能多次　来回拉动底部　下拉框，　请求还没有完成的话，又进行了一次下拉事　　件，就不应该发第二次请求。我们应该进行节流的处理

也就是同一时间只发送一个请求，当上一个请求没有完成，是不允许发下一个请求的

４.１.７配置上拉触底距离

4.２　下拉触底案例

 

４.２.１步骤1 - 定义获取随机颜色的方法

 

４.２.２步骤2 - 在页面加载时获取初始数据

４.２.３步骤3 - 渲染 UI 结构并美化页面效果

 

４．２.４步骤4 - 上拉触底时获取随机颜色

 下拉底部的时候，再次触发方法：　每次调用方法　新旧数组拼接

４．２.５　步骤5 - 添加 loading 提示效果

 

４．２.６ 步骤6 - 对上拉触底进行节流处理

① 在 data 中 定义 isloading 节流阀

⚫ false 表示当前没有进行任何数据请求

⚫ true 表示当前正在进行数据请求

② 在 getColors() 方法中 修改 isloading 节流阀的值

⚫ 在刚调用 getColors 时将节流阀设置 true

⚫ 在网络请求的 complete 回调函数中，将节流阀重置为 false

③ 在 onReachBottom 中 判断 节流阀的值，从而对数据请求进行节流控制

⚫ 如果节流阀的值为 true，则阻止当前请求

⚫ 如果节流阀的值为 false，则发起数据请求

４.３　自定义编译模式

重新编译，他会进入首页，而不是我们当前编辑的页面，非常麻烦

所以我们使用自定义编译模式

 删除自定义模式

５生命周期

５.１　什么是生命周期

５.２　生命周期的分类

５.３　什么是生命周期函数

５.４生命周期函数的分类

 ５.４.１应用的生命周期函数

 

 模拟切前台和后台：

５.４.２页面的生命周期函数

 

在进入该页面修改标题调用 

６　wxs

６.１　什么是 wxs

WXS （WeiXin Script）是 小程序独有的一套脚本语言 ，结合 WXML，可以构建出页面的结构。

６.２　wxs 的应用场景

６.３　wxs 和 JavaScript 的关系*

 ６.４　基本语法

　６.４.1. 内嵌 wxs 脚本

 

６.４.２定义外联的 wxs 脚本

 

６.４.３使用外联的 wxs 脚本

 

６.５　WXS 的特点

 

７　案例　－本地生活

７.１实现导航跳转并传参

１　创建商铺列表页面

２　修改　九宫格代码

 

 改成ｎａｖｉｇａｔｏｒ，　添加ｕｒｌ　，传递参数

查看参数是否传递过来：

 ７.２　动态设置商铺列表页面的标题内容

刚一进来页面就调用　ａｐｉ方法，只能再ｏｎｒｅａｄｙ方法中调用，只有他是页面初次渲染完成调用

１　 再ｏｎｌｏａｄ里边进行动态转存，供其他方法进行使用

 ２　ｏｎｒｅａｄｙ方法中　调用setNavigationBarTitle

 onReady: function () {
    wx.setNavigationBarTitle({
      title: this.data.query.title
    })
  },

７.３　创建商铺列表的编译模式

只要重新编译，就会进入商品列表页面（不会去首页了）

 ７.４　列表的ａｐｉ接口

１　定义初始数据

２　调用接口

    /**
   * 页面的初始数据
   */
  data: {
    shopList: [],
    page: 1,
    pageSize: 10,
    total: 0,
    isloading: false
  },


  /**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options) {
    this.getShopList()
  },


getShopList(cb) {
    wx.request({
      url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) => {
        this.setData({
          shopList: [...this.data.shopList, ...res.data],
          total: res.header['X-Total-Count'] - 0
        })
      }
    })
  },

shopList　旧数据和新数据进行拼接

ｔｏｔａｌ：　字符串转数字

７.５　渲染商品列表的ｕｉ结构并美化样式

美化

１　ｆｌｅｘ

２　图片的下边有间距

　解决：　给图片添加ｄｉｓｐｌａｙ：　ｂｌｏｃｋ

 ３　文字分散布局

４　添加边距

５　给每一个添加边框

６　给每一个添加外边距

７添加阴影 

 

７.６　展示ｌｏａｄｉｎｇ提示效果

 

７.７　上拉触底时请求下一个数据

 页数＋１　，调用接口

７.８　对上拉触底事件进行节流控制

 

 频繁处理好多次，发现ｐａｇｅ一直变大，一直在调用接口

节流：　定义一个节流阀

７.９　分析数据加载的问题

一个８０条，每次加载１０条，　一共８次。　再往后加载　就么有数据了，加载没有意义

对数据进行判断：　当没有后续数据以后，不应该额外再调用接口

 

 

 代码：

 １.５秒后自动关闭

 

７.１０　为商铺列表页面开启下拉刷新效果

模拟器　，一松手，　会自动关闭下拉刷新效果

但是真机不会关闭，得调用一个关闭的方法

 ７.１１　现在下拉刷新的功能

下拉刷新从第一页开始重新加载

 

７.１２　解决下拉窗口效果不会自动关闭的问题

获取数据以后，再调用关闭的方法

７.１３　使用ｗｘｓ处理手机号

 

１　建立文件

 

function splitPhone(str) {
  if(str.length !== 11) return str

  var arr = str.split('')

  arr.splice(3, 0, '-')
  arr.splice(8, 0, '-')

  return arr.join('')
}

module.exports = {
  splitPhone: splitPhone
}

２　使用