原生微信小程序开发踩坑记录

小程序还是多年前用taro开发的，原生开发还是第一次

1、父组件调用子组件的里的方法

父组件

javascript 复制代码

this.selectAllComponents('#goldItem'+data.pId)[0].handleClear()

html 复制代码

<gold-item id="{{'goldItem'+item.id}}" wx:for="{{list}}" wx:key="index" item="{{item}}" bind:onDel="handleDel" bind:onEdit="handleEdit" bind:onAdd="handleAdd" bind:onExclude="handleExclude"></gold-item>

子组件

javascript 复制代码

methods: {
    handleClear() {
      this.setData({
        activeId: ''
      })
    }
}

2、component获取url里的参数

page的onLoad里才能获取，component的生命周期里没法直接获取，所以需要再包一层page来获取跳转url里的参数

3、wxs里正则有不一样的使用方法，注意使用getRegExp，以及不要开头结尾的//；同时es6没法使用，也可能是我没配置

javascript 复制代码

var formatNumber = function (num) {
    if (num == 0) return '0.00';
    var arr = num.toString().split('.');
    var integerPart = arr[0];
    var decimalPart = arr[1];
    var reg = getRegExp('\B(?=(\d{3})+(?!\d))', 'g')
    var formatted = integerPart.replace(reg, ',')
    return decimalPart ? (formatted + '.' + decimalPart) : formatted+'.00'
}

4、wxs公共方法的使用

tool.wxs文件定义

javascript 复制代码

var formatNumber = function (num) {
    if (num == 0) return '0.00';
    var arr = num.toString().split('.');
    var integerPart = arr[0];
    var decimalPart = arr[1];
    var reg = getRegExp('\B(?=(\d{3})+(?!\d))', 'g')
    var formatted = integerPart.replace(reg, ',')
    return decimalPart ? (formatted + '.' + decimalPart) : formatted+'.00'
}
var to2 = function(num){
  return Number(num).toFixed(2)
}
module.exports.formatNumber= formatNumber
module.exports.to2= to2

.wxml文件使用

html 复制代码

<wxs src='../../utils/tool.wxs' module="fn"></wxs>
<view class="desc">总资产 {{fn.formatNumber(totalAssets)}}</view>

5、左滑删除动效

.wxml结构，主要是一个宽的的设置，movable-area 和 movable-view 都要设置宽度

html 复制代码

<movable-area wx:for="{{item.list}}" wx:for-item="subItem" wx:key="subIndex" class="m-area">
      <movable-view data-item="{{subItem}}" data-index="{{subIndex}}" direction="horizontal" animation="true" scale="false" damping="100" x="{{activeId==subItem.id? -100:0}}" y="{{0}}" out-of-bounds="true" bind:touchstart="touchstart" bind:touchend="touchend" class="wrap">
        <view class="flex-row wrap" style="border-bottom: 1px solid #E5E7EB;box-sizing: border-box;">
          <view class="name-value flex-row-between">
            <view class="name flex-row-start">
              <view class="icon flex-row-center">
                <image class="img" src="{{fn.img(item.id==2?'yhk': subItem.icon)}}"></image>
              </view>
              <text>{{subItem.name}}</text>
            </view>
            <view class="value">
              <view class="label" wx:if="{{subItem.exclude}}">
                <text>不计入</text>
              </view>
              <text>{{fn1.formatNumber(subItem.value)}}</text>
            </view>
          </view>
          <view class="operate flex-row">
            <view class="edit flex-row-center" data-item="{{item}}" data-subItem="{{subItem}}" catch:tap="handleEdit">编辑</view>
            <view wx:if="{{subItem.type==2}}" class="del flex-row-center " data-item="{{item}}" data-subItem="{{subItem}}" catch:tap="handleDel">删除</view>
            <view wx:else class="exclude flex-row-center " data-item="{{item}}" data-subItem="{{subItem}}" catch:tap="handleExclude">{{subItem.exclude? '计入': '不计入'}}</view>
          </view>
        </view>
      </movable-view>
    </movable-area>

css 复制代码

.m-area {
    width: calc(100vw - 60px);
    height: 60px;
    overflow: hidden;
  }

  .wrap {
    width: calc(100vw + 40px);
    height: 100%;
  }

.name-value {
    height: 100%;
    width: calc(100vw - 60px);
    font-size: 16px;
    font-weight: normal;
    line-height: 21px;
    letter-spacing: normal;
    color: #000000;
    flex-shrink: 0;
    // border-bottom: 1px solid #E5E7EB;

    .icon {
      width: 28px;
      height: 28px;
      background: rgba(128, 128, 128, 0.1);
      border-radius: 50%;
      margin-right: 5px;
      overflow: hidden;

      .img {
        width: 60%;
        height: 60%;
      }
    }

    .name {}

    .value {
      .label {
        font-size: 12px;
        padding: 2px 8px;
        background: #F3EFFF;
        border-radius: 10px;
        margin-right: 8px;
        transform: scale(0.7);
        display: inline-block;
        color: #8E6FF7;
      }
    }
  }

  .operate {
    width: 100px;
    height: 100%;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;

    .edit {
      width: 50%;
      height: 100%;
      background: rgba(255, 215, 0, 0.2);
      color: rgb(255, 215, 0);
    }

    .del {
      width: 50%;
      height: 100%;
      background: rgba(240, 115, 115, 0.2);
      color: rgb(245, 26, 26);
    }

    .exclude {
      width: 50%;
      height: 100%;
      background: #F3EFFF;
      color: #8E6FF7;
    }

    .del2 {
      width: 100%;
    }
  }