关于前端:小程序页面事件与wxs脚本

文章和代码曾经归档至【Github 仓库：https://github.com/timerring/front-end-tutorial】或者公众号【AIShareLab】回复 小程序 也可获取。

小程序视图与逻辑

页面导航

页面导航指的是页面之间的互相跳转。例如，浏览器中实现页面导航的形式有如下两种：

• <a> 链接
• location.href

小程序中实现页面导航的两种形式

1. 申明式导航：在页面上申明一个 <navigator> 导航组件，通过点击 <navigator> 组件实现页面跳转。
2. 编程式导航：调用小程序的导航 API，实现页面的跳转。

申明式导航

1. 导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。

在应用 <navigator> 组件跳转到指定的 tabBar 页面时，须要指定 url 属性和 open-type 属性，其中：

• url 示意要跳转的页面的地址，必须以 / 结尾
• open-type 示意跳转的形式，必须为 switchTab

<navigator url="/pages/message/message" open-type="switchTab"> 导航到音讯页面 </navigator>

2. 导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。

在应用 <navigator> 组件跳转到一般的非 tabBar 页面时，则须要指定 url 属性和 open-type 属性，根本同上，open-type 必须为 navigate。

<navigator url="/pages/info/info" open-type="navigate"> 导航到 info 页面 </navigator>

留神：为了简便，在导航到非 tabBar 页面时，open-type=”navigate” 属性能够省略。

3. 后退导航

如果要后退到上一页面或多级页面，则须要指定 open-type 属性和 delta 属性，其中：

• open-type 的值必须是 navigateBack，示意要进行后退导航
• delta 的值必须是数字，示意要后退的层级

<navigator open-type="navigateBack"> 后退 </navigator>

编程式导航

1. 导航到 tabBar 页面

调用 wx.switchTab(Object object) 办法，能够跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：

<button bindtap="gotoMessage"> 跳转到 message 页面 </button>

  gotoMessage() {
    wx.switchTab({url: '/pages/message/message'})
  },

2. 导航到非 tabBar 页面

调用 wx.navigateTo(Object object) 办法，能够跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：

<button bindtap="gotoInfo"> 跳转到 info 页面 </button>

  gotoInfo() {
    wx.navigateTo({url: '/pages/info/info'})
  },

3. 后退导航

调用 wx.navigateBack(Object object) 办法，能够返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

<button bindtap="goBack"> 后退 </button>

goBack() {
    wx.navigateBack({delta: 1})
  },

导航传参

申明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的门路。同时，门路的前面还能够携带参数：

• 参数与门路之间应用 ? 分隔
• 参数键与参数值用 = 相连
• 不同参数用 & 分隔

<navigator url="/pages/info/info?name=zs&age=20"> 跳转到 info 页面 </navigator>

编程式导航传参

调用 wx.navigateTo(Object object) 办法跳转页面时，也能够携带参数。

<button bindtap="gotoInfo2"> 跳转到 info 页面 </button>

  gotoInfo2() {
    wx.navigateTo({url: '/pages/info/info?name=ls&gender= 男'})
  },

在 onLoad 中接管导航参数

通过申明式导航传参或编程式导航传参所携带的参数，能够间接在 onLoad 事件中间接获取到：

  data: {
    // 导航传递过去的参数对象
    query: {}},

  onLoad: function (options) {console.log(options)
    this.setData({query: options})
  },

页面事件

下拉刷新事件

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

启用下拉刷新

启用下拉刷新有两种形式：

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

配置下拉刷新窗口的款式，在全局或页面的 .json 配置文件中，

• backgroundColor 用来配置下拉刷新窗口的背景色彩，仅反对 16 进制的色彩值
• backgroundTextStyle 用来配置下拉刷新 loading 的款式，仅反对 dark 和 light

监听页面的下拉刷新事件

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听以后页面的下拉刷新事件。调用 wx.stopPullDownRefresh() 能够进行以后页面的下拉刷新。

例如，在页面的 wxml 中有如下的 UI 构造，点击按钮能够让 count 值自增 +1：

<view>count 值是：{{count}}</view>
<button bindtap="addCount">+1</button>

  addCount() {
    this.setData({count: this.data.count + 1})
  },
      
   /**
   * 页面相干事件处理函数 -- 监听用户下拉动作
   */
  onPullDownRefresh: function () {// console.log('触发了 message 页面的下拉刷新')
    this.setData({count: 0})
    wx.stopPullDownRefresh()},

