1-4微信小程序基础

模板配置

目标

• 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端执行环境有所不同，需要注意一些写法规则的不同。