模板配置
🌮🌮目标
- 1.能够使用WXML模板语法渲染页面结构
- 2.能够使用WXSS样式渲染标签样式
- 3.能够使用app.json对小程序进行全局配置
- 4.能够使用page.json对小程序页面进行个性化配置
- 5.如何发起网络数据请求
数据绑定的基本原则
- 在data中定义数据
- 在WXML中使用数据
- 在页面对应的.js文件中，把数据定义到data对象中即可
Page({
/**
* 页面的初始数据
*/
data:{
info:'data',
imgSrc:'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
msgList:[
{
msg:'我是提示信息'
}
],
randomNum:Math.random()*10, //生成10以内的随机数
randomFixed:Math.random().toFixed(2),
}
})
使用
- 绑定内容
- 绑定属性
- 运算(三元运算、算术运算等)
在对应的页面中，使用双大括号语法进行渲染， 动态绑定内容
<view>{{info}}</view>
<view>
<image src="{{imgSrc}}" alt=""/>
</view>
<view>
{{randomNum >= 5 ? '大于5' :'小于5'}}
</view>
<view>{{randomFixed}}</view>
事件
- 渲染层到逻辑层的通信方式。可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理。
- 常用的事件
- 注意：绑定方式有两种。
- 事件对象的属性列表
- target和currentTarget事件
- target:是触发该事件的源头组件
- currentTarget:是当前事件所绑定的组件
bindtap的语法格式
- 在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过
tap事件来响应用户的触摸行为。 - 通过
bindtap,可以为组件绑定触摸事件，
<button type="" bindtap="btnclick">按钮</button>
- 在js文件中
Page({
btnclick(e){
console.log(e)
}
})
事件处理函数中为data中的数据赋值
- 通过调用
this.setData(dataObject)方法，给页面数据重新赋值，示例 - 在js文件中
Page({
data:{
count:0
},
btnclick(e){
console.log(e)
this.setData({
count:this.data.count++
})
}
})
小程序中事件传参
- 比较特殊，不能在绑定事件的同时为事件处理函数传递参数，内部处理机制会把整个事件字符认为函数名字。
- 处理方法：为组件提供
data-自定义属性传参，其中-后面的名称就代表是参数的名字，后面的为{{值}}。示例
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
- info会被解析为
参数的名字 - 数值
2会被解析为参数的值
bindinput语法
- 通过
input事件来响应文本框的输入事件，示例
<input bindinput="inputHandler" />
inputHandler(e){
//e.detail.value 是变化过后，文本框最新的值
console.log(e.detail.value)
}
文本框和data之间的数据同步
- 定义数据
- 渲染结构
- 美化样式
- 绑定input事件处理函数修改data
<input value="{{msg2}}" type="text" bindinput="inputHandler"/>
data:{
msg2:'你好'
}
inputHandler(e){
this.setData({
msg2:e.detail.value
})
}
wx.if 使用 wx:if=“{{condition}}” 来判断是否需要渲染，wx:elif和wx:else判断
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
结合block标签使用wx:if条件渲染
- 如果一次性控制多个组件的展示和隐藏，可以使用一个
<block></block>标签将多个组件包起来，并在<block>标签上使用wx:if控制属性，示例
<block wx:if="{{true}}">
<view>我是其中一个组件,是根据条件渲染出来的</view>
<view>我是其中一个组件</view>
</block>
总结
小程序的执行环境和pc端执行环境有所不同，需要注意一些写法规则的不同。
