微信小程序的常用API②

一、动画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',
        })
    }
})