小钟要学习！！！

小钟要学习！！！

关注
发信
关注(28)粉丝(399)

微信小程序开发学习4（视图与逻辑）

微信小程序开发学习4（视图与逻辑）

1、学习目标

  1. 能够知道如何实现页面之间的导航跳转
  2. 能够知道如何实现下拉刷新效果
  3. 能够知道如何实现上拉加载更多效果
  4. 能够知道小程序中常用的生命周期函数

2、页面导航

2.1、小程序中实现页面导航的两种方式

2.1.1、声明式导航

  • 在页面上声明一个<navigator>导航组件
  • 通过点击<navigator>组件实现页面导航

2.1.2、导航到tabBar页面

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

在使用:组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

  • Ul表示要跳转的页面的地址，必须以/开头
  • open-type表示跳转的方式，必须为switchTab
<!--index.wxml-->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

2.1.3、导航到非tabBar页面

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

在使用:组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中：

  • ul表示要跳转的页面的地址，必须以/开头

  • open-type表示跳转的方式，必须为navigate

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

注意：为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。

2.1.4、后退导航

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

  • open-type的值必须是navigateBack，表示要进行后退导航
  • delta的值必须是数字，表示要后退的层级
<navigator open-type="navigateBack" delta="1">后退</navigator>

注意：为了简便，如果只是后退到上一页面，则可以省略deltas属性，只因其默认值就是1

2.2、编程式导航

  • 调用小程序的导航API，实现页面的跳转

2.2.1、导航到tabBar页面

实例代码

<button bindtap="gotoMessage" type="primary">链式编程跳转到消息页面</button>

编程式导航

// 链式编程导航跳转到消息页面
  gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message'
    })
  }

2.2.2、导航到非tabBar页面

// 链式编程导航跳转到info页面
  gotoInfo(){
    wx.switchTo({
      url: '/pages/info/info'
    })
  }

2.2.3、后退导航

实例代码

<navigator bindtap="gotoBack">链式编程后退</navigator>

// 后退页面
gotoBack(){
    wx.navigateBack({
      delta: 1,
    })
}

2.2、导航传参

2.2.1、声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

  1. 参数与路径之间使用?分隔
  2. 参数键与参数值使用=相连
  3. 不同参数用&分割
<navigator url="/pages/info/info?name=zhangsan&age=21">携带参数跳转到info页面</navigator>

开发者工具如何查看页面参数？点击左下脚选项切换为页面参数即可

2.2.2、编程式导航传参

gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=zhangsan&age=12',
    })
}

2.2.3、在onLoad中接收导航参数

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

由于在该地方回有作用域影响其他地方如果想要访问是访问不了的，我们可以将参数提交到data里面供其他方法也可以使用到

3、页面事件

3.1、下拉属性

3.1.1、启用下拉刷新

  1. 全局开启下拉刷新【不推荐，不是所有页面都需要】

    在app.json的window节点中，将enablePullDownRefresh设置为true

  2. 局部开启下拉刷新

    在页面.json的window节点中，将enablePullDownRefresh设置为true

3.1.2、配置下拉刷新窗口的样式

在全局或页面的，json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：

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

3.1.3、监听下拉刷新事件

该事件不需要调用，在下拉刷新时回生效

<view>count的值是{{count}}</view>
<button bindtap="gotoInt" type="primary">点击按钮自增+1</button>

下拉刷新的时候就会将count回0

/**
 * 点击按钮自增+1
 */
gotoInt(){
    this.setData({
        count: this.data.count+1
    });
},

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh() {
    console.log("下拉窗口成功")
    this.setData({
        count: 0
    });
}

3.1.4、停止下拉刷新的效果

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh() {
    console.log("下拉窗口成功")
    this.setData({
        count: 0
    });
    // 当数据重置成功后，调用此函数，关闭下拉刷新的效果
    wx.stopPullDownRefresh();
}

3.2、上拉触底事件

3.2.1、监听页面的上拉触底事件

在页面.js文件中，通过onReachBootom()函数即可监听当前页面的上拉触底事件

/**
* 上拉触底监听事件
*/
onReachBottom(){
    console.log("触发了上拉触底事件");
}

3.2.2、配置上拉触底的距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的，json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。

小程序默认的触底距离是50x,在实际开发中，可以根据自己的需求修改这个默认值。

3.2.3、案例

  1. 定义获取随机颜色的方法
    /**
 * 页面的初始数据
 */
data: {
    // 存放随机颜色的列表
    colorList:[]
},
/**
 * 获取随机颜色的方法
 */
getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:'GET',
      success:({data:res}) => {
          console.log(res);
          this.setData({
              colorList:[...this.data.colorList,...res.data]
          })
      }
    })
}
  2. 在页面加载时获取初始化数据
    /**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
    this.getColors();
}
  3. 渲染ui结构并美化页面效果
    <view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

    美化样式

    /* pages/contact/contact.wxss */
.num-item{
	border: 1rpx solid #efefef;
	border-radius: 8px;
	line-height: 200rpx;
	margin: 15rpx;
	text-align: center;
	text-shadow: 0rpx 0rpx 5rpx #fff;
	box-shadow: 1rpx 1rpx 6rpx #aaa;
}

    微信小程序开发学习4（视图与逻辑）-LMLPHP

  4. 在上拉触底时调用获取随机颜色的方法
    /**
 * 页面上拉触底事件的处理函数
 */
