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