小程序随笔02

1. 页面导航

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

2. 声明式导航——导航到 tabBar 页面

<!-- ⚫ url 表示要跳转的页面的地址，必须以 / 开头 -->
<!-- ⚫ open-type 表示跳转的方式，必须为switchTab -->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<!-- /导航到非 tabBar 页面 -->
 <!-- ⚫ url 表示要跳转的页面的地址，必须以 / 开头 -->
<!-- ⚫ open-type 表示跳转的方式，必须为navigate  -->
<!-- open-type="navigate" 可以省略 -->
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
<navigator url="/pages/info/info" >导航到info页面</navigator>
<!-- 声明式导航 实现后退功能 -->
<!-- ⚫ open-type 的值必须是 navigateBack，表示要进行后退导航 -->
<!-- 、⚫ delta 的值必须是数字，表示要后退的层级 -->
<!-- 为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。 -->
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

3.编程式导航

<!-- 编程时导航 -->
<button bindtap="gotoMessage">跳转到message页面</button>

// 通过编程时导航跳转到taber message页面
  gotoMessage() {
    wx.switchTab({
      url: '/pages/message/message',
    })
  },


<!-- 跳转到非 TabBer 页面 -->
<button bindtap="gotoInfo">条撞到info页面</button>

// 跳转到非TabBer 页面 
  gotoInfo() {
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

<!-- 编程时导航 后退导航 -->
<button bindtap="goBack">后退</button>

goBack() {
  wx.navigateBack({
    delta: 1,
  })
},

4.页面导航 - 导航传参

<!-- 声明式导航传参 -->
<!-- ? 参数与路径之间的分割 -->
<!-- = 参数健与参数值用=相连 -->
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

<!-- 编程时导航传参 -->
<button bindtap="gotoInfo2">编程时导航传参</button>

 // 编程式导航传参
  gotoInfo2() {
    wx.navigateTo({
      url: '/pages/info/info?name=张三&gender=男',
    })
  },


//  通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：

//js

 data: {
    // 定义数据对象
    query:{}
  },

onLoad: function (options) {
    console.log(options);
    // 在onLoad 里面赋值
    this.setData({
      query: options
    })
  },

5.页面事件 - 下拉刷新事件重新加载页面数据

5.1 启用下拉刷新有两种方式：
① 全局开启下拉刷新
⚫ 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
② 局部开启下拉刷新
⚫ 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

{
  "usingComponents": {},
  "enablePullDownRefresh":true
}

5.2. 配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口
的样式，其中：
⚫ backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
⚫ backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

{
  "usingComponents": {},
  "enablePullDownRefresh":true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

6. 监听页面的下拉刷新事件

<!-- 下拉刷新事件 -->
<view>count值为： {{count}}</view>
<button bindtap="coundAdd">+1</button>

// 定义数据

  data: {
    count:0
  },


// 点击按钮+1
coundAdd(){
  this.setData({
    count:this.data.count + 1
  })
},


// 页面相关事件处理函数--监听用户下拉动作
   
  onPullDownRefresh: function () {
   this.setData({
     count:0
     })

// 当数据重置成功后，调用此函数，关闭下拉刷新效果
    wx.stopPullDownRefresh()
   },

7.页面事件 - 上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

<!-- 下拉触底事件 内容超过屏幕才会触发 -->
<view class="box">1</view>

.box {
  height: 5000rpx；
  出发了上啦触底事件
}

// js文件

// 页面上拉触底事件的处理函数
   
  onReachBottom: function () {
   console.log('出发了上啦触底事件');
  },


// json

{
  "usingComponents": {},
  // 单位默认px更改触底距离
  "onReachBottomDistance": 150

}

 8.上拉触底案例

// html

<!--pages/contact/contact.wxml-->
<text>pages/contact/contact.wxml</text>
<!-- 上啦触底案例 -->
<view wx:for="{{colorList}}" 
wx:key="index" 
class="num-item"
style="background-color:rgba({{item}});"
>{{item}}</view>

// css

/* pages/contact/contact.wxss */
.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: white;
}

// js

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      //  随机颜色列表
      colorList:[],
      // 对上拉触底进行节流处理 
      // 1.  在 data 中定义 isloading 节流阀
      isloading:false
  },
  // 获取随机颜色的方法
  getColors() {
    // 2. isloading 为true 正在发起网络请求
    this.setData({
      isloading:true
    })
    // 需要展示 loading效果
    wx:wx.showLoading({
      title: '数据加载中...',
     
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:({data: res}) => {
        console.log(res);
        this.setData({
          colorList:[...this.data.colorList, ...res.data]       
        })
      },
      // 不论成功还是失败都需要隐藏loading效果
      complete:() => {
        wx.hideLoading()
        // 3. 发起网络请求中，不能继续发起isloading:false
        this.setData({
          isloading:false
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  this.getColors()
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 4. 如果isloading 则发起网络数据请求 否则退出去
    if(this.data.isloading) return
    this.getColors()
  },

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

  }
})

9.小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

// app.js


App({

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

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

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

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


})

10 页面的生命周期函数

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

 11 WXS 脚本 - 概述

wxml 中无法调用在页面的.js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中
wxs 的典型应用场景就是“过滤器”。

12   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 对象

13 内嵌 wxs 脚本

wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 Javascript 代码可以编写在 html 文件中的 <script>
标签内一样。
wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前wxs 的模块名称，方便在
wxml 中访问模块中的成员：

<!-- 使用内嵌 wxs 脚本 -->
<view>{{m1.toUpper(username)}}</view>



<wxs module="m1">
// 小写转成大写方法
module.exports.toUpper = function(str) {
  return str.toUpperCase()
}
</wxs>

// js

data: {
    count:0,
    username:'zs'
  },

14 定义外联的 wxs 脚本

 wxs 代码还可以编写在以.wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中
一样。示例代码如下：

function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower:toLower
}

15 使用外联的 wxs 脚本

<!-- 使用 外嵌的wxs脚本-->
<view>{{m2.toLower(country)}}</view>


<wxs src="../../utils/tools.wxs" module="m2"></wxs>