onReachBottom() {
    this.getColors();
}
  5. 添加loading提示效果【修改请求方法中添加】
    /**
 * 获取随机颜色的方法
 */
getColors(){
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中',
    })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:'GET',
      success:({data:res}) => {
          console.log(res);
          this.setData({
              colorList:[...this.data.colorList,...res.data]
          })
      },
      complete:()=>{
          // 关闭loading隐藏效果
          wx.hideLoading();
      }
    })
}
  6. 对上拉触底进行节流处理
    • 在data中定义isloading节流阀
      data: {
    // 存放随机颜色的列表
    colorList:[],
    // 节流处理状态
    falg:false
}

      1、false表示当前没有进行任何数据请求

      2、true表示当前正在进行数据请求

    • 在getColors()方法中修改isloading节流阀的值

      修改请求方法添加节流阀

      /**
 * 获取随机颜色的方法
 */
getColors(){
    this.setData({
        falg:true
    });
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中',
    })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:'GET',
      success:({data:res}) => {
          console.log(res);
          this.setData({
              colorList:[...this.data.colorList,...res.data]
          })
      },
      complete:()=>{
          // 关闭loading隐藏效果
          wx.hideLoading();
          this.setData({
              falg:false
          });
      }
    })
}

      1、在刚调用getColors时将节流阀设置为true

      2、在网络请求的complete回调函数中，将节流阀设置为false

    • 在onReachBottom中判断节流阀的值，从而对数据请求进行节流操作
      /**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
    if(this.data.falg) return
    this.getColors();
}

      1、如果节流阀的值为true，则阻止当前请求。反之正常请求

3.2.4、自定义编译模式

1、添加编译模式

微信小程序开发学习4（视图与逻辑）-LMLPHP

2、设置编译页面

微信小程序开发学习4（视图与逻辑）-LMLPHP

4、生命周期

4.1、什么是生命周期

小程序的生命周期概括如下阶段：

  1. 小程序启动，表示生命周期开始
  2. 小程序关闭,表示生命周期结束
  3. 小程序在运行的过程就是生命周期

4.2、生命周期分类

  1. 应用生命周期

  2. 页面生命周期

    微信小程序开发学习4（视图与逻辑）-LMLPHP

4.3、什么是生命周期函数

生命周期函数：是由小程序框架提供的内置函数，回伴随着整个生命周期，

作用：允许程序员在特定的时间点，执行某些特定的操作，例如：在页面加载的时候，可以在onLoad生命周期函数中初始化页面数据

4.4、生命周期函数的分类

  1. 应用的生命周期函数

  2. 页面的生命周期函数

5.5、应用生命周期函数

App({
  /**
   * 当小程序初始化完成时，会触发onLaunch（全局只触发一次
   */
  onLaunch(){

  },
  /**
   * 当小程序启动或从后台进入前台显示会触发onShow
   */
  onShow(){

  },
  /**
   * 当小程序从前台进入后台，会触发onHide
   */
  onHide(){

  }
});

5.6、页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行声明，代码如下

// pages/logs/logs.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载只调用一起
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

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

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

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

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

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

    }
})

5、WXS脚本

5.1、wxs和javaScript的关系

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

  1. WXS有自己的数据类型

    number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp正则

  2. WXS不支持类似于ES6及以上的语法形式

    不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc.

    支持：var定义变量、普通function函数等类似于ES5的语法

  3. wxs遵循CommonJS规范

    module对象

    require()函数

    module.exports对象

5.2、wxs脚本基础语法

5.2.1、内嵌wxs脚本

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
	// 小写转换成大写
	module.exports.toUpper = function(str){
		console.log("方法执行："+str.toUpperCase())
		return srt.toUpperCase()
	}
</wxs>

5.2.2、定义外联的wxs脚本

wxs代码还可以编写在以.wxs为后缀的文件内，就像JavaScript代码一样编写一个外部文件

// 定义方法
function toLower(str){
	return str.toLowerCase()
}

// 对外共享成员
module.exports = {
	toLower:toLower
}

5.2.3、使用外联的wxs文件

在wxml中引入外联的wxs脚本时，必须使用wxs标签添加module和src属性，其中：

  • module用来指定模块的名称
  • src用来指定要引入的脚本的路径，且必须是相对路径
<view>{{m2.toLower(country)}}</view>
// 引入外联
<wxs module="m2" src="../../utils/tools.wxs"></wxs>

5.2.4、wxs的特点

1、与JavaScript不同
2、不能作为组件事件的回调

wxs典型的应用场景就是过滤器，

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

<button bindtap="m2.toLower" type="primary">点击按钮自增+1</button>

3、隔离性

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

  1. WxS不能调用js中定义的函数
  2. WXs不能调用小程序提供的API

4、性能

  • 在iOS设备上，小程序内的WXS会比JavaScript代码快2~20倍

  • 在android设备上，二者的运行效率无差异

07-19 16:41
Powered by LMLPHP ©2024 小钟要学习！！！ 0.046769