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

盛夏光年發表於2017-05-26
微信小程式

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
  }
})

相關文章