小程式實踐小坑小結（一）

黃思思發表於2018-08-02

最近自己在做小程式練習，分享一下我遇到的小坑

data資料更新

  • 直接對this.data進行賦值，是無法更新檢視繫結的資料的，會造成資料不一致
  • 需要使用this.setData更新
this.data.key = value
this.setData({
  key: value
})

require

  • 暫時不支援絕對路徑
const util = require(`../../utils/util.js`)

background-image

  • 不能使用靜態檔案，只能使用base64和網路圖片
  • 可以用<img>解決
background: #fff url(data:image/jpeg;base64,***)
<image class="logo" src="/images/logo.png" mode="cover"></image>

元件樣式

  • app.wxss 的樣式不能應用到元件內部
  • 可以按需引用 import: “”
@import "/app.wxss";

textarea

  • textarea預設樣式有固定寬度

事件傳參

  • 模板裡面事件不能傳參
  • 使用event.currentTarget.dataset獲取
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

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

animation

  • animation不能直接繫結中元件上
  • 外面包裹一層<view>
<view animation={{animation}}>
  <my-component></my-component>
</view>

checkBox

  • checkbox-group繫結的bindChange事件,我們中點選checkbox事件會向上冒泡，導致外層也被點選
  • checkBox外面包一層view，給view新增一個catch事件
<checkbox-group bindchange="checkboxChange">
  <view bindtap="bindTap">
    <view catchtap=`catchTap`">
     <checkbox value="{{value}}" checked="{{checked}}"/>
    </view>
  </view>
</checkbox-group>

相關文章