小程序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
        })
      }
    })
  },