乐趣区

关于前端:小程序页面事件与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 参数对象的属性列表如下:

属性 类型 是否必选 阐明
url string 须要跳转的 tabBar 页面的门路,门路后 不能带参数
success function 接口调用胜利的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用完结的回调函数(调用胜利、失败都会执行)
<button bindtap="gotoMessage"> 跳转到 message 页面 </button>
  gotoMessage() {
    wx.switchTab({url: '/pages/message/message'})
  },

2. 导航到非 tabBar 页面

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

属性 类型 是否必选 阐明
url string 须要跳转到的非 tabBar 页面的门路,门路后 能够带参数
success function 接口调用胜利的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用完结的回调函数(调用胜利、失败都会执行)
<button bindtap="gotoInfo"> 跳转到 info 页面 </button>
  gotoInfo() {
    wx.navigateTo({url: '/pages/info/info'})
  },

3. 后退导航

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

属性 类型 默认值 是否必选 阐明
delta number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页
success function 接口调用胜利的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用完结的回调函数(调用胜利、失败都会执行)
<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}
退出移动版