【小程序】微信小程序常用api的使用，附案例（建议收藏）

1- 前言

---

这是微信小程序常用的几个API，特地总结一下：

学会使用 微信官方文档 · 小程序

2- 界面

---

2.1 wx.setNavigationBarTitle() 标题栏文本

    wx.setNavigationBarTitle({
      title: '微信api',
    })
1
2
3

2.2 wx.showLoading() 加载提示 和 wx.hideLoading() 停止提示

    wx.showLoading({
      title: '我不会停的',
    })
   // 显示loading 提示框，需主动调用 wx.hideLoading才能关闭提示框
 	  setTimeout(() => {
      wx.hideLoading()
    }, 3000)
1
2
3
4
5
6
7

2.3 wx.showToast() 提示

   wx.showToast({
    title: '我要加载',
     icon:'loading'
    })
1
2
3
4

2.4 wx.showModal() 模态框对话框

 wx.showModal({
      title: '我是showModal',
      content: 'hahaha',
      // complete: (res) => {
      //   if (res.cancel) {
      //   }
      //   if (res.confirm) {
      //   }
      // }
    })
1
2
3
4
5
6
7
8
9
10

2.5 wx.setNavigationBarColor() 页面导航条颜色

wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ff6600',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
1
2
3
4
5
6
7
8

2.6 总结

• wxapi.wxml

<view>
  界面api
  <button> wx.setNavigationBarTitle() 标题栏文本button>
  <button> wx.showLoading() 加载提示button>
  <button> wx.hideLoading() 停止提示button>
  <button> wx.showToast() 提示button>
  <button> wx.showModal() 模态框button>
  <button type="primary" bindtap="showTip">提示button>
view>
1
2
3
4
5
6
7
8
9

• wxapi.js 代码

 showTip() {
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ff6600',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    wx.setNavigationBarTitle({
      title: '微信api',
    })
    // wx.showLoading({
    //   title: '我不会停的',
    // })
    // setTimeout(() => {
    //   wx.hideLoading()
    // }, 3000)
    // wx.showToast({
    //   title: '我要加载',
    //   icon:'loading'
    // })
    wx.showModal({
      title: '我是showModal',
      content: 'hahaha',
      // complete: (res) => {
      //   if (res.cancel) {
      //   }
      //   if (res.confirm) {
      //   }
      // }
    })
  },
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
28
29
30
31
32
33

• 界面

3- 用户头像

---

3.1 wx.getUserProfile() 获取用户信息

• wxapi.wxml

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

• wxapi.js

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

• 代码截图

4- 上传与下载

---

4.1 wx.downloadFile()下载文件

4.2 wx.saveImageToPhotosAlbum()保存图片到相册

在这里插入代码片
1

4.3 wx.uploadFile()上传文件

4.4 wx.chooseMedia()选择图片或者视频

4.5 上传图片

• wxapi.wxml

  <button>wx.downloadFile()下载文件button>
  <button> wx.saveImageToPhotosAlbum()保存图片到相册button>
  <button type="primary" bindtap="downImg">下载图片button>
  <view>
    <button bindtap="upImg">上传图片button>
  view>
1
2
3
4
5
6

• wxapi.js

  downImg() {
    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

• 案例截图

4.6 下载图片

• wxapi.wxml

<view>
    <button bindtap="upImg">上传图片button>
  view>
  <button>wx.uploadFile()上传文件button>
  <button>wx.chooseMedia()选择图片或者视频button>
  <image src="{{pic}}" module="aspectFill" bindtap="downImg" />
1
2
3
4
5
6

• wxapi.js

  upImg(){
    var that =this;
    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);
            console.log("为转换前",res.data)
              //转化为js对象
            var data=JSON.parse(res.data)
            console.log("转换后",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

• 代码截图

5- 系统信息

---

5.1 wx.getSystemInfo() 获取系统信息

  onLoad(options) {
    wx.getSystemInfo({
      success(res) {
        console.log(res)
      }
    })
 }
1
2
3
4
5
6
7

5.2 wx.getSysteminfoSync() 获取系统信息

statusBarHeight 状态栏高度
windowWidth 可用窗口的宽
windowHeight 可用窗口的高
safeArea 安全区域
model 手机型号
batteryLevel 电量
system 系统ios/android

wx.getSystemInfoAsync({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})
1
2
3
4
5
6
7
8
9
10
11

6- 网络请求

---

6.1 wx.request() 发起 HTTPS 网络请求

7- 路由

---

7.1 wx.navigateTo()跳转

7.2 wx.redirectTo()重定向

7.3 wx.switchTab() 切换底部栏

7.4 wx.navigateBack()返回

---

往期传送门

【微信小程序】小程序使用详细教程（建议收藏）