小程序 – 原生小程序快查

页面配置

全局页面配置page

局部页面配置

数据传递

在说明使用数据传递之前，我们需要知道，小程序的数据存储基本方式：

1.在每个页面的page({})函数中定义data属性，作为数据存储的地方。

Page({
  data: {
    name: "TZMing",
    age: 18
  }
})

设置数据

微信提供了一种set方法对数据进行设置

     // 设置data中的数据
      this.setData({
        name: "unsoft"
      });

获取数据

小程序中获取数据，不需要直接使用get方法（也没有这个方法）而是直接使用 this.data 来获取数据

    // 获取data中的数据
    const name = this.data.name;
    const age = this.data.age;
    console.log("name:" + name + ", age: " + age);

方法传递数据

在小程序按钮调用方法时，需要把一些数据传到方法中去时，使用 data-xx 和 event 来接收数据，而不是使用 method(xx) 来传数据

如以下的安钮，声明了点击方法：

  <view>
    <!-- 声明事件可以使用 bind:tap 也可以使用 bindTap -->
    <button bind:tap="tap" data-name="TZMing">button</button>
  </view>

但当我们需要把数据“TZMing” 传递到方法中时，需要使用 data-xxx 来定义形参名

可以在 event 的 target.dataset 中找到传过来的数据参数名

  tap(event){
    // 需要通过 event 事件对象获取到传进来的数据
    const name = event.target.dataset.name;
    this.setData({
      name: name
    })
  },

条件渲染

wx:if

对页面中的元素进行判断渲染，为true 时渲染，为false时不渲染

  <view wx:if="{{ true }}"> 我是会显示的元素 View </view>
  <view wx:elif="{{ true }}">  当上一级元素为false时，再判断 </view>

  <view wx:if="{{ false }}"> 我是不会显示的元素 View </view>
  <view wx:else >  当上一级元素为false时，再判断 </view>

hidden

当 hidden 为 true 时，则对元素进行隐藏不可以见，当为 false时，则显示元素

  <view hidden="{{true}}" > 这个元素不会被显示 </view>
  <view hidden="{{false}}" > 这个元素会被显示 </view>

与 wx:if 的区别：

hidden 只是使元素进行 display:none 样式设置，但元素本身还是存在的

而wx:if 则是直接在wxml中删除元素

wx:for

作为数据循环渲染的方法，带有变量 item 和 index

item 变量则是对这个数组循环时的单个成员数据

index 变量则是表示当前的循环索引

  <view wx:for="{{list}}">
    <block>{{item.name}}</block>
    <block>{{index}}</block>
  </view>

注意：block 是一个不会被渲染的元素标签，和Vue中的<template> 标签类似

数据请求

wx.request

小程序提供了请求Api方法，在小程序中不能使用第三方的请求插件，如Axios这些是使用XHR实现的，而小程序没有XHR概念。

wx.request 的详细参考可以在以下网址：

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

主要使用的参数如下：

    wx.request({
      url: 'url',
      method: "GET",
      data: {},
      header: {},
      seccess: res => {},
      fail: err => {},
      complete: () => {}
    })

url : 要请求的URL全地址

method: 请求的方式

data: 使用POST请求时要传递的数据

header: 请求头数据

seccess: 当请求成功时，调用的函数方法，提供res参数为响应数据

fail: 当请求失败时，调用的函数方法，提供了err参数为错误信息

complete: 不管成功与否，都会执行的函数方法

Promise 化

wx.request 的 Promise 化

小程序的 wx.request 接口是没有做Promise化的，这对于开发中而言，若需要请求多个接口时，可能会出现回调地狱的情况

我们可以使用Promise对wx.request进行异步处理化，这样可以方便地在开发中实现异步请求。

req() {
    return new Promise((reslove, rejeck) => {
      wx.request({
        url: 'url',
        method: "GET",
        data: {},
        header: {},
        seccess: res => {
          reslove(res);
        },
        fail: err => {
          rejeck(err);
        },
        complete: () => {
          // 自定义处理完成请求后的清理工作
        }
      })
    });
  },

生命周期

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     const prop = options.prop;
  },

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

  },

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

  },

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

  },

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

  },

  "window":{
    "enablePullDownRefresh": true
  },

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

  },

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

  },

  "window":{
    "onReachBottomDistance": 50
  },

组件生命周期

组件与页面最大的区别在于，组件的方法触发应放在 methods 选项属性中，而页面只需把方法直接定义在Page({}) 中即可。

