微信小程序

  • 1、小程序–视图与逻辑
    • 1.1 页面导航
    • 1.2 页面事件
    • 1.3 生命周期
    • 1.4 WXS脚本

1、小程序–视图与逻辑

1.1 页面导航

  • 页面导航指页面之间的相互跳转

  • 小程序实现页面导航的两种方式：

    • 声明式导航

      • 在页面上声明一个导航组件；通过点击组件实现页面跳转
      • 导航到tabBar页面
      //页面地址必须以/开头//必须指定跳转方式，为switchTab<navigator url="/pages/message/message" open-type="switchTab">导航消息页面</navigator>
      • 导航到非tabBar页面
      //页面地址必须以/开头//指定跳转方式，为navigate，可省略<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
      • 后退导航
      //open-type的值必须是navigateBack，表示要进行后退导航//delta的值必须是数字，表示要后退的层级,可省略，默认值为1<navigator open-type="navigateBack" delta="1">后退</navigator>

    • 编程式导航

      • 调用小程序的导航API，实现页面的跳转
      属性类型是否必选说明
      urlstring是需要跳转的页面的路径，路径后不能带参数
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
      • 导航到tabBar页面
      //wxml<button bindtap="gotoMessage">跳转到消息页面</button>//jsgotoMessage(){    wx.switchTab({        url:'/pages/message/message'    })}
      • 导航到非tabBar页面
      //wxml<button bindtap="gotoInfo">跳转到信息页面</button>//jsgotoInfo(){  wx.navigateTo({    url: '/pages/info/info'  })},
      • 后退导航
      属性类型默认值是否必选说明
      deltanumber1否返回的页面数，如果 delta 大于现有页面数，则返回到首页
      successfunction否接口调用成功的回调函数
      failfunction否接口调用失败的回调函数
      completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
      //wxml<button bindtap="gotoBack">后退</button>//jsgotoBack(){    wx.navigateBack({  })}

  • 导航传参

    • 声明式导航传参

      • 路径后面携带参数：
        • 参数与路径之间使用**？**
        • 分隔参数键与参数值用**=**相连
        • 不同参数用**&**分隔
      <navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

    • 编程式导航传参

      //wxml<button bindtap=gotoInfo2">跳转到info页面</button>//jsgotoInfo2(){    wx.navigateTo({ur1: " /pages/infolinfo?name=ls&gender=男"  })}

    • 在onLoad中接收导航参数

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

1.2 页面事件

下拉刷新事件

  • 通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

  • 启用下拉刷新的方式：

    • 全局开启下拉刷新(app.json的windows结点设置)
    • 局部开启下拉刷新(页面的.json中配置)
    • 实际开发中为需要的页面单独开启下拉刷新的效果

  • 监听页面的下拉刷新事件

    • 在页面的.js文件中，通过 **onPullDownRefresh()**函数即可监听当前页面的下拉刷新事件
    onPullDownRefresh() {    console.log('触发下拉刷新事件')    wx.stopPullDownRefresh()  },

  • 停止下拉刷新的效果

    • 调用**wx.stopPullDownRefresh()**可以停止当前页面的下拉刷新

上拉触底事件

  • 通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
  • 监听页面的上拉触底事件
    • 在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件(节流 – 在data 中定义isloading节流阀；在方法中修改isloading节流阀的值；在onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制)
  • 配置上拉触底距离
    • 触发上拉触底事件时，滚动条距离页面底部的距离，在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离

1.3 生命周期

  • 在小程序中，生命周期分为两类,分别是:

    • 应用生命周期(范围较大)特指小程序从启动->运行->销毁的过程
    • 页面生命周期(范围较小)特指小程序中，每个页面的加载->渲染->销毁的过程

  • 生命周期函数:是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行，允许程序员在特定时间点执行某些特定的操作

  • 生命周期强调的是时间段，生命周期函数强调的是时间点

  • 应用生命周期函数

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

1.4 WXS脚本

概述

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

  • WXML中无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数

  • 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脚本
  • 外联wxs脚本

wxs的特点

  1. 大量借鉴JavaScript的语法(但是是两种不同的语言)
  2. 不能作为组件的事件回调(配合Mustache语法使用)
  3. 隔离性(不能调用js定义的函数及小程序提供的API)
  4. 性能好(iOS上比js快2-20倍）