微信小程序開發中遇到的問題及解決方式

app.json

• 不可添加數據 微信小程序中的每個頁面的【路徑+頁面名】都須要寫在 app.json 的 pages 中，且 pages
  中的第一個頁面是小程序的首頁。（多頁面的時候，經過更改這個順序進行調試）

wx:for

• 在組件上使用wx:for控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。
  默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<text>

行內元素。直接設置margin值無效，須要同時規定display:block

數據綁定以後的動態修改

在data中指定{{某數據}}的綁定對象後，並不能讓這個綁定的數據隨着綁上去的變量更改而更改。須要在出發數據修改的事件中，增長dataSet，才能修改這個綁定的數據。

<!-- This is our View -->
<view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
  // sent data change to view
  this.setData({
  name: 'MINA'
  })
  }
})

表單提交及數據獲取

在表單中綁定提交事件bindsubmit，在button中設置form-type爲submit。經過e.detail.value.textarea便可獲取輸入的內容。
注意：wxml中，textarea的name值必須是textarea，不能更改，不然沒法獲取數據，也不會報錯。

<!--textarea.wxml-->
<form bindsubmit="bindFormSubmit">
  <textarea placeholder="form 中的 textarea" name="textarea"/>
  <button form-type="submit"> 提交 </button>
</form>

//textarea.js
  bindFormSubmit: function(e) {
     console.log(e.detail.value.textarea)
  }

overflow:hidden

父層要設置position:relative，這個overflow的設置纔會對設置了position:absolute的子層有效

動態修改CSS樣式

將數據綁定在style參數中，能夠經過data來控制參數。

<!--wxml-->
<view class="block p3" style="left:{{p3left}}rpx; top:{{p3top}}rpx; transform:scale({{scale}})">

//.js
Page({
  //初始化數據
  data:{
    p3left:600,
    p3top:10,
    scale:0.8
  }
})