小程序学习day3

JAY.LIN 收录于小程序

2025-01-17 约 3027 字预计阅读 7 分钟

https://bing.ee123.net/img/rand?artid=140778160

小程序学习——day3

页面导航

指的是页面间的相互跳转，小程序实现页面导航有两种方式

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

声明式导航

导航到tabBar页面

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

url表示要跳转页面地址，以 / 开头
open-type表示跳转的方式，必须为 switchTab

<navigator url="/pages/home/home" open-type ="switchTab">跳转到home</navigator>

导航到非tabBar页面

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

url表示要跳转页面地址，以 / 开头
open-type表示跳转的方式，必须为 navigate

在导航到非tabBar页面，open-type=“navigate"可以省略

后退导航

后退到上一页面或多级页面，需指定open-type和delta属性

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

<navigator open-type="navigateBack" delta="1">返回上一层</navigator>

编程式导航

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

<button bindtap="gotoContact" type="default">跳转到contact页面</button>


  // 通过编程式导航跳转到Contact页面
  gotoContact() {
  wx.switchTab({
      url: '/pages/contact/contact',
  })
},

导航到非tabBar页面

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

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

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

后退导航

调用 wx. navigateBack (Object object) 方法，可以后退到上一页面或多级页面

<button bindtap="backlast">回退到上一层</button>

// 默认回退到上一层
  backlast(){
    wx.navigateBack()
  },

导航传参

声明式导航传参

navigator中的url指定跳转页面，后面可跟参数：

参数与路径之间用 ? 分隔
参数键与参数值用
相连
不同参数用 & 分隔

<navigator url="/pages/info/info?name=zhangsan&age=18">跳转传参</navigator>

编程式传参

<button bindtap="gotoinfo2">跳转到info页面传参</button>

gotoinfo2(){
    wx.navigateTo({
      url: '/pages/info/info?name=ge&six=1',
    })
  },

在onLoad中接受导航参数

通过声明式或编程式传参，可以在onLoad事件直接获取到

data: {
    query: {}

  },

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

  },

一般在data中声明一个 query 接收导航传过来的参数

页面事件

下拉刷新

全局下拉刷新

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

局部下拉刷新

在页面的.json配置文件中，将enablePullDownRefresh设置为true

在页面.js文件中，通过 onPullDownRefresh() 函数监听当前页面下拉刷新事件

当数据下拉刷新重载后，调用wx.stopPullDownRefresh()停止当前页面的下拉刷新

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



  data: {
    count: 0
  },
  addCount(){
    this.setData({
      count: this.data.count+1
    })
  },
onPullDownRefresh() {
    //下拉刷新后count值变为1
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()//停止下拉刷新
  },

上拉触底

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

在页面的 .json 文件中配置 onReachBottomDistance 属性配置上拉触底的距离（距离底部多少距离开始调用 onReachBottom() 函数）

案例

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]
        })
      },
   
    })
  },
  onLoad(options) {
    this.getcolors()
  },

2、渲染美化页面

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

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

3、上拉触底获取颜色

  onReachBottom() {
    this.getcolors()
  },

4、添加Loading提示效果

wx.showLoading({
      title: '数据加载中...',
    })

complete: ()=>{
        wx.hideLoading()
      }

5、上拉触底节流处理

在data中定义isloading节流阀

false表示当前没有进行任何数据请求
true表示当前正在进行数据请求

isloading:fale

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

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

getColor() {
    this.setData({
        isloading: true
    })
    ......
    wx.request({
        ......
        complete: () => {
            wx.hideLoading()
            this.setData({
                isloading: false
            })
        ......

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

如果节流阀的值为true，则阻止当前请求
如果节流阀的值为false，则发起数据请求

onReachBottom () {
    if(this.data.isloading) return
    this.getColor()
},

自定义编译模式

生命周期

生命周期分类

应用生命周期
页面生命周期

生命周期强调时间段，生命周期函数强调时间点

生命周期函数分类

应用的生命周期函数

在app.js中声明

App({

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

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

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

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

2.页面的生命周期函数

在页面的.js中声明

Page({

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

  },

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

  },

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

  },

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

  },

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

  },

})

WXS

WXS（WeiXin Script）是 小程序独有的一套脚本语言 ，结合WXML，可以构建出页面的结构。

1、wxs有自己的数据类型

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

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

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

3、wxs遵循CommonJS规范

module对象
require()函数
module.exports对象

内嵌wxs脚本

wxs代码可以编写在wxml文件中的 <wxs> 标签内，就像 Javascript 代码可以编写在html文件中的 <script> 标签内一样。

wxml文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前WXS的模块名称，方便在wxml中访问模块中的成员：

m1将文本转为大写: zs->ZS

 data: {
    username: 'zs'
  },


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

外联的wxs脚本

编写在以.wxs为后缀名的文件内（在utils文件夹下创建）

//tools.wxs

//转化为小写
function toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower: toLower    // 属性 : 具体对应的值
}

使用外联脚本

在wxml中引入的wxs脚本时，必须为标签添加 module和src 属性，其中

module指定模块名称
src指定要引入的文件路径，必须是相对路径

//.js
data: {
    country: 'CHINA'
  },


//.wxml
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

特点

wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用。但是，在wxs中定义的函数不能作为组件的事件回调函数。例如下面是错误的：

<button bindtap="m2.toLower">按钮</button>

隔离性：wxs的运行环境和其他JavaScript代码是隔离的。

wxs不能调用js中定义的函数

wxs不能调用小程序提供的API

性能好