小程序学习记录六：小程序页面开发基础

比眉伴天荒 2021-09-07 06:19 534阅读 0赞

### 小程序页面开发基础 ###

*  一、页面导航
 *   *  一、声明式导航
     *   *  1.tabBar页面之间的跳转。
         *  2.非tabBar页面的跳转
         *  3.后退页面
     *  二、编程式导航
     *   *  1.跳转到taBar页面
         *  2.跳转到非taBar页面
         *  3.编程式后退
     *  三、声明式导航传参
     *  四、编程式导航传参
     *  五、获取导航传递的参数
 *  二、页面事件
 *   *  一、什么是下拉刷新事件
     *  二、启用下拉属性
     *  三、监听页面下拉刷新事件
     *  四、停止下拉刷新的效果
     *  五、监听上拉触底事件
     *  六、处理上拉触底事件
     *  七、配置上拉触底距离
 *  三、小程序的生命周期
 *   *  一、什么是生命周期
     *  二、生命周期的分类
     *  三、生命周期函数
     *  四、生命周期函数的分类
     *  五、应用（小程序）生命周期函数
     *  六、页面生命周期函数
 *  四、wxs脚本
 *   *  一、wxs和javascrip之间的关系
     *  二、内嵌wxs
     *  三、外联wxs文件
     *  四、wxs的特点

# 一、页面导航 #

浏览器中  
1.a链接的href属性跳转  
2.location.href属性跳转

小程序中  
1.声明式导航  
声明一个<navigator>导航组件,通过点击这个组件来跳转  
2.编程式导航  
1.调用小程序的API进行导航，实现页面的跳转。

## 一、声明式导航 ##

### 1.tabBar页面之间的跳转。 ###

<navigator url='/Pages/message/message' open-type='switchTab'>tabBar页面之间的跳转</navigator >

ulr属性表示要跳转的地址，必须以"/"开头  
open-type属性表示跳转的方式，必须为switchTab,不写这个属性就不能跳转。

### 2.非tabBar页面的跳转 ###

<navigator url='/Pages/message/info' open-type='navigate'>导航到其他页</navigator >

需要把open-type属性的值改为navigate,可以省略不写。

### 3.后退页面 ###

需要把open-type属性的值改为navigateBack,可以省略不写。  
要加一个delta属性，值必须是数字，表示要后退的层级,后退一个页面，可以省略这个属性。

## 二、编程式导航 ##

### 1.跳转到taBar页面 ###

wx.switchTab(Object Object)

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必选</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>是</td> 
   <td>需要跳转到tarBar页面的路径，路径后不能带参数</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数，调用成功、失败都会执行</td> 
  </tr> 
 </tbody> 
</table>

index.wxml

<button bindtap='gototabBar'> 跳转到tabBar <button>

index.js

gototabBar(){ 
         wx.switchTab({ 
               url:'/pages/message/message' //地址,不要带后缀名
    })
    
    }

### 2.跳转到非taBar页面 ###

wx.navigateTo()方法

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必选</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>是</td> 
   <td>需要跳转到tarBar页面的路径，路径后可以带参数（这是tabBar页面跳转的不同）</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数，调用成功、失败都会执行</td> 
  </tr> 
 </tbody> 
</table>

index.wxml

<button bindtap='gototabBar'> 跳转到tabBar <button>

index.js

gototabBar(){ 
         wx.navigateTo({ 
               url:'/pages/message/message' //地址,不要带后缀名
    })
    
    }

### 3.编程式后退 ###

wx.navigateBack()方法

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必选</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>delta</td> 
   <td>number</td> 
   <td>否</td> 
   <td>后退的页数，默认是1，可以不写，如果delta的值大于总页数，那么就会退回到首页。</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数，调用成功、失败都会执行</td> 
  </tr> 
 </tbody> 
</table>

index.wxml

<button bindtap='gototabBar'> 跳转到tabBar <button>

index.js

gototabBar(){ 
         wx.navigateBack()
     //这样就能后退一页
    }

## 三、声明式导航传参 ##

参数和路径之间用?链接，参数键和值使用=号相连。不同参数使用&&相连。

<navigator url='/Pages/message/message?name=zs&age=18' open-type='switchTab'>tabBar页面之间的跳转</navigator >

## 四、编程式导航传参 ##

直接拼写在路径中即可  
index.wxml

<button bindtap='gototabBar'> 跳转到tabBar <button>

index.js

gototabBar(){ 
         wx.navigateTo({ 
               url:'/pages/message/message?name=zs&age=18' //地址,不要带后缀名
    })
    
    }

## 五、获取导航传递的参数 ##

通过声明式和导航式传递过来的参数，都可以直接在onLoad事件中直接获取到，

onload:function(options){ 
         console.log(options)
    //options就是导航传递过来的参数。
    }

一般都把接收的参数放到data中，给其他方法使用。

# 二、页面事件 #

## 一、什么是下拉刷新事件 ##

下拉刷新是移动端的专有名称，一般都是来重新加载数据的操作。

## 二、启用下拉属性 ##

1.全局开启  
在app.json里的window节点里，将enablePullDownRefresh设置为true  
2.局部页面开启  
在页面的.json文件里，将enablePullDownRefresh设置为true，推荐这个

## 三、监听页面下拉刷新事件 ##

在页面的js文件中，onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。

onPullDownRefresh(){ 
    //可以在这里写下拉刷新后，会进行的一些操作。
     console.log('下拉刷新了')
    }

## 四、停止下拉刷新的效果 ##

因为下拉属性不会自动关闭，所以需要手动关闭

