数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
wxss 样式
WXSS
具有 CSS
大部分特性,与 CSS
相比,WXSS
扩展的特性有:
- 尺寸单位
- 样式导入
尺寸单位
rpx
: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
。如在 iPhone6
上,屏幕宽度为375px
,共有750个物理像素,则750rpx = 375px = 750
物理像素,1rpx = 0.5px = 1
物理像素。1px = 2rpx
建议: 开发微信小程序时设计师可以用iPhone6
作为视觉稿的标准。
样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束
/** common.wxss **/
.small-p {
padding:20rpx;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15rpx;
}
内联样式
<view style="color:{{color}};" /> //style 接收动态的样式
<view class="normal_view" />
事件
这里就先介绍常用的点击事件 bindtap
,其他事件请到组件里查阅
<view data-name="Weixin" bindtap="tapName"> 点击 </view>
Page({
tapName: function(e) {
console.log(e)
}
})
有时需要在点击的时候,传递参数进去,那怎么处理呢
通过data-
加 你传递的参数名,如上面的data-name,可去打印结果里取e.currentTarget.dataset.name
说明:currentTarget
事件绑定的当前组件
双向绑定
首先说一下,如何更改data里的数据
data: {
name: '张三'
}
想把张三改成李四,vue
中:this.name
= ‘李四’
小程序中是通过:
this.setData ({
name: '李四'
})
注意点:如果你想获取name的数据,通过this.name
是取不到的,需要 this.data.name
双向绑定:通过this.setData
更改数据,如果不加model,用户修改了输入框里的值,却不会同时改变 this.data.value
<input model:value="{{value}}" />