微信小程序（视图与逻辑）

Posted 2023-03-12 会思想的苇草i

微信小程序

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

1、小程序–视图与逻辑

1.1 页面导航

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

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

  • 声明式导航

    • 在页面上声明一个< navigator>导航组件；通过点击< navigator>组件实现页面跳转
    • 导航到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，实现页面的跳转

    属性	类型	是否必选	说明
    url	string	是	需要跳转的页面的路径，路径后不能带参数
    success	function	否	接口调用成功的回调函数
    fail	function	否	接口调用失败的回调函数
    complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

    • 导航到tabBar页面

    //wxml
    <button bindtap="gotoMessage">跳转到消息页面</button>
    
    //js
    gotoMessage()
        wx.switchTab(
            url:'/pages/message/message'
        )
    
    

    • 导航到非tabBar页面

    //wxml
    <button bindtap="gotoInfo">跳转到信息页面</button>
    
    //js
    gotoInfo()
      wx.navigateTo(
        url: '/pages/info/info'
      )
    ,
    

    • 后退导航

    属性	类型	默认值	是否必选	说明
    delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页
    success	function		否	接口调用成功的回调函数
    fail	function		否	接口调用失败的回调函数
    complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

    //wxml
    <button bindtap="gotoBack">后退</button>
    
    //js
    gotoBack()
        wx.navigateBack(
      )
    
    

• 导航传参

  • 声明式导航传参

    • 路径后面携带参数：
      • 参数与路径之间使用**？**
      • 分隔参数键与参数值用**=**相连
      • 不同参数用**&**分隔

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

  • 编程式导航传参

    //wxml
    <button bindtap=gotoInfo2">跳转到info页面</button>
    
    //js
    gotoInfo2()
        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倍）