微信小程序——第三天

微信小程序 - Unit03

1.组件

· <input>组件

<input>组件为输入框组件，该原生是原生组件，其语法结构是：

<input 
	type="输入框的类型" 	
	placeholder="占符位"
    password="是否为密码"
    value="初始内容"
    maxlength="最大长度"
    focus="是否自动获得焦点"
    bindinput="输入时触发的函数"
    bindfocus="获得焦点时触发的函数"
    bindblur="失去焦点时触发的函数"
    bindconfirm="单击完成时触发的函数">
</input>

输入框的类型包括：

· text，文本输入框

· number，数字输入框

· digit，带有小数点的数字输入框

· idcard，身份证号输入框

原生组件：由手机操作系统自带的组件，其特点有：

· 无论其他组件的z-index设置多大，都无法覆盖原生组件

· 部分样式(如position:fixed)无法应用于原生组件

· 事件绑定只支持 bind事件名称 的方法

原生组件有：

· input – 仅在focus时表现为原生组件

· camera

· video等

扩展：

表单元素的value属性在编辑时"必须"进行指定，因为需要显示的用户原始填写的相关信息。

· <checkbox-group>组件

<checkbox-group>组件为复选框群组组件，其语法结构是：

<checkbox-group bindchange="选定项目发生改变时触发的函数">
    <checkbox value="值" checked="是否被选定">...</checkbox>
</checkbox-group>

· <radio-group>组件

<radio-group>组件为单选框群组组件，其语法结构是

<radio-group bindchange="选定项目发生改变时触发的函数">
    <radio value="值" checked="是否被选定">...</radio>
</radio-group>

· <switch>组件

<switch>组件是开关组件，其语法结构是：

<switch 
	checked="是否被选定" 
    type="类型" 
    bindchange="状态发生改变时触发的函数">
    ...
</switch>

类型包括：switch和checkbox

· <picker>组件

<picker>组件是从底部弹出的选择器

◎selector类型

selector指普通的选择器，其语法结构是：

<picker 
	mode="selector" 
    range="选择的范围(array类型)"
    bindchange="选项发生变化时触发函数"
    bindcancel="取消选择时触发的函数">
</picker>

◎region类型

2.组件自定义事件

组件自定义事件是指除原生事件(如touchstart、touchmove、tap等)外的事件。

无论组件绑定的事件是原生事件还是自定义事件，在事件处理函数中一定不能使用小括号，如：

<button type="primary" bindtap="f1">按钮</button>

<input type="text" bindinput="f2"></input>

如果原生事件的处理函数中需要参数时，可通过自定义属性进行传递。

如果在自定义事件的处理函数中需要获取当前组件的相关数据怎么办?

直接在事件处理函数中带有event 参数(代表事件对象)，然后通过event.detail.value进行获取，如:

Page({
	f1(event){
		console.log(event.detail.value)
	}
})

3.WXML

3.1 内容绑定

WXML 中的数据来源于逻辑层中的data

Page({
	//初始化数据
	data:{
		
	}
})

内容绑定直接通过双花括号语法进行输出即可，如

<view>姓名:{{username}}</view>

内容绑定：Vue.js VS 小程序

Vue.js

<div>{{username}}</div>

小程序

<view>{{username}}</view>

属性绑定：Vue.js VS 小程序

Vue.js

<img :src="imageURL">

小程序

<image src="{{imageURL}}"/>

CSS类的绑定：Vue.js VS 小程序

Vue.js

<div :class="className">动态CSS类</div>

小程序

<view class="{{className}}">动态CSS类</view>

内联样式的绑定：Vue.js VS 小程序

Vue.js

<div :style="inlineStyle">动态行内样式</div>

小程序

<view style="{{inlineStyle}}">动态行内样式</view>

3.2 列表渲染

<组件名称 
	wx:for="{{变量名称}}" 
    wx:for-item="成员变量名称"
    wx:for-index="下标变量名称"
    wx:key="成员下标变量名称">
    ...
</组件名称>

默认的成员变量名称是item
默认的成员下标变量名称是index

列表渲染 –Vue.js VS 小程序

Vue.js

<div v-for="(item,index) of books" :key="index">
	...
</div>

小程序

<view
  wx:for="{{books}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="index">
   ....
</view>

3.3 条件渲染

<组件名称 wx:if="{{条件表达式}}">
   ...
</组件名称>

<组件名称 wx:if="{{条件表达式}}">
   ...
</组件名称>
<组件名称 wx:else>
   ...
</组件名称>

<组件名称 wx:if="{{条件表达式}}">
   ...
</组件名称>
<组件名称 wx:elif="{{条件表达式}}">
   ...
</组件名称>
<组件名称 wx:elif="{{条件表达式}}">
   ...
</组件名称>
...
<组件名称 wx:else>
   ...
</组件名称>

条件渲染 – Vue.js VS 小程序

Vue.js

<div v-if="条件表达式">
    ...
</div>
<div v-else-if="条件表达式">
    ...
</div>
<div v-else-if="条件表达式">
    ...
</div>
<div v-else>
    ...
</div>

小程序

<view wx:if="{{条件表达式}}">
    ...
</view>
<view wx:elif="{{条件表达式}}">
    ...
</view>
<view wx:elif="{{条件表达式}}">
    ...
</view>
<view wx:else>
    ...
</view>

<block>...</block>标签仅是一个包装元素的标签，其不会在页面中进行渲染操作，只接收控制属性

4.修改data中的变量值

在小程序的页面中，要修改data中的变量值的话，只能通过Page对象的setData()方法来实现，其语法结构是：

this.setData({
	...
}[,callback])

this 关键字指当前的页面对象 – Page

关于JSON:https://www.json.org/json-zh.html

5. API

· wx.showToast()方法

wx.showToast()方法用于显示短消息提示框，其语法结构是：

wx.showToast({
  	title:"提示文本",
    icon:"图标类型(success|loading|none)",
    image:"本地图标路径",
    duration:延迟时长(1500ms),
    mask:是否显示透度的遮罩层
})

· wx.hideToast()方法

wx.hideToast()方法用于隐藏消息提示框，其语法结构是：

wx.hideToast({
	success:res=>{
		//...
	}	
})

· wx.showModal()方法

wx.showModal()方法用于显示模态对话框 ，其语法结构是：

wx.showModal({
  	title:"提示标题",
    content:"提示内容",
    showCancel:是否显示取消按钮,
    confirmText:"确认按钮的文本",
    cancelText:"取消按钮的文本",
    success:res=>{
        //res.confirm代表是否单击了确认按钮
        //res.cancel代表是否单击了取消按钮
    }
})

· wx.showLoading()方法

wx.showLoading()方法用于显示加载提示框，其语法结构是：

wx.showLoading({
	title:"提示的内容",
    mask:是否显示透明的遮罩层,
    success:res=>{
        //...
    }
})

· wx.hideLoading()方法

wx.hideLoading()方法用于隐藏加载提示框，其语法结构是：

wx.hideLoading({
	success:res=>{
		//...
	}
})