API
宿主环境提供了丰富的API,可以很方便调起微信提供的能力。wx.navigateTo可以保留当前页面,然后跳转到新的页面。
小程序提供的API按照功能主要分为几大类: 网络 媒体 文件 数据缓存 位置 设备 界面 界面节点信息还有一些特殊的开放接口,我们介绍一下API一般调用的约定:
1 wx.on*开头的API是监听某个事件发生的API接口,接受一个CallBack函数作为参数。当该事件触发时,会调用CallBack函数;
2 如未特殊约定,多数API接口未异步接口,都接受一个Object作为参数
3 API的Object参数一般由success fail complete三个回调来接收接口调用结果,
4 wx.get* 开头的API是获取宿主环境数据的接口
5 wx.set* 开头的API是写入数据到宿主环境的接口
事件
用户在渲染层的行为反馈和组件的部分状态反馈抽象为渲染层传递给逻辑层的事件。
事件类型和事件对象
常见的事件类型
touchstart
touchend
touchmove
touchcancel
tap
longtap
transitionend
animationstart
animationiteration
animationend
当事件回调触发的时候,会受到一个事件对象
type 事件类型
timeStamp 页面打开到触发事件所经历的毫秒数
target 触发事件的组件的一些属性值的集合
currentTarget 当前组件的一些属性值集合
detail 额外信息
touches 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches 触摸事件,当前变化的触摸点信息的数组
这里需要注意的是target和currentTarget的区别,currentTarget为当前事件所绑定的组件,而target则是触发该事件的源头组件。
target和currentTarget事件对象属性
id 当前组件的id
tagName 当前组件的类型
dataset 当前组件上由data-开头的自定义属性组成的集合
关于touch和changedTouches对象的详细参数:
identifier 触摸点的标识符
pageX,pageY 距离文档左上角的距离,文档的左上角为原点,横向为X轴,纵向为Y轴
clientX,clientY 距离页面可以显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
事件绑定和与冒泡捕获
事件绑定的写法和组件属性一致,以key=‘value’的形式,其中:
1 key以bind或者catch开头,然后跟上事件的类型,如bindtap catchtouchstart bind:tap catch:touchstart;同时bind和catch前还可以加上capture-来表示捕获阶段。
2 value是一个字符串,需要在对应的页面Page构造器中定义同名的函数;
bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定恶意阻止冒泡事件向上冒泡
兼容
wx.getSystemInfo 或者wx.getSystemInfoSync来获取手机品牌、操作系统版本号 微信版本号以及小程序基础库版本号等。
基本的布局方法-Flex布局
界面常见的交互反馈
Toast和模态对话框
在完成某个操作成功之后,我们希望告诉用户这次操作成功并且不打断用户接下来的操作,使用Toast
不应该使用toast用于错误提示,因为错误提示需要明确告知用户具体原因,因此不适合这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话,会使用模态对话框来提示,同时附带下一步操作的指引。
界面滚动
onPullDownRefresh
onReachBottom
不希望整个页面进行滚动,而是页面中某一小块区域需要可滚动,此时就要使用宿主环境所提供的scroll-view可滚动视图组件。可以通过组件的scroll-x scroll-y 属性决定滚动区域是否可以横向或者纵向滚动
发起HTTPS网络通信
小程序经常乣往服务器传递数据或者从服务器拉取信息,这个时候可以使用wx.request这个API
wx.request
url
data
header
method
dataType
success
fail
complete
服务器接口
url参数是当前发起请求的服务器接口地址,小程序宿主环境要求request发起的网络请求必须是https
协议请求,同时为了保证小程序不乱用任意域名的服务,wx.request请求的域名需要在小程序管理平台进行配置