小程序 – 原生小程序快查

页面配置

全局页面配置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

onLoad 带有参数值,该参数值是用于其它页面通过导航跳转过来时传递的参数值
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     const prop = options.prop;
  },

onReady

onReady 是当页面渲染完成后的方法,通常可以在这里进行页面网络请求数据操作
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

onShow

onShow 是当页面发生展示时,就会被执行,这种展示是可以多次调用的,如页面发生隐藏后的显示,或者小程序被激活等
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

onHide

onHide 是当页页发生隐藏时就会被执行,比如小程序挂到后台就会触发
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

onUnload

onUnload 是指该页面发生锁毁时被执行,如页面被导航跳出时,页面被释放时会被执行,通常用于页面的清理工作
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

onPullDownRefresh

onPullDownRefresh 当小程序页面向下拉时,所展现的下拉刷新功能时被触发,这个方法需要页面开启下拉刷新功能才会被调用
  "window":{
    "enablePullDownRefresh": true
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

 

 

onReachBottom

onReachBottom 是页面上拉触底时执行的方法,这个方法需要页面中的ScrollView开启上拉触底功能才会被触发,不过默认开启
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

可以对上拉触底的阈值进行设置,默认距离为50px,滑动到距离底部50px时就会被触发

  "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>

 

如果您喜欢本站,点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

THE END
分享
二维码
打赏
海报
小程序 – 原生小程序快查
页面配置 全局页面配置page   局部页面配置   数据传递 在说明使用数据传递之前,我们需要知道,小程序的数据存储基本方式: 1.在每个页面的page({})函数中定义data属性,作为数据……
<<上一篇
下一篇>>