onPullDownRefresh(){ 
    //可以在这里写下拉刷新后，会进行的一些操作。
     console.log('下拉刷新了')
     //下拉刷新结束方法
     wx.stopPullDownRefresh()
    }

这个方法可以结束下拉刷新的效果，在下拉刷新的逻辑结束之后关闭下拉刷新。

## 五、监听上拉触底事件 ##

上拉触底事件一般用来进行分页处理，即继续获取数据。  
在onReachBotom()函数里可以监听上拉触底事件，来进行操作/

onReachBotom：function(){ 
     console.log('触发了下拉触底事件')
    }

## 六、处理上拉触底事件 ##

在上拉触底事件时，一般都会发送请求，为了在请求还没回来时，又上拉触底了。又会发送请求，所以需要做节流操作。  
在等上一次请求回来后，才能再进行发送请求。

## 七、配置上拉触底距离 ##

默认是50px，即滚动条距离底部50px时，就会触发上拉触底请求，在app.json里和当前页的json可以配置，onReachBottomDistance属性配置

# 三、小程序的生命周期 #

## 一、什么是生命周期 ##

即一个对象从创建-运行-销毁的整个阶段，强调的是一个时间段。

## 二、生命周期的分类 ##

**1.应用生命周期**  
即小程序的生命周期，从启动-运行-销毁，应用生命周期包含了页面生命周期。

**2.页面生命周期**  
即小程序中，每个页面的生命周期，加载-渲染-销毁的过程。

## 三、生命周期函数 ##

小程序内置的函数，会伴随着生命周期，按次序执行。  
生命周期表示的是一个时间端，而生命周期函数表示的是一个时间点，

## 四、生命周期函数的分类 ##

1.应用的生命周期函数  
即小程序从启动-运行-销毁期间依次调用的那些函数  
2.页面的生命周期函数  
即小程序页面从加载-渲染-销毁期间依次调用的那些函数。

## 五、应用（小程序）生命周期函数 ##

在app.js文件中配置

APP({ 
    
     onLaunch(){ 
     //小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
    }
    
    
    onshow(){ 
    //小程序启动，或从后台进入前台显示时触发
    }
    
    onHide(){ 
    //小程序从前台进入后台触发
    }
    })

## 六、页面生命周期函数 ##

在页面的.js文件中使用

Page({ 
      // 生命周期函数--监听页面加载,可以获取初始数据，一个页面只会调用一次（频繁使用）
      onLoad: function (options) { 
    
      },
      //生命周期函数--监听页面显示
     onShow: function () { 
    
      },
    //生命周期函数--监听页面初次渲染完成，一个页面只会调用一次。在页面渲染完成之后吗，才能修改页面里的内容（频繁使用）
      onReady: function () { 
     //可以在这修改页面标题
      },
    //生命周期函数--监听页面隐藏
     onHide: function () { 
    
      },
    //生命周期函数--监听页面卸载，一个页面只会调用一次（频繁使用）
     onUnload: function () { 
    
      },
    
    
    })

# 四、wxs脚本 #

wxs(weixin script),是小程序独有的一套脚本语言，结合wxml,可以构出页面结构。  
在wxml中无法调用.js文件中定义的函数，但是，wxml可以调用wxs定义的函数，因此，wxs的典型应用场景就是’过滤器’

## 一、wxs和javascrip之间的关系 ##

**1.wxs有自己的数据类型**  
有8个

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>数字</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串类型</td> 
  </tr> 
  <tr> 
   <td>boolean</td> 
   <td>布尔类型</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>对象类型</td> 
  </tr> 
  <tr> 
   <td>function</td> 
   <td>函数类型</td> 
  </tr> 
  <tr> 
   <td>array</td> 
   <td>数组类型</td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>日期类型</td> 
  </tr> 
  <tr> 
   <td>regexp</td> 
   <td>正则类型</td> 
  </tr> 
 </tbody> 
</table>

**2.wxs不支持类似于es6及以上的语法形式**  
不支持：let ,const ,解构赋值，展开运算符，箭头函数，对象属性简写…等等  
支持：var 普通function，等类似于es5的语法

**3.wxs遵循commonjs规范**  
module对象  
require()引入其他模块  
module.exports导出模块对象/

## 二、内嵌wxs ##

可以编写在wxml的wxs标签内，且标签必须指定module属性，用来指定当前wxs模块名称

<view>{ { m1.toUpper(msg)}}</view>//
    //定义m1模块
    <wxs module="m1">
    
    //导出这个模块
    module.exports.toUpper = function(a){ 
           return a + ',世界'
    }
    </wxs>

index.js

/**. * 页面的初始数据 */.
       Page({ 
      data: { 
              msg:'你好',
      
      },
      })

## 三、外联wxs文件 ##

一定要编写在.wxs文件内  
demo.wxs文件

module.exports.toUpper = function(a){ 
           return a + ',世界'
    }

引入  
wxml文件中  
src是引入的路径，必须是相对路径  
module指定模块的名称，这样就能通过这个名称来调用对应的方法

<view>{ { m2.toUpper(msg)}}</view>//和上面使用类似
    <wxs src='../../utils/demo.wax'  module='m2'> </wxs>

## 四、wxs的特点 ##

1.和js类似，但不是同一种  
2.wxs的方法不能作为组件的事件回调，即把wxs方法作为点击事件触发的函数，wxs方法一般都是过滤器，来对数据进行一层包装的。  
3.wxs的代码和js的文件是隔离的，wxs不能调用js里的方法，也不能调用小程序提供的API  
5.wxs的性能好，在ios上，小程序的wxs代码会比js代码块2-20倍，而在安卓上，几乎无差。