一、动画API
（1）作用：用于在微信小程序中完成动画效果的制作
（2）使用：创建实例 wx.createAnimation()
（3）常用属性：
duration 【number型】 动画持续时间，单位毫秒，默认400毫秒
timingFunction 【string型】 动画效果 默认linear
delay 【number型】 动画延迟时间 单位毫秒，默认0
transformOrigin【string型】 设置旋转元素的基点位置，默认50% 50% 0 。这三个数字分别表示X轴、Y轴、Z轴位置
（4）timingFunction属性的属性值：
linear 匀速
ease 慢快慢
ease-in 以低速开始
ease-in-out 以低速开始和结束
ease-out 以低速结束
step-start 动画第一帧就跳至结束状态，直至结束
step-end 动画一直保持开始状态，最后一帧跳至结束状态
（5）常用方法：
rotate（number angle） 旋转。顺时针。角度取值范围【-180,180】
export（） 导出动画队列。export()方法每次调用后会清掉之前的动画操作
scale（number sx，number sy） 缩放。当仅有sx参数时，表示在X轴Y轴同时缩放sx倍
translate（number tx，number ty） 平移。单位为px
skew（number ax，number ay） 倾斜。角度取值范围【-180,180】
step（object，object） 表示一组动画完成。当调用任意多个动画方法组成一组动画时，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
opacity（number value） 设置透明度，范围0~1
backgroundColor（string value） 设置背景色
width（number|string value） 设置宽度
top（number|string value） 设置top值
（6）代码示例：
6-1》在index.wxml里
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 一、Animation 动画API -->
<view animation='{{move}}'>hello world</view>
<button bind:tap="play">播放动画</button>
6-2》在index.js里
Pages（{
//一、动画 Animation API
play:function(){
var animation=wx.createAnimation();
animation.duration=4000;
animation.timingFunction='ease';
animation.translate(50,70).step();
this.setData({
move:animation.export()
})
}
}）6-3》初始页面为：
6-4》添加动画效果后，点击按钮，文字将匀速移动到相应位置：
二、map地图组件
（1）作用：map地图组件可以为用户通过地图的功能。支持移动、缩放、添加标记点...
（2）使用：直接使用map标签即可 <map></map>
（3）常用属性：
longitude 【number】 中心经度，为必填项
latitude 【number】 中心纬度，为必填项
scale 【number】 缩放级别，取值范围为3-20，默认为16
markers 【Array.】 标记点数组
show-location 【boolean】 是否显示带有方向的当前定位点，默认false
bindregionchange 【eventhandle】 视野发生变化时触发的事件处理函数
（4）标记点属性——marker对象属性：
markers标记点数组中的每一项为一个表示标记点的marker对象
id 【number】 标记点id
longitude 【number】 经度。取值范围 -180~180 必填项
latitude 【number】 纬度。取值范围 -90~90 必填项
iconPath 【string】 设置标记点图标路径。必填项
title 【string】 标记点名字，点击时显示
zIndex 【number】 显示层级
alpha 【number】 标记点透明度，默认1，即无透明。取值0~1
width 【number/string】 标记点图标宽度
height 【number/string】 标记点图标高度
（5）代码示例：
5-1》在我的images里面存了gps.png图片
5-2》在index.wxml里
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 二、map 地图组件 -->
<map id="myMap" scale="3" markers="{{myMarkers}}"></map>
5-3》在index.js里
Pages({
data:{
myMarkers:[{ //标记点属性
id:1,
longitude:'112.59',
latitude:'28.12',
iconPath:'../../images/gps.png',
width:'50px',
height:'50px'
}]
},
})5-4》初始页面为：
5-5》使用map地图组件的js代码后，页面为：
三、地图 API
（1）作用：地图API帮助我们实现获取地图某一位置的功能
（2）使用：地图API必须在map组件中才能使用。创建wx.createMapContext（"地图组件id"）实例
（3）常用属性：
iconPath 【string】 图标路径
success 【function】 接口调用成功的回调函数
fail 【function】 接口调用失败的回调函数
complete 【function】 接口调用结束的回调函数
（4）常用方法：
getCenterLocation（） 获取当前地图中心的经纬度。返回GCJ-02坐标系
moveToLocation（） 将地图中心移至当前定位点
（5）getCenterLocation（）常用方法的常用属性：
iconPath 【string】 图标路径
success 【function】 接口调用成功的回调函数，通过其参数可以获取longitude经度和latitude纬度
fail 【function】 接口调用失败的回调函数
complete 【function】 接口调用结束的回调函数
（6）moveToLocation（）常用方法的常用属性：
longitude 【number】 经度
latitude 【number】 纬度
success 【function】 接口调用成功的回调函数
fail 【function】 接口调用失败的回调函数
complete 【function】 接口调用结束的回调函数
（7）代码示例：
7-1》index.wxml页面：
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 二、map 地图组件 -->
<map id="myMap" scale="3" markers="{{myMarkers}}"></map>
<!-- 三、地图API -->
<button bind:tap="getCenter">获取地图中心位置的经纬度</button>
7-2》index.js页面：
Pages({
data:{
myMarkers:[{ //标记点属性
id:1,
longitude:'112.59',
latitude:'28.12',
iconPath:'../../images/gps.png',
width:'50px',
height:'50px'
}]
},
getCenter:function(){
var m=wx.createMapContext('myMap');
m.getCenterLocation({
success:res=>{
console.log(res.longitude+"___"+res.latitude);
}
})
},
})7-3》初始页面为
7-4》点击地图API按钮后，控制台输出为
四、位置API
（1）作用：获取当前的实时位置
（2）注意：使用 wx.getLocation 需要用户的地理位置授权，如果用户未授权，可能需要先调用 wx.authorize 进行授权请求。
对于正常上线需要更改隐私权限，下列只是理论与演示
（3）使用：
在app.json里面配置：
Pages({
"requiredPrivateInfos": ["getLocation"],
"permission":
{"scope.userLocation": {
"desc": "获取用户的实时位置"
}
}
})再创建wx.getLocation（）实例
（4）常用选项：
type 【string】 当前位置坐标类型。设为WGS84可返回GPS坐标，设为GCJ-02可以返回用于微信内置地图查看位置的坐标
success 【function】 接口调用成功的回调函数
fail 【function】 接口调用失败的回调函数
complete 【function】 接口调用结束的回调函数
（5）success（）的参数（对象）常用属性：
wx.getLocation（）方法的success（）回调函数的参数是一个对象，该对象属性如下：
longitude 【number】 经度，取值 -180~180
latitude 【number】 纬度，取值 -90~90
speed 【number】 速度，单位m/s
altitude 【number】 高度，单位m
（6）代码示例：
6-1》index.wxml里面
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 四、位置 API -->
<button bind:tap="getLoc">获取实时位置</button>6-2》index.js里
Pages({
getLoc:function(){
wx.getLocation({
type:'gcj02',
success:res=>{
console.log(res);
}
})
},
})6-3》初始页面
6-4》点击按钮后，获取你所在的实时位置
此处控制台输出略，可自行演示
五、路由API
（1）作用：实现页面跳转
（2）使用：
2-1》wx.navigateTo()
a跳到b，a页面还存在。在b页面按返回可回到a页面
2-2》wx.redirectTo()
a跳到b，a页面不存在
2-3》wx.switchTab(object)
跳转到tabar页面，并且关闭其他非tabar页面（也就是跳转到主页）
（3）代码示例：
3-1》前提配置：为了更清晰的显示路由API效果，此时配置一个list文件夹
list.wxml页面如下：
<navigation-bar title="另外一个页面" color="black" background="#FFF"></navigation-bar>
<view>我是路由跳转后的页面</view>
3-2》index.wxml页面
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 五、路由 API -->
<button bind:tap="goto">跳转</button>
3-3》index.js页面
Pages({
goto:function(){
wx.navigateTo({
// 跳转并且携带参数
url: '../list/list?id=1&myname=zhangsan',
})
}
})
3-4》点击index.wxml跳转的按钮后，页面显示为
