小程序API

微信小程序开发框架提供了丰富的原生API。可以方便地调用微信提供的功能，如获取用户信息、本地存储、支付等。

路由

wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

<!-- test.wxmml -->
<view>
    <button bindtap="navTo">点击跳转</button>
</view>

// test.js
Page({
  // 跳转事件
  navTo(){
    // 跳转到index页面
    wx.navigateTo({
      url: '/pages/index/index',
    })
    // 
    success: function(res) {
       // 通过eventChannel向被打开页面传送数据
       res.eventChannel.emit('test', { data: 'test' })
    }
  }
})

// index.js
onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('test', function(data) {
      console.log(data)
    })
}

wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

<!--
    index.wxml
-->
<view>
  <button bindtap="onnavigateBack">onnavigateBack</button>
</view>
<!--
    index.js
-->
onnavigateBack(){
    wx.navigateBack({
      delta: 1,
    })
  },

其他路由API

wx.switchTab    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面参数
wx.reLaunch        关闭所有页面，打开到应用内的某个页面
wx.redirectTO    关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

界面(交互,下拉刷新)

wx.showModal

显示模态对话框

<!-- test.wxml -->
<view>
  <button bindtap="onshowModal">模态对话框</button>
</view>

// test.js
Page({
    onshowModal(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

wx.showToast

显示消息提示框

<!-- test.wxml -->
<view>
  <button bindtap="onshowToast">模态对话框</button>
</view>

// test.js
Page({
    onshowModal(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

wx.showLoading

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

<view>
  <button bindtap="onloading">loading</button>
</view>

onloading(){
    wx.showLoading({
      title: '加载中',
      success:function(res){// 回调成功
        console.log(res);
        console.log('懒加载中')
      }
    });
    setTimeout(function(){
      wx.hideLoading({// 隐藏 loading 提示框
        success: (res) => {// 回调成功
          console.log(res)
          console.log('关闭懒加载')
        },
      })
    },2000)
}

wx.startPullDownRefresh

开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

wx.stopPullDownRefresh

停止当前页面下拉刷新

<view>
  <button bindtap="onrefresh">点击刷新</button>
</view>

refresh(){
    console.log('当有下拉刷新的时候，调用该方法');
},
onrefresh(){
    this.refresh();// 调用方法
    wx.startPullDownRefresh({
      success: (res) => {
        console.log(res)
      },
    })
    setTimeout(function(){
      wx.stopPullDownRefresh()
    },2000)
}

// json
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

网络请求

wx.request(Object object)

发起 HTTPS 网络请求。使用前请注意阅读相关说明。

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。

1. 对于 GET 方法的数据，会将数据转换成 query string
2. 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
3. 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string

<!-- test.wxml -->
<view>
  <button bindtap="onrequest">请求数据</button>
</view>

// test.js
Page({
    onrequest(){
        wx.request({
          url: 'http://www.kk.com/admin/admin.php', // 接口地址
          data: {// 请求的参数
            id: 2,
            action:'weixin'
          },
          header:{// 设置头部信息
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'POST',// 提交方法
          success:function(data){
            console.log(data.data)
          }
        })
  }
})

wx.uploadFile

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

<view>
  <button bindtap="onupload">上传图片</button>
</view>

// 上传图片事件
  onupload(){
    wx.chooseImage({// 从本地相册选择图片或使用相机拍照
      count: 1,// 最多可以选择的图片张数
      success:function(res){
        console.log(res);
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths[0])
        wx.uploadFile({
          filePath: tempFilePaths[0],// 要上传文件资源的路径 (本地路径)
          name: 'photo',// 后端通过该值获取到文件内容
          url: 'http://www.kk.com/admin/admin.php',// 上传的地址
          success:function(res){
            console.log(res);
          }
        })
      }
    })
  }

数据缓存

wx.setStorageSync() 设置本地缓存

<view>
    <button bindtap="storage">
        点击存储
    </button>
</view>

Page({
    storage(){
        wx.setStorage({
            key:'key',
            data:'111'
        })
    }
})

wx.getStorageSync() 获取本地缓存

<view>
  <button bindtap="getstorage">
        点击获取
  </button>
</view>

getstorage(){
   const value = wx.getStorageSync('key')
   console.log(value)
}

wx.removeStorageSync

从本地缓存中移除指定 key

wx.clearStorageSync

清理本地数据缓存

<view>
  <button bindtap="onremove">删除缓存</button>
</view>

onremove(){
    wx.removeStorage({
      key: 'key',
      success (res) {
        console.log('删除成功')
      }
    })
}

想了解更多API请点击