Component({
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

而组件的生命周期将定义存放在 lifetimes 选项属性中。

Component({
  /**
   * 组件的生命周期
   */
  lifetimes: {
    created(){},
    attached(){},
    ready(){},
    moved(){},
    detached(){},
    error(err){}
  }
})

注意：

1.created() 时期为页面开始创建时期，不能使用 setData 方法对数据进行操作

2.attached() 时期为页面已完成创建并在节点树中，可以在这个生命周期中进行setData操作。

下拉刷新与上拉加载

下拉刷新

下拉刷新需要页面开启下拉刷新功能

  "window":{
    "enablePullDownRefresh": true,
  },

详细的下拉刷新操作可以查看以下网址：

https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.stopPullDownRefresh.html

可以通过调用 wx.startPullDownRefresh 方法使页面进行下拉刷新动作，与用户手动下拉是一样效果

可以通过调用 wx.stopPullDownRefresh 方法关闭下拉刷新动作，这个需要开发者请求完数据后代码关闭。否则下拉加载中的样式会一直显示。

上拉加载

上拉加载使用的是 生命周期方法 onReachBottom 进行控制，当触发上拉加载时，我们可以请求新的数据到页面中：

举例

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(option) {
    // 增加页数
    this.setData({
      page: this.data.page + 1
    })
    // 向服务器请求新的数据
    wx.request({
      url: 'url',
      method: "POST",
      data: {
        page: this.data.page
      },
      success: (res) => {
        // 合并新旧数据
        this.setData({
          list: [...this.data.list, ...res.data.data]
        })
      }
    })
  },

页面路由跳转

声明式导航

跳转到Tabbar页

我们可以在wxml中声明元素中带有跳转意图的标签，使得点击该标签时，跳转到Tabbar页

<view>
  <navigator open-type="switchTab" url="/pages/index/index"></navigator>
</view>

注意：

1.如果跳转的是Tabbar页面时，我们需要在navigator标签中加入 open-type 属性值为 switchTab 才可以，否则默认会以非 Tabbar 页的方式进行导行跳转。

2.url 中的地址一定要以 "/" 开头

跳转到非Tabbar页

对于跳转到非Tabbar页时，会进行Push页面，这时可以使用以下方式：

<view>
  <navigator open-type="navigate" url="/pages/index/index"></navigator>
</view>

注意：

1.open-type 默认就是 navigate 所以可以不写。

2.url 中的地址一定要以 "/" 开头

返回上一级

针对非Tabbar页面的返回上一页功能，可以使用以下方式进行跳转

<view>
  <navigator open-type="navigateBack"></navigator>
</view>

编程式导航

跳转到Tabbar页

要在代码中控制页面进行跳转，我们可以使用API wx.switchTab 进行实现

    wx.switchTab({
      url: '/pages/index/index',
      success:()=>{},
      fail:()=>{},
      complete:()=>{}
    })

跳转到非Tabbar页

要在代码中控制页面进行跳转非Tabbar页，我们可以使用API wx.navigateTo 进行实现

    wx.navigateTo({
      url: '/pages/index/index',
      success:()=>{},
      fail:()=>{},
      complete:()=>{}
    })

返回上一级

要在代码中控制页面进行返回上一页，我们可以使用API wx.navigateBack 进行实现

    wx.navigateBack({
      delta: 1,
      success:()=>{},
      fail:()=>{},
      complete:()=>{}
    })

delta 可以指定返回多少级的页面，默认为返回一页

导航传参

在页面与页面之间的跳转时，我们有时候需要对页面跳转时把某些数据传给下一个页面中，这时我们就可以使用页面传参的方式进行

具体格式如下：

1. 以 ? 分割 url 和参数
2. 以 = 连接参数的 key 和 value
3. 以 & 来拼接参数

声明式导航传参

举例子：

<view>
  <navigator open-type="navigate" url="/pages/index/index?name={{name}}&age={{age}}"></navigator>
</view>

编程式导航传参

举例子：

    wx.navigateTo({
        url: `/pages/detail/detail?index=${index}&title=${title}`,
    })

数据监听器

当组件或页面中的数据发生变化时，我们要如何对这些数据的变化进行监听呢，就需要使用监听器了。

小程序提供一种数据监听器，可以对指定数据进行监听

Component({

  /**
   * 组件的初始数据
   */
  data: {
    prop: 1
  },

  /**
   * 数据监听器
   */
  observers: {
    prop: function(val){
      // key 为要监听的 data 中的变量名
      // value 则是当这个变量值发生变化时的调用方法
    }
  }
})

组件间通讯

父子关系

父向子传参

父向子传参相对比较简单，小程序中，子组件提供了一个可以用来接收参数的选项属性 properties

Component({

  /**
   * 组件的属性列表
   */
  properties: {
     prop: String
  },

})

在父组件中要向子组件传递参数只需要在标签上加上传递的值即可。

<child prop= "{{ data }}"></child>

子向父传参

子向父传参使用的是事件方法传递，类似Vue的 Emit 方法传递，其语法如下：

子组件中定义方法传递：通过 triggerEvent 方法发送一个通知，通知父组件接收数据

  methods: {
    met(){
      this.triggerEvent("change",{
        parentProp: this.data.prop
      })
    }
  },

而在父组件中，则定义 bind:xxx 进行事件的接收操作

<child bind:change="onChange"></child>

父组件中接收的 bind:xx 中的名字需要和子组件中定义的名字change一致。

onChange 方法中则可以接收到来自子组件往change中传递的数据

兄弟关系

在小程序中，兄弟关系=没有关系，因为兄弟元素之间并不会有直接的联系，

如果要让这些兄弟元素之间进行通讯，则需要创建一个共同的父元素，通过父元素中间中转数据

即：兄弟A->父元素->兄弟B

组件插槽

单个插槽

单个插槽又叫默认插槽，若我们的组件中只需要放置一个插槽时，我们可以使用默认插槽，

小程序中默认提供单个插槽的功能，插槽的占位符使用如下表示：

<slot></slot>

多个插槽

多个插槽又叫具名插槽，当组件中需要使用的插槽个数大于1时，如时使用默认插槽的话，我们无法区分多个插槽中什么插槽数据放在什么占位地方，因此我们可以为插槽定义名称，我们可以通过名称来定义占位的插槽位置。

注意：小程序中默认关闭了多个插槽的功能，若要使用多个插槽，我们需要在小程序中声明开启多个插槽的功能，具体开启功能如下：

Page({

  /**
   * 页面的配置项
   */
  options: {
    multipleSlots: true  // 开启多个插槽功能
  },

})

在组件中定义不同的插槽名称

<view>
  <slot name="header"></slot>
  组件内容
  <slot name="footer"></slot>
</view>

而在父组件中，使用多个插槽中时，只需要加入slot属性即可。

  <view slot="header">
    这是头部插槽数据
  </view>

  <view slot="footer">
    这是尾部插槽数据
  </view>