上拉触底事件

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {console.log('触发了上拉触底的事件')
  },

上拉触底间隔指的是触发上拉触底事件时，滚动条间隔页面底部的间隔。能够在 全局或页面的 .json 配置文件 中，通过 onReachBottomDistance 属性来配置上拉触底的间隔。小程序默认的触底间隔是 50px，在理论开发中，能够依据需要批改这个默认值。

{"usingComponents": {},
  "onReachBottomDistance": 150
}

上拉触底案例

• 定义获取随机色彩的办法
• 在页面加载时获取初始数据
• 渲染 UI 构造并丑化页面成果
• 在上拉触底时调用获取随机色彩的办法
• 增加 loading 提醒成果
• 对上拉触底进行节流解决

步骤 1 – 定义获取随机色彩的办法

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

步骤 2 – 在页面加载时获取初始数据

  onLoad: function (options) {this.getColors()
  },

步骤 3 – 渲染 UI 构造并丑化页面成果

.num-item {
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
  color: black;
}

步骤 4 – 上拉触底时获取随机色彩

  onReachBottom: function () {this.getColors()
  },

步骤 5 – 增加 loading 提醒成果

步骤 6 – 对上拉触底进行节流解决

在 data 中定义 isloading 节流阀

• false 示意以后没有进行任何数据申请
• true 示意以后正在进行数据申请

在 getColors() 办法中批改 isloading 节流阀的值

• 在刚调用 getColors 时将节流阀设置 true
• 在网络申请的 complete 回调函数中，将节流阀重置为 false

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

