Summary—Some problems encountered in the development of WeChat mini programs

Recently I am doing small program exercises, and I would like to share the pitfalls I encountered

data data update

• It is impossible to directly assign a value to this.data Updating the data bound to the view will cause data inconsistency

• You need to use this.setData to update

this.data.key = value
this.setData({
  key: value
})

require

• Absolute paths are not supported for the time being

const util = require('../../utils/util.js')

background-image

• Static files cannot be used, only base64 and the network can be used Picture

• can be solved with

background: #fff url(data:image/jpeg;base64,***)
<image class="logo" src="/images/logo.png" mode="cover"></image>

Component style

• app.wxss The style cannot be applied to the interior of the component

• You can quote the import on demand: “”

@import "/app.wxss";

textarea

• The default style of textarea has a fixed width

Passing event parameters

• Events in the template cannot pass parameters

• Use event.currentTarget.dataset to get

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
  tapName(event) {
    console.log(event.currentTarget.dataset.hi)
  }
})

animation

• ##animation cannot be directly bound to the component

• Wrap a layer of

<view animation={{animation}}>
  <my-component></my-component>
</view>

checkBox

##checkbox-group bound bindChange event, When we click on the checkbox, the event will bubble up, causing the outer layer to be clicked as well.
The checkBox is wrapped with a layer of view, and a catch event is added to the view

• <checkbox-group bindchange="checkboxChange">
    <view bindtap="bindTap">
      <view catchtap=&#39;catchTap&#39;">
       <checkbox value="{{value}}" checked="{{checked}}"/>
      </view>
    </view>
  </checkbox-group>

  Related articles:
  Summary of problems encountered in the development of WeChat mini programs
  Summary of problems encountered in the development of WeChat mini programs

  Related videos:

  Video tutorial on developing WeChat mini programs

  The above is the detailed content of Summary—Some problems encountered in the development of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!