一起学习微信小程序api

微信小程序api介绍

小程序API 是小程序开发的核心，通过 API 开发者可以获得微信底层封装的高级特性，如网络请求、文件操作、设备信息、地理定位、本地存储等。
小程序的 API 以全局对象 wx 为命名空间，格式为 wx.方法名()，可全局调用。

接下来我将会介绍几个常用的api api的基础、路由、网络请求、界面、用户信息、上传、下载、开放接口
介绍之前小编建议，想要掌握小程序api一定要学会阅读微信开发文档去使用！！！

api基础

• wx.getSkylineInfoSync() 获取系统信息
  windowHeight 可用窗口高
  windowWidth 可用窗口宽
  statusBarHeight 状态栏的高度
  safeArea 在竖屏正方向下的安全区域
  model 手机型号
  system 操作系统及版本
  benchmarkLevel 电量

我们可以在wxjs里获取一下wxml的系统信息

//wxml代码
<view class="title">基础</view>
<view>wx.getSystemInfoSync() 同步获取系统信息</view>
1
2
3

//wxjs代码
 //生命周期函数--监听页面加载
  onLoad(options) {
    var sys = wx.getSystemInfoSync();
    console.log(sys)
  },
1
2
3
4
5
6

详情可见图解

小程序路由

路由开发文档

程序是单页的，页面的切换本质上是局部更新，其实是由路由实现的。 但是小程序的路由都默认封装好了，底部配置的菜单，navigator标签。

（路由小编在上篇文中有更详细的介绍）

• wx.navigateTo({}) 跳转
  • 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
• wx.redirectTo()重定向
  • 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.switchTab() 切换底部栏
  • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.navigateBack( ) 返回

<navigator url="/pages/home/home.js">home</navigator>
<navigator url="/pages/home/home.js" open-type="redirect">首页-redirect</navigator>
1
2

网络

1. 网络请求 wx.request（小编在上篇文章也有更详细的介绍）

这里小编强调几个常见的参数
url 请求的地址（必填）
data 数据（post）
header 请求头信息
timeout 超时
methods 方式 post | get | put |
success 成功回调函数
fail 接口调用失败的回调函数
complete 完成（成功和失败都会执行）会结束加载提示

2.下载 wx.downloadFile()

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为
200MB。

//wxml代码
<view class="title">wx.downloadFile 下载文件</view>
<view class="title">wx.saveImageToPhotosAlbum 保存图片到相册</view>
<image src="{{pic}}" mode="aspectFill" bindtap="downPic"></image>
1
2
3
4

//js代码
downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        // 把临时文件保存到相册(需要用户授权) 
        // 当点击下载时会弹出是否允许访问您的相册 同意则可下载
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            // 提示保存成功
            wx.showToast({
              title: '下载图片成功',
              icon:"none"
            })
          }
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果图

3.上传 wx.uploadFile
这里可以引用媒体相关的
wx.chooseImage 从相册选择图片
chooseMessageFile 选择图片或者视频

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

//wxml代码
<button type="warn" bindtap="upImg">上传图片</button>
<view class="title">wx.uploadFile 上传</view>
<view class="title">wx.chooseMedia 选择图片或者视频</view>
<view class="title"> wx.chooseImage 从相册选择图片</view>
1
2
3
4
5

//js代码
 upImg(){
    var that  =  this;
    // 选择图片
    // wx.chooseImage({
    // 选择媒体
    wx.chooseMedia({
      count: 1, //媒体数量
      success(res){
        console.log(res)
        // 获取选择的第0个图片临时地址
        var tempFile = res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
            console.log(res);
            // 转换为js对象
            var data = JSON.parse(res.data);
            // 更新图片信息
            that.setData({pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果图

界面

介绍几个常用的 wx.showToast、wx.showModal 、wx.showLoading 、wx.setNavigationBarTitle 、wx.setNavigationBarColor
1. 交互

• wx.showToast-显示消息提示框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>
1
2

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    wx.showToast({
      title: '你好！',
      icon:"none"
    })
     },
1
2
3
4
5
6
7
8
9
10
11

效果图

• wx.showModal 显示模态对话框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>
1
2

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
   
    wx.showToast({
      title: '你好！',
      icon:"none"
    })
1
2
3
4
5
6
7
8
9
10
11

效果图

• wx.showLoading 显示 loading 提示框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>
1
2

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    
    // wx.showLoading 加载提示
    wx.showLoading({
      title: '加载中...',
    })
    setTimeout(()=>{
      wx.hideLoading();
    },2000)
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果图

2. 导航栏

• wx.setNavigationBarTitle 动态设置当前页面的标题
• wx.setNavigationBarColor 设置页面导航条颜色

//wxml代码
<button size="mini" bindtap="showTip">提示</button>
1
2

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    // setNavigationBarColor 设置导航栏的颜色
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果图

开放接口

1. wx.getUserProfile 用户信息

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

//wxml代码
<view class="title">开放能力</view>
<view>wx.getUserProfile 获取用户信息</view>
<view wx:if="{{userInfo.nickName}}">
  <image style="width: 100px; height: 100px;" src="{{userInfo.avatarUrl}}"></image>
  <view>{{userInfo.nickName}}</view>
</view> 
<button wx:else size="mini" bindtap="getUser">获取用户信息</button>
1
2
3
4
5
6
7
8

//js代码
 onLoad(options) {
    var sys = wx.getSystemInfoSync();
    console.log(sys);
    // 本地获取用户信息
    var userInfo = wx.getStorageSync('userInfo')||{};
    // 更新用户信息
    this.setData({userInfo})
  },
  getUser(){
    var that = this;
    wx.getUserProfile({
      desc: '需要获取您的昵称',
      success:res=>{
        console.log(res);
        // 更新本地用户信息
        that.setData({"userInfo":res.userInfo})
        // 存储用户信息到本地
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

end…
文章每一步都可以跳转到官方文档方便查找
切记熟悉官方问答最重要！！！
希望文章能帮到正在学习的您
下期见~