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

小程序还是多年前用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%;
    }
  }
相关推荐
张晓~1833994812139 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero3 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠4 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu14 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域21 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54581 天前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序