文章和代码曾经归档至【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 参数对象的属性列表如下：

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

2.导航到非 tabBar 页面

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

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

3.后退导航

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

属性类型默认值是否必选阐明
deltanumber1否返回的页面数，如果 delta 大于现有页面数，则返回到首页
successfunction否接口调用胜利的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用完结的回调函数（调用胜利、失败都会执行）
<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.jsApp({  /**   * 当小程序初始化实现时，会触发 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.jsPage({  /**   * 页面的初始数据   */  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}