微信小程序踩坑总结

app.js

app.js文件类似于Vue中的VueX，React中的Redux。

在app.js中的APP中声明数据类型，即可在任意页面中全局调用。

声明：

调用：xxx.js

// pages/feedback/feedback.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
       console.log(getApp().KK)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
       console.log(getApp().KK)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      console.log(getApp().KK)
  },

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

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

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

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

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

1、z-index

这里注意，z-index必须是双方组件都有position熟悉下才会生效。如果你上级，注意不是父级，很多文档在这块都误导人，说成父级，注意，你想在上层，那么就需要两个组件都需要有position属性。这样才能生效。而我早上为什么不生效也是因为这个原因。

当层级复杂的时候建议两个div都增加position属性，像上述情况其实通常来说一个position：absolute|fixed就可以了。

z-index生效原则，只对相同有position属性的组件生效，不对staic和relative生效。单独的position

2、margin

父元素需要加Overflow-hidden

3、阻止冒泡

点击子元素时，不触发父元素的方法事件。

catchtap

阻止冒泡事件的发生，其实很简单，直接把bindtap改为catchtap即可。

4、事件循环,data-数据绑定

原因：因为微信小程序中不能直接使用函数传参，就是用data-来绑定一个属性，进行传参

      <view class="input-Search-Region">
        <view class="input-Search-item" catchtap="SearchItemHandler" wx:for="{{userSearchList}}" data-name="{{item.name}}" wx:for-item="item" wx:key="id" >
          {{item.name}}
        </view>
      </view>

5、view和block标签的区别

<view> 是一个组件，会在页面上做渲染；不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个使用的例子：

6、Vue指令

  // 自定义指令  点击空白隐藏
  directives: {
    blankHidden: {
      bind(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        function KeyUp(e) {
          if (e.keyCode == 27) {
            // 指绑定的字符串形式
            if (binding.expression) {
              binding.value(e);
            }
          }
        }
        el.vueblankHidden = documentHandler;
        el.vueKeyup = KeyUp;
        // 给document增加一个click事件监听
        document.addEventListener('keyup', KeyUp);
        document.addEventListener('click', documentHandler);
      },
      unbind(el, binding) {
        document.removeEventListener('click', el.vueblankHidden);
        delete el.vueblankHidden;

        document.removeEventListener('keyup', el.vueKeyup);
        delete el.vueKeyup;
      },
    },
  },

7、wx.showLoading(） wx.hideLoading();

以上俩需要搭配使用。

8、max-content

width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。

​ 如果出现文本，则相当于文本不换行。

9、wx.hideHomeButton()隐藏顶部导航栏的“小房子"

10、style 动态控制样式

      <view class="table-row-item" wx:for="{{columns}}" wx:key='j' wx:for-item="rowData" style="width:{{rowData.width}}">
        {{itemRow[rowData.key]}}
      </view>

11、小程序环境判断

const accountInfo = wx.getAccountInfoSync();
// miniProgram.envVersion的合法值：develop开发版、trial体验版、release正式版
const env = accountInfo.miniProgram.envVersion;

12、小程序页面返回刷新

返回上一个页面执行的钩子函数。

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { 
    this.getCapitaList();
  },

13、小程序操纵Dom

ID选择器，类选择器不行。

<navigation-Top title="{{'债券投顾平台'}}"  isNavigation="{{true}}" textStyle="{{'28rpx'}}" id="navigation"></navigation-Top>

//父组件调用
this.selectComponent("#navigation").getList();

14、子组件调用父组件方法（父子通讯）

//子组件
this.triggerEvent("parentComponentFunction");

//父组件
<table tableData="{{userDataList}}" columns="{{columns1}}" titlePotion="{{tableTitlePosition}}" bind:parentComponentScroll="tableScrollHandler"></table>

//父组件
tableScrollHandler(e){
  let boost = this;
  if(this.data.pageSize/10===e.detail){
    boost.data.pageSize+=20;
    boost.getUserList();
    if(this.data.pageSize>this.data.userDataListTotal+1){
      wx.showToast({
        title: '已经到底了',
      })
    }
  }
},

15、table组件tbody记得给高度

.table-body {
  display: flex;
  width: max-content;
  overflow-y: auto;
  height: 800rpx;
  flex-direction: column;
}

16、math方法

Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；

Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；

Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；

17、获取小程序系统宽高

 wx.getSystemInfoSync().windowWidth
获取各种高度：
wx.getSystemInfoSync().windowWidth   // 获取当前窗口的宽度
wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
wx.getSystemInfoSync().model    // 获取当前采用的设备
wx.getSystemInfoSync().pixelRatio   
wx.getSystemInfoSync().language   // 获取当前所采用的的语言

18、解决横屏问题适配问题

小程序在横屏时的宽高换算和竖屏不同，横屏占位会大于竖屏。

  margin-top: calc(40vmin / 7.5);

/*这样来看vmax，vmin也是百分比单位，这里我们使用vmin就能锁定屏幕的短边了！
只要把rpx换算成vmin就能完美解决字体变大的问题！*/

19、判断环境变量

wx.getAccountInfoSync().miniProgram.envVersion

20、微信客服消息推送功能

微信客服

在页面使用客服消息

绑定客服

小程序后台->开发->开发设置->消息推送(启用)