• 如果节流阀的值为 true，则阻止以后申请
• 如果节流阀的值为 false，则发动数据申请

  data: {colorList: [],
    isloding: false
  },

  getColors() {
    this.setData({isloding: true})
    // 须要展现 loading 成果
    wx.showLoading({title: '数据加载中...'})
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'get',
      success: ({data: res}) => {
        this.setData({colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {wx.hideLoading()
        this.setData({isloding: false})
      }
    })
  },

 /**
     * 页面上拉触底事件的处理函数
 */
  onReachBottom: function () {if (this.data.isloding) return

    this.getColors()},

自定义编译模式

保障每次编译后都跳转到指定的页面，还能够初始一些传递参数。

生命周期

在小程序中，生命周期分为两类，别离是：

• 利用生命周期

  特指小程序从启动 -> 运行 -> 销毁的过程

• 页面生命周期

  特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范畴较小，应用程序的生命周期范畴较大，如图所示：

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

生命周期函数的作用：容许程序员 ** 在特定的工夫点，执行某些特定的操作。** 例如，页面刚加载的时候，能够在 onLoad 生命周期函数中初始化页面的数据。

留神：生命周期 强调的是时间段，生命周期函数 强调的是工夫点。

利用的生命周期函数

小程序的利用生命周期函数须要在 app.js 中进行申明，示例代码如下：

//app.js
App({

  /**
   * 当小程序初始化实现时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {// console.log('onLaunch')
  },

  /**
   * 当小程序启动，或从后盾进入前台显示，会触发 onShow
   */
  onShow: function (options) {// console.log('onShow')
  },

  /**
   * 当小程序从前台进入后盾，会触发 onHide
   */
  onHide: function () {// console.log('onHide')
  },

  /**
   * 当小程序产生脚本谬误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {}})

页面的生命周期函数

小程序的页面生命周期函数须要在页面的 .js 文件中进行申明，示例代码如下：

WXS 脚本

WXS（WeiXin Script）是小程序独有的一套脚本语言，联合 WXML，能够构建出页面的构造。

**wxml 中无奈调用在页面的 .js 中定义的函数，然而，wxml 中能够调用 wxs 中定义的函数。** 因而，小程序中 wxs 的典型利用场景就是“过滤器”。

wxs 和 JavaScript 的关系，尽管 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 脚本

wxs 代码能够编写在 wxml 文件中的 <wxs> 标签内，就像 Javascript 代码能够编写在 html 文件中的 <script> 标签内一样。
wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定以后 wxs 的模块名称，不便在 wxml 中拜访模块中的成员：

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  module.exports.toUpper = function(str) {return str.toUpperCase()
  }
</wxs>

定义外联的 wxs 脚本

wxs 代码还能够编写在以 .wxs 为后缀名的文件内，就像 javascript 代码能够编写在以 .js 为后缀名的文件中一样。示例代码如下：tools.wxs

function toLower(str) {return str.toLowerCase()
}

module.exports = {toLower: toLower}

应用外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs> 标签增加 module 和 src 属性，其中：

• module 用来指定模块的名称
• src 用来指定要引入的脚本的门路，且必须是相对路径

<view>{{m2.toLower(country)}}</view>

<wxs src="../../utils/tools.wxs" module="m2"></wxs>

WXS 的特点

1. 与 JavaScript 不同：实质上，wxs 和 JavaScript 是齐全不同的两种语言！

2. 不能作为组件的事件回调

wxs 典型的利用场景就是“过滤器”，常常配合 Mustache 语法进行应用，例如：

然而，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，上面的用法是谬误的：

3. 隔离性：隔离性指的是 wxs 的运行环境和其余 JavaScript 代码是隔离的。体现在如下两方面：

• wxs 不能调用 js 中定义的函数
• wxs 不能调用小程序提供的 API

4. 性能好：在 iOS 设施上，小程序内的 WXS 会比 JavaScript 代码快 2 \~ 20 倍，在 android 设施上，二者的运行效率无差别。

案例 – 本地生存

• 页面导航并传参
• 上拉触底时加载下一页数据
• 下拉刷新列表数据

列表页面的 API 接口

以分页的模式，加载指定分类下商铺列表的数据：

• 接口地址
  https://www.escook.cn/categories/:cate_id/shops
  URL 地址中的 :cate\_id 是动静参数，示意分类的 Id
• 申请形式
  GET 申请

• 申请参数

  • _page 示意申请第几页的数据 \_
  • _limit 示意每页申请几条数据

判断是否还有下一页数据

如果上面的公式成立，则证实没有下一页数据了：

• 页码值 * 每页显示多少条数据 >= 总数据条数
• page * pageSize >= total

<!--pages/shoplist/shoplist.wxml-->

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}"></image>
  </view>
  <view class="info">
    <text class="shop-title">{{item.name}}</text>
    <text> 电话：{{tools.splitPhone(item.phone)}}</text>
    <text> 地址：{{item.address}}</text>
    <text> 营业时间：{{item.businessHours}}</text>
  </view>
</view>

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

// pages/shoplist/shoplist.js
Page({

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

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

  // 以分页的模式获取商铺列表数据的办法
  // 传入 cb 函数参数
  getShopList(cb) {
    this.setData({isloading: true})
    // 展现 loading 成果
    wx.showLoading({title: '数据加载中...'})

    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
        })
      },
      complete: () => {
        // 暗藏 loading 成果
        wx.hideLoading()
        this.setData({isloading: false})
        // wx.stopPullDownRefresh()
        // 如果 cb 存在，则调用 cb 函数
        cb && cb()}
    })
  },

  /**
   * 生命周期函数 -- 监听页面首次渲染实现
   */
  onReady: function () {
    wx.setNavigationBarTitle({title: this.data.query.title})
  },

  /**
   * 生命周期函数 -- 监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数 -- 监听页面暗藏
   */
  onHide: function () {},

  /**
   * 生命周期函数 -- 监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相干事件处理函数 -- 监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 须要重置要害的数据
    this.setData({
      page: 1,
      shopList: [],
      total: 0
    })
    // 从新发动数据申请
    // 这里 cb 传入的是一个箭头函数
    this.getShopList(() => {wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {if (this.data.page * this.data.pageSize >= this.data.total) {
      // 证实没有下一页的数据了
      return wx.showToast({
        title: '数据加载结束！',
        icon: 'none'
      })
    }
    // 判断是否正在加载其余数据
    if (this.data.isloading) return
    // 页码值 +1
    this.setData({page: this.data.page + 1})

    // 获取下一页数据
    this.getShopList()},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})

{"usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

/* pages/shoplist/shoplist.wxss */
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}

.thumb image {
  width: 250rpx;
  height: 250rpx;
  display: block;
  margin-right: 15rpx;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}

.shop-title {font-weight: bold;}

tools.wxs：

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}