3 视图与逻辑

页面导航

浏览器的常用实现方式

<a href='url'></a>
location.href() 小程序的两种实现方式
声明式导航在页面上声明一个 <navigator> 导航组件，通过点击 <navigator> 组件实现页面跳转
编程式导航调用小程序的导航 API，实现页面的跳转

声明式导航

导航到 tabBar 页面
导航到非 tabBar 页面
后退导航，delta 是后退层级

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

编程式导航

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。
调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。 Object 对象属性

属性	类型	是否必选	说明
url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
delta	number	否	返回的页面数，默认为1，如果 delta 大于现有页面数，则返回到首页
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

<button bind:tap="goToIndex">回到主页</button>
 
<script>
  goToIndex() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  }
</script>

导航传参

使用声明式导航或编程式导航跳转到非 tabBar 时，路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔携带的参数，可以直接在 onLoad 事件中直接获取到

onLoad:function(options) {    
    console.log(options) // options就是导航传递过来的参数对象  
}

页面事件

下拉刷新事件

启用下拉刷新

全局开启下拉刷新，在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
局部开启下拉刷新，在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

配置下拉刷新窗口的样式

backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听页面的下拉刷新事件

onPullDownRefresh: function() {
  console.log("refreash")
  this.setData({
    count: 0
  })
  wx.stopPullDownRefresh()
}

上拉触底事件

监听页面的上拉触底事件

onReachBottom() {
  console.log("onReachBottom")
}

案例

功能：上拉触底时自动发起请求获取更多的数据，并渲染。

Page({
  data: {
    colorList: [],
    isloading: false // 节流阀
  },
  onLoad(option) {
    this.getColors()
  },
  getColors() {
    wx.showLoading({
      title: '数据加载中...',
    })
    this.setData({
      isloading: true
    })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: "GET",
      success: ({data: res}) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
        wx.hideLoading()
        this.setData({
          isloading: false
        })
      }
    })
  },
  onReachBottom() {
    if (!this.data.isloading) {
      this.getColors()
    }
  }
})

生命周期

生命周期（Life Cycle）是指一个对象从创建→ 运行→ 销毁的整个阶段，强调的是一个时间段。

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。

应用与页面的生命周期函数

App({
    // 小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
    onLaunch: function(options) { },
    //小程序启动，或从后台进入前台显示时触发
    onShow : function(options) { },
    //小程序从前台进入后台时触发。
    onHidee:function() { }
}
// 页面的.js 文件
Page({
    onLoad：function(options）{}, //监听页面加载
    onShow: function() { },监听页面显示
    onReady : function() {},监听页面初次渲染完成，一个页面只调用1次
    onHide : function() { },监听页面隐藏
    onUnload: function() { }//监听页面卸载，一个页面只调用1次
)

WXS（WeiXin Script）脚本

虽然 wxs 的语法类似于JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：

wxs 有自己的数据类型： number数值类型、string字符串类型、boolean布尔类型、object对象类型、function 函数类型、array数组类型、 date日期类型、 regexp正则
wxs 不支持类似于 ES6 及以上的语法形式不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc… 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法
wxs 遵循 CommonJS 规范 module 对象 require() 函数 module.exports 对象

内嵌 wxs 脚本

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
//将文本转为大写形式zs->ZS
    module.exports.toUpper = function(str) {
        return str.toUpperCase()
    }
</wxs>

外联的 wxs 脚本

// tools.wxs文件
function tolower(str) {
    return str.toLowerCase()
}
module.exports = {
    toLower: tolower
}

<!-- 调用 m2 模块中的方法-->
<view>{{m2.toLower(country)}}</view>
<!--引用外联的 tools.wxs 脚本，并命名为 m2-->
<wxs src=". ./../utils/tools.wxs" module="m2"></wxs>

Quartz

探索