小程序的宿主环境-API
1.小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。
2.小程序API的3大分类
小程序官方把API分成了如下3大类:
-
事件监听API
-
特点:以on开头,用来监听某些事件的触发
-
举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件,类似于HTML中的定义对象Windows,不同提前声明就可使用。
-
同步API
-
特点1:以Sync结尾的API都是同步API
-
特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
-
举例:wx.setStorageSync('key','value')向本地存储中写入内容
-
异步API
-
特点:类似于jQuery中的$.ajax(options)函数,需要通过success,fail,complete接收调用的结果
-
举例:wx.request()发起网络数据请求,通过success回调函数接收数据
协同工作和发布
1.了解权限管理需求
在中大型的公司里,人员的分工非常仔细:同一个小程序,一般会有不同岗位,不同角色的员工同时参与设计与开发。
此时处于管理需要,我们迫切需要对不同岗位,不同角色的员工权限进行边界的划分,使他们能够高效的进行协同工作。
2.了解项目成员的组织结构
模板与配置
1.数据绑定的基本原则
-
在data中定义数据
-
在WXML中使用数据
2.在Data中定义页面的数据
在页面的JS文件中,把数据定义到Data对象中即可:
这里定义了两种类型的变量,一种是字符串的变量,变量名叫做info,一种是数组类型的变量,变量名叫做msgList
Page({
data:{
// 字符串类型的数据
info:'init data',
// 数组类型的数据
msgList:[{msg:'hello'},{msg:'word'}]
}
})
3.Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)或者叫插值表达式将变量包裹起来。语法格式:
<view class="info_view">
{{info}}
</view>
样式内容代码:
.info_view{
margin: 0 auto;
text-align: center;
}
最终的显示效果如下:
变量的值就会显示在页面中。
4.Mustache语法的应用场景
Mustache语法的主要应用场景如下:
-
绑定内容
-
绑定属性
-
运算(三元运算、算术运算等)
动态内容的绑定
JS代码:
data:{
// 字符串类型的数据
info:'init data',
// 数组类型的数据
msgList:[{msg:'hello'},{msg:'word'}]
}
页面结构代码:
<view class="info_view">
{{info}}
</view>
动态属性的绑定
JS代码:
data:{
// 将图片的路径设置为变量
src:'./image/幼儿园-LOGO.jpg'
}
页面结构代码:
<view class="img_view">
<image src="{{src}}" mode=""/>
</view>
在使用的时候将图片的路径变量绑定到image的src属性上,就可以通过改变变量的值的方式来改变显示的图片内容。
显示内容如下:
三元运算
JS代码:
data:{
// 生成一个随机数
Integer:Math.random() * 10
}
页面结构代码:
<view class="info_view">
{{Integer >= 5 ? '随机数大于等于5' : '随机数小于等于5'}}
<rich-text nodes="</br>"></rich-text>
{{Integer}}
</view>
显示内容如下:
在上面的案例中,我们在JS中生成了一个随机数,并根据随机数的大小,在结构中使用Mustache语法的三元运算符,根据随机值的大小显示两种不同的内容。
每一次我们点击编译按钮的时候,都会生成一个完全不一样的随机数,我们可以通过观察随机数的大小来查看值的不同显示:
或者是通过【调试器】功能去查看变量的大小:
算数运算
除了使用三元运算符,在插值表达式中还可以使用运算符号对数值进行运算后,展示运算后的数据。
页面结构代码:
<view class="info_view">
{{Integer2 * 100}}
</view>
JS代码:
data:{
Integer2: Math.random().toFixed(2)
}
显示效果如下:
在上面的操作中,首先我们在JS中生成了一个两位小数的随机数,然后在页面结构中,使用这个随机数乘以10得到的结果经过插值表达式渲染到页面中。
事件绑定
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
比如说,当用户在渲染层(页面)中触发了某个事件,比如点击按钮的事件,点击屏幕的事件等,这个事件就会被传递到逻辑层(JS文件)中对用户的点击行为做出反馈,这个反馈包括震动,切换页面,数据交换等等。
2.小程序中常用的事件
类型 |
绑定方式 |
事件描述 |
tap |
bindtap或者bind:tap |
手指触摸后马上离开,类似于HTML中的click事件 |
input |
bindinput或者bind:input |
文本框的输入事件 |
change |
bindchange或者bind:change |
状态改变时触发 |
3.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,他的详细属性如下所示:
属性 |
类型 |
说明 |
type |
String |
事件类型 |
timeStamp |
Integer |
页面打开到出发时间所经过的毫秒数 |
target |
Object |
触发事件的组件的一些属性值集合 |
currentTarget |
Object |
当前组件的一些属性值集合 |
detail |
Object |
额外的信息 |
touches |
Array |
触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches |
Array |
触摸事件,当前变化的触摸点信息的数组 |
4.target和currentTarget的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view 的 tap事件处理函数。此时,对于外层的view来说:
-
e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
-
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
5.bindtap的语法格式
在小程序中,不存在HTML中的onclick鼠标点击书简,而是通过tap事件来响应用户的触摸行为。
-
通过bindtap,可以为组件绑定tap触摸事件,语法如下:
<view class="info_view">
<button bindtap="onTap" type="primary">点我</button>
</view>
-
在页面的JS文件中定义对应的事件处理函数,书简参数通过形参event(一般简写成e)来接收:
onTap(e){
console.log(e)
}
页面展示内容如下:
当前控制台内容如下:
当我们点击按钮之后,会触发一个点击事件,与这个事件绑定的逻辑层方法就会被执行,从而在控制台打印出event属性的参数:
那么在这个对象中,就包括了与此次事件有关的属性信息。
6.在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值,示例如下:
页面结构代码:
<view class="info_view">
{{count}}
<button type="primary" bindtap="onTap">按钮</button>
</view>
JS代码:
data: {
count: 0
},
onTap(){
this.setData({
count: this.data.count+1
})
}
页面显示效果:
当我们点击按钮的时候,上面的数组也会随之增长1。
或者也可以将数字直接显示在按钮上:
<view class="info_view">
<button type="primary" bindtap="onTap">{{count}}</button>
</view>
显示效果如下:
7.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如:下面的代码不能正常工作:
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
因为小程序会把button的属性值,统一当作事件名称来处理,相当于要调用一个名称为bthHandler(123)的事件处理函数。‘
可以为组件提供“data-*"自定义属性传参,其中*代表的是参数的名字,示例代码如下:
<buttton bindtap="bthHandler" data-info="{{2}}">事件传参</button>
最终:
-
info会被解析为参数的名字
-
数值2会被解析为参数的值
在事件处理函数中,通过event,target.dataset.参数名即可获取到具体参数的值,示例代码如下:
btnHandler(event){
// dataset是一个对象,包含了所有通过data-*传递过来的参数项
console.log(event.target.dataset)
// 通过dataset可以访问到具体参数的值
console.log(event.target.dataset.info)
}
这个值并不需要在JS中先定义,可以在传参的时候根据页面的需要去定义,然后在JS中接收对应的值。也可以先在JS中定义需要用到的参数,然后根据JS中的参数去结构代码中设置要接收的参数。
页面结构代码:
<view class="info_view">
<button type="primary" bindtap="onTap" data-info="{{2}}">在控制台打印值</button>
</view>
JS代码:
onTap(event){
console.log(event.target.dataset)
console.log(event.target.dataset.info)
},
最终的显示效果:
点击按钮之前的控制台:
在上面的案例中,当我们点击按钮之后,会在控制台打印出所有的传递过来的参数,以及info参数的值:
这就是在小程序中从结构中传递参数到JS文件中的方法。