原生微信小程序遇到的一些坑和解决方案

input绑定

原生微信小程序的输入框绑定值不是双向的，也就是说，我们value绑的值是data中的，但是输入框输入的时候是无法修改data中对应的值的，所以我们需要绑定一个事件，在事件中修改data中对应的值。这里的事件使用输入时的触发事件bindinput，每次输入就会触发。

<input value="{{info.user}}" 
  data-key="info.user" 
  placeholder="请输入用户名"  
  bindinput="onInputChange">
</input>

  onInputChange(e){
    // 这里的key就是输入框绑定的data-key
    const {key} = e.currentTarget.dataset
    this.setData({
     [key]: e.detail.value
    })
  },

需要注意，我们在setData的时候，不能直接用表达式或取值的形式设置，如下：

this.setData({
  // info.user: e.detail.value, // 错误
  // info['user']: e.detail.value,  // 错误
  ['info.user']: e.detail.value, // 正确
})

父组件调用子组件内方法

在页面中定义子组件，给子组件添加id

<view class="container">
  <components id="com"></components>
</view>

通过this.selectComponent()函数获取组件dom，调用组件内函数

let dom = this.selectComponent("#FormCollection");
dom.getInit('传入参数')

子组件：

  methods: {
    getInit(val) {
      console.log('初始化',val); // 初始化传入参数
    },
  }

响应式赋值

微信小程序的setData不支持直接修改深层数组的某项，对于深层数组的修改需要直接对数组进行setData才能保持响应式。

// 修改数组中某项的数据并在页面更新
// 失败的赋值-深层数组的setData无效
this.setData({
  [formList[i][formList[i].fvEnNameToCamelCase]]: dictValue,
})

// 正确赋值-保持响应式
formList[i][formList[i].fvEnNameToCamelCase] = dictValue
this.setData({ formList})

多层for循环

微信小程序使用wx:for遍历，默认用item取遍历值。

<view wx:for="{{ List }}" wx:key="id">
   默认用item取值：{{item.label}}
</view>

如果是多层for循环嵌套，我们可以用wx:for-item自定义item名

<view wx:for="{{ List }}" wx:key="id">
  <view  wx:for="{{ List.children }}" wx:key="id" wx:for-item="info">
    {{ info.label }}
   </view>
 </view>

使用wx:for时，如果遍历的数据会动态改变，那么就需要搭配wx:key开让当前项保持自己的特征和状态，wx:key绑定的是一个字符串，该字符串为当前遍历数据中的唯一值。

<view  wx:for="{{ List }}" wx:key="id">
   默认用item取值：{{item.label}}
</view>

List: [
      {id: 1, label: '中国工艺美术史'},
      {id: 2, label: '艺术概论'},
      {id: 3, label: '世界现代设计史'}
    ]

阻止点击事件冒泡

catchtap函数阻止事件冒泡

<view class="one" bindtap="clickOne">
  <view class="two" catchtap="clickTwo">
     <view class="three" catchtap="clickThree"></view>
  </view>  
</view>

点击two只会触发clickTwo函数

输入框回车事件bindconfirm

<input value="{{inputVal}}" bindconfirm="search" />

vant上传图片自定义预览大小

preview-size="202rpx;height: 262rpx;"分别为上传后图片预览的大小，也就是下图中左侧的图片大小。
里面image标签是上传 + 按钮图标

  <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead"  deletable="{{ true }}" bind:delete="deleteImage"  accept="image" upload-icon="plus" preview-size="202rpx;height: 262rpx;">
    <view class="upload_btn">
      <image src="/assets/images/recordCenter/chooseImg.png" style="width: 202rpx;height: 262rpx;"></image>
    </view>
  </van-uploader>

vant组件overlay遮罩层无法滚动

官方默认关闭蒙层中的滚动效果，所以无论你怎么设置，嵌套蒙层内的元素都是无法滚动的。
解决方法：lock-scroll="{{false}}"

<van-overlay lock-scroll="{{false}}" show="{{ show }}">
    // ......其它内容
</van-overlay>

隐藏scroll-view滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent
}

get请求传数组

微信小程序get请求不能直接传数组，不然会报错

{ 
  fiReportStateList: ['1','2'], // 报错
  pageNum: 1,
  pageSize: 10
}

将数组转为逗号拼接即可

{ 
  fiReportStateList: ['1','2'].join(','),
  pageNum: 1,
  pageSize: 10
}