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

小程序还是多年前用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%;
    }
  }
相关推荐
qingyingWin11 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
shadouqi1 小时前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
韩召华1 小时前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
前端Hardy3 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
2501_9159090610 小时前
iOS电池寿命与App能耗监测实战 构建完整性能监控系统
android·ios·小程序·https·uni-app·iphone·webview
一只开心鸭!10 小时前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序
weixin_lynhgworld11 小时前
旧物回收小程序:科技赋能,让旧物回收焕发生机
科技·小程序
此心光明事上练15 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me1 天前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
gongzemin1 天前
微信第三方平台的配置
微信·微信小程序·资讯