小程序常用

一、子组件传参给父组件

子组件：

let pages = getCurrentPages();  // 当前页的数据
let prevPage = pages[pages.length - 2];  // 上一页的数据
/** prevPageValue 是上一页你想被携带过去的数据 */
prevPage.setData({
  idstaff: e.currentTarget.dataset.id
})
//跳转页面
wx.navigateBack({
  delta: -1
})

父组件：

  onShow() {
   
    // 判断是否有_id数据，有数据再走这里，否则一打开就触发会报错
    if(this.data.idstaff){
      // 获取服务人员的数据
      wx.cloud.database().collection('yuyue-user').doc(this.data.idstaff).get()
      .then(result=>{
        console.log('获取到了服务人员',result)
        console.log(this.data.idstaff)
        // 给服务人员列表赋值
        this.setData({
          staff:result.data
        })
      })
    }
  }

二、首页点击大类跳转到tabbar分类页面

由于swichTab不支持带参数，所以使用全局变量。

1.app.js中设置index变量：

globalData: {
    // 大类跳转的index
    index:-1
  }

2.tabbar首页

设置点击跳转事件，将请求数据的索引传过去：

<navigator class="icon-item" wx:for="{{servceList}}" wx:key="index" 
bindtap="switchTo" data-index="{{item.index}}">
    <text>{{item.servceList}}</text>
    <text>{{item.english}}</text>   
</navigator>

js中获取到index参数：

// 点击大类跳转到tab预约列表
  switchTo(e){
    console.log('index='+e.currentTarget.dataset.index)
    // 将得出的index值赋值给全局变量
    app.globalData.index = e.currentTarget.dataset.index
    //跳转到分页列表
    wx.switchTab({
      url: '/pages/message/message'
    })
  }

3.tabbar分页列表

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 获取到全局变量的index
    const index = app.globalData.index
    console.log('获取到首页传来的参数',index)
    // 判断是否是从首页点击大类跳转过来的
    if(app.globalData.index != -1){
      //证明是从首页点击大类跳转过来的
      //每次重新给全局变量index赋值
      app.globalData.index = -1
      //currentIndex控制页面的切换
      this.setData({
        currentIndex : index
      })
    }
  }

三、骨架屏的使用

1.微信开发者工具右下角三个点点击生成骨架屏。

2.在 project.config.json 增加字段 skeletonConfig 进行骨架屏相关配置，页面配置会覆盖掉全局配置。

"skeletonConfig": {
    "global": {
      "loading": "",
      "text": {
        "color": "#EEEEEE"
      },
      "image": {
        "shape": "",
        "color": "#EFEFEF",
        "shapeOpposite": []
      },
      "button": {
        "color": "#EFEFEF",
        "excludes": []
      },
      "pseudo": {
        "color": "#EFEFEF",
        "shape": "circle",
        "shapeOpposite": []
      },
      "excludes": [],
      "remove": [],
      "empty": [],
      "hide": [],
      "grayBlock": [],
      "showNative": false,
      "backgroundColor": "transparent",
      "mode": "fullscreen",
      "templateName": "skeleton",
      "cssUnit": "rpx",
      "decimal": 4
    },
    "pages": {
      "pages/index/index": {}
    }
  }

3.在xxx.wxss中引入:

@import "./xxx.skeleton.wxss";

4.在xxx.wxml中加入代码:

<import src="list.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

5.把xxx.wxml原有代码包裹在<block>中

<block wx:else>
    原有页面代码
</block>

6.在xxx.js中控制loading

Page({
  data: {
      loading: true
  },
  onReady(){
    setTimeout(()=>{
      this.setData({
        loading: false
      })
    },1000)
  }
}