小程序功能性API 介绍

2018/12/13 10:03 分类：技术交流浏览：49

一。获取定位

在微信小程序中，我们可以很方便的通过API接口来获取我们当前的位置，接下来我讲告诉大家微信获取定位的API—wx.getLocation的用法，以及我们通过获取定位，得到当地的位置，天气等信息。

首先给出我的前端代码，中括号内的变量就是我们下文中从高德地图返回给我们的json数组中解析出来的。下面让我们来看一下我们如何获得当前的定位以及获取高德地图给我们的信息。

其实获取定位很简单，我们直接调用微信的接口wx.getLocation,结果会返回给我们一个json数组，结果就像上图一样，数组中包含各种属性，我们最需要的就是经度(longitude)和纬度(latitude)，我们获得了当前位置的经纬度就可以调用高德地图的API，把我们的经纬度传上去，之后就能够获得高德地图给我们返回的信息。

首先我们需要从高德地图的官网上下载一个微信小程序SDK

http://lbs.amap.com/api/wx/download

在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js （amap-wx.js 从下载的 zip 文件解压后得到）文件拷贝到 libs 的本地目录下，如下图所示。

接下来我们需要在页面的js文件中配置我们需要操作的数据

好了，我们配置好外部文件以后，就可以在js里面写逻辑了，下面贴出js代码。

var amapFile = require('../../libs/amap-wx.js');
var markersData = {
latitude: '',//纬度
longitude: '',//经度
key: "高德地图key"//申请的高德地图key
};
Page({
/**
* 页面的初始数据
*/
data: {
weather:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadInfo();
},
//获取当前位置的经纬度
loadInfo: function(){
var that=this;
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude//维度
var longitude = res.longitude//经度
console.log(res);
that.loadCity(latitude,longitude);
}
})
},
//把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信息
loadCity: function (latitude, longitude){
var that=this;
var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
myAmapFun.getRegeo({
location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
success: function (data) {
console.log(data);
},
fail: function (info) { }
});
myAmapFun.getWeather({
success: function (data) {
that.setData({
weather: data
})
console.log(data);
//成功回调
},
fail: function (info) {
//失败回调
console.log(info)
}
})
},
})

复制代码

我们在onload函数中获取当前的定位，我们把经纬度信息传递给myAmapFun.getRegeo方法中的location参数，接下来我们可以看看高德地图给我们返回的信息。

我们获取了我们的位置以及邮政编码等一系列信息，大家可以去高德地图上注册一个开发者，得到一个key，然后测试一下，也可以获得你们当地的信息。

我们再看一下myAmapFun.getWeather给我们返回的天气信息。

我们顺利得到了我们当地的天气信息，然后再把这些信息显示在我们的wxml界面就行了，大家注意一下图片中的属性，然后再看一下wxml中括号内的变量，就可以知道讲json数组的某些属性的值如何传到前端了。有一个细节就是我把myAmapFun.getWeather方法返回的data数组传给了我在全局data中定义的weather数组，这样我们在前端就可以通过上文wxml中的方法来显示数组中的值。

二。从本地相册选择图片或使用相机拍照

代码示例：

wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // original为原图 compressed为压缩图
sourceType: ['album', 'camera'], // album,为相处 camera.为相机
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})

复制代码

参数

Object object

属性	类型	默认值	必填	说明
count	number	9	否	最多可以选择的图片张数
sizeType	Array.<string>	['original', 'compressed']	否	所选的图片的尺寸
sourceType	Array.<string>	['album', 'camera']	否	选择图片的来源
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

三。在新页面中全屏预览图片

示例代码

wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})

复制代码

注意：图片预览地址必须为网络地址。本地图片路径不可用。

参数

Object object

属性	类型	默认值	必填	说明
urls	Array.<string>		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
current	string	urls 的第一张	否	当前显示图片的链接
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

四。小程序分享-卡片

很多时候，我们在做小程序的时候，涉及到很多推广问题。小程序API帮助我们更简单的实现人脉推广。就是用我们的卡片形式将小程序推广到朋友或者微信群中。

首先：我们需要用一个按钮出发分享功能

<button open-type='share' plain='true'>
分享按钮
</button>
onShareAppMessage: function (res) {
if(res.from==='button'){
return {
title: '标题文本',
path: '要分享出去的页面路径'
imageUrl: '封面图片',
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
}
},

复制代码

五。小程序获取微信原生收货地址

小程序提供更为方便的获取用户在微信中存储的地址信息

示例代码

wx.chooseAddress({
success (res) {
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})

复制代码

参数

Object res

属性	类型	说明
userName	string	收货人姓名
postalCode	string	邮编
provinceName	string	国标收货地址第一级地址
cityName	string	国标收货地址第一级地址
countyName	string	国标收货地址第一级地址
detailInfo	string	详细收货地址信息
nationalCode	string	收货地址国家码
telNumber	string	收货人手机号码
errMsg	string	错误信息

六。小程序获取微信用户登录

wx.login

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

七。小程序获取微信用户信息

登录过后紧随其后的是我们需要获取用户信息的功能，获取当前微信用户的头像昵称等信息。将调用另一个api

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
不过此方法，小程序更新高版本后不建议直接使用。
微信对调用此方法做出了调整。使用button来获取。
<button open-type='getUserInfo' plain='true' bindgetuserinfo='getUserInfo' >获取用户信息
</button>

复制代码

总结，小程序有丰富的api接口可供调用。以上是整理出来较为常用的api。在不同类型项目中皆有使用到的地方，并且应用广泛，应用场景非常之多。

#标签：前端