小程序API
小程序API 是小程序开发的核心,通过 API 开发者可以获得微信底层封装的高级特性,如网络请求、文件操作、设备信息、地理定位、本地存储等。
小程序的 API 以全局对象 wx 为命名空间,格式为 wx.方法名(),可全局调用。
界面相关API
- wx.showLoading
- 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框。
- wx.hideLoading
- 隐藏 loading 提示框。
- wx.showModal
- 显示模态对话框(确认框)。
- wx.showToast
- 显示消息提示框。
网络请求相关
- wx.request
- url 请求地址
- method 请求方式
- GET 查询
- POST 添加
- PUT 修改
- DELETE 删除
- data 请求参数
- header 请求头
- success 成功的回调函数
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
媒体相关
- wx.chooseImage
- 从本地相册选择图片或使用相机拍照。
- sourceType 选择图片的来源
- [‘album’, ‘camera’] album表示从相册选择;camera表示拍照
- sizeType 所选的图片的尺寸
- [‘original’, ‘compressed’] original表示原始图片;compressed表示压缩图片
- res.tempFilePaths 图片的本地临时文件路径列表 (本地路径)
- res.tempFiles 图片的本地临时文件列表
- wx.previewImage
- 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
- urls 选择的图片列表,需要预览的图片链接列表。
- current 默认显示的图片,当前显示图片的链接。
示例代码
:
handleImg () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
console.log(res)
// 预览图片
wx.previewImage({
urls: [...res.tempFilePaths],
current: res.tempFilePaths[1]
})
},
})
},
路由相关
小程序是单页的,页面的切换本质上是局部更新,其实是由路由实现的。
但是小程序的路由都默认封装好了,底部配置的菜单,navigator标签。
- wx.switchTab(Object object)
- 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
- wx.redirectTo(Object object)
- 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
- wx.navigateTo(Object object)
- 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
示例代码
:
handleJump () {
// 如下的三个方法作用类似于navigator标签的open-type属性值的三种用法
// 控制页面跳转
wx.switchTab({
url: '/pages/logs/logs',
})
wx.navigateTo({
url: '/pages/test/test'
})
wx.redirectTo({
url: '/pages/test/test'
})
},
数据缓存相关
- wx.setStorageSync(string key, any data)
- string key 本地缓存中指定的 key。
- any data 需要存储的内容。只支持原生类型、Date、及能够通过
JSON.stringify
序列化的对象。
- wx.getStorageSync(string key)
- string key 本地缓存中指定的 key。
- 返回值 any data,key对应的内容。
小程序分享
- onShareAppMessage() 分享功能
onShareAppMessage: function () {
// 定制分享的效果
return {
// 分享弹窗的标题
title: '试试你的颜值',
// 分享的默认页面路径
path: '/pages/ai/index',
// 弹窗缩略图的图片路径
imageUrl: '/image/itcast.png'
}
}
获取可视区高度
// uni-app环境下,可以使用uni调用小程序API
// 触发父组件自定义事件
this.$emit('window-height', {
height: uni.getSystemInfoSync().windowHeight
});
设置页面的滚动位置
// uni-app环境下,可以使用uni调用小程序API
uni.pageScrollTo({scrollTop: 0});
获取用户收货地址
// 调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。
wx.chooseAddress(Object object)
基础库 1.1.0 开始支持,低版本需做兼容处理。
地图
map组件的基本使用
:
<map longitude="113.324520" latitude="23.099994" scale="11"></map>
<button bindtap='handleShow'>显示当前位置</button>
<button type='primary' bindtap='handleOpen'>打开地图选择位置</button>
通过小程序API操作地图:
- 获取当前位置坐标(经纬度)wx.getLocation
- 打开地图中的位置 wx.openLocation
- 选中地图的位置并获取位置的详细信息 wx.chooseLocation
handleOpen () {
// 通过地图选择一个具体位置
// 默认根据当前位置进行定位
// 可以根据下面的列表提示选择具体某个位置
wx.chooseLocation({
// longitude: 116.3964,
// latitude: 39.9093,
success: function(res) {
// 定位的详细数据:包括地址名称和经纬度信息
console.log(res)
}
})
},
handleShow () {
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success(res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 18
})
}
})
},