小程序云开发（十六）：小程序API实战

🔗 运行环境：小程序云开发

🚩 撰写作者：左手の明天

🥇 精选专栏：《python》

🔥 推荐专栏：《算法研究》

🔐#### 防伪水印——左手の明天 ####🔐

💗 大家好🤗🤗🤗，我是左手の明天！好久不见💗

💗今天更新小程序云开发💗

📆 最近更新：2024 年 04 月 26 日，左手の明天的第 327 篇原创博客

📚 更新于专栏：小程序开发

🔐#### 防伪水印——左手の明天 ####🔐

要使用JavaScript来实现小程序的具体的功能，除了要了解如何操作由不同的数据类型构成的实际数据以外，还需要掌握如何使用JavaScript适时的调用小程序封装好的API。编程语言的逻辑、数据以及API是小程序应用开发最核心的组成部分。

1 全局对象wx

wx是小程序的全局对象，用于承载小程序能力相关API。小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，了解网络状态等。大家可以在微信开发者工具的控制台Console里了解一下这个wx这个对象。

可以看到wx的所有属性和方法，如果对wx的哪个属性和方法不了解，可以查阅API技术文档。

2 控制台实战小程序API

开发者工具的console控制台除了可以用于运行测试JavaScript的代码外，还可以来运行测试小程序以及云开发的API。接下来我们会先来介绍一些能够实际看得到效果的接口，大家可以直接把代码输入到控制台查看效果，而每一个接口都在API技术文档里有介绍，建议实战与文档一起结合起来学习。

2.1、了解网络状态

wx.getNetworkType()接口可以用于获取小程序所在的手机当前的网络状态是WiFi、3G、4G、5G？这样的场景经常会有，比如播放视频音乐或玩一些游戏以及流量大图片时，如果网络处于非WiFi状态时就会有流量注意的提醒。

大家可以切换一下开发者工具的模拟器的网络，然后多次在控制台console输入以下代码查看有什么不同：

javascript">wx.getNetworkType({success(res) {console.log(res)}
});

2.2、获取设备信息

wx.getSystemInfo()可以用于获取用户手机的微信版本、操作系统及版本、屏幕分辨率、设备的型号与品牌、基础库版本等信息。

大家可以留意打印的res对象与使用res的点表示法访问具体属性有什么区别。接口返回的具体属性的含义则需要我们查阅技术文档来大致了解。

javascript">wx.getSystemInfo({success (res) {console.log("设备的所有信息",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)}
})

2.3、页面链接跳转

除了可以获取到用户、设备、网络等的信息，使用控制台来调用对象的方法也可以执行一些动作，比如页面跳转wx.navigateTo()的接口。前面我们在home页面的下面建了一个imgshow的二级页面，我们在控制台Console里输入：

javascript">wx.navigateTo({url: '/pages/home/imgshow/imgshow'
})

还可以在控制台直接调用wx.navigateBack()返回页面的上一层，在控制台里输入

javascript">wx.navigateBack({delta: 1
})

2.4、显示消息提示框

wx.showToast()接口可以来显示消息提示框，比如操作成功、操作失败等都需要给用户一个反馈，这个时候就需要调用这个接口，我们在console控制台打印一下，看看模拟器小程序的效果：

javascript">wx.showToast({title: '弹出成功',icon: 'success',duration: 1000
})

2.5、设置当前页面的标题

wx.setNavigationBarTitle()可以用来设置当前页面的标题。在我们实际生活中，会经常看到资讯、商品、博客有无数个新闻、商品、文章，打开不同的页面都会显示对应的标题，这个当然不会像静态页面一样写死，而都是用JavaScript来控制的，而小程序就会调用这个接口。

javascript">wx.setNavigationBarTitle({title: '控制台更新的标题'
})

2.6、打开文件选择器上传文件

调用wx.chooseImage()打开图片上传选择器，其实就已经可以将电脑上面的图片上传到小程序端，只是由于一个接口只干一件事情，上传的图片路径需要我们用其他函数来处理才行。

javascript">wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {const tempFilePaths = res.tempFilePaths}
})

2.7、控制台实战云开发API

在前面我们已经说过wx是小程序的全局对象，而在这个对象里的cloud属性也是一个对象，这个是用于承载云开发在小程序端的相关能力的API，我们仍然可以通过console控制台了解相关信息。

我们可以在控制台依次打印如下内容，至于具体的含义，大家可以通过以后章节的学习来了解：

javascript">wx.cloud
wx.cloud.database()
wx.cloud.database().command
wx.cloud.database().command.aggregate

小程序的这些API有的是返回数据（如网络状态、设备信息、用户信息等），有的是在小程序上出现交互（消息提示框、模态框、操作菜单、标题的设置），还有的需要传入一些参数等等。这一部分主要是让大家明白控制台Console的强大之处，以及通过控制台实战的方法对小程序API的运行机制有一个初步的了解。

3 API的可用性判断与权限

3.1、API的可用性

javascript">wx.canIUse('console.log')
wx.canIUse('CameraContext.onCameraFrame')
wx.canIUse('CameraFrameListener.start')
wx.canIUse('Image.src')// wx接口参数、回调或者返回值
wx.canIUse('openBluetoothAdapter')
wx.canIUse('getSystemInfoSync.return.safeArea.left')
wx.canIUse('getSystemInfo.success.screenWidth')
wx.canIUse('showToast.object.image')
wx.canIUse('onCompassChange.callback.direction')
wx.canIUse('request.object.method.GET')// 组件的属性
wx.canIUse('live-player')
wx.canIUse('text.selectable')
wx.canIUse('button.open-type.contact')

2.2、提前发起权限设置

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。

使用wx.authorize可以提前向用户发起授权请求，调用后会立刻弹窗询问用户是否同意授权小程序使用某项权限，如果用户之前已经同意授权，则不会出现弹窗，直接返回成功，这些权限有scope.userInfo是否允许获取用户信息，scope.record是否允许录音、scope.writePhotosAlbum是否允许保存到相册等等

javascript">wx.authorize({scope: 'scope.record',success () {// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问wx.startRecord()}
})

2.3、获取用户信息

wx.getUserInfo()接口可以用于获取微信用户的一些基本信息，比如头像、昵称、城市等等，常用与小程序的用户基础信息与社交场景。不过调用这个接口的前提是先要取得用户的授权，而且还不能通过wx.authorize({scope: "scope.userInfo"})的方式（因为不会弹出授权窗口），只能通过button的 open-type="getUserInfo"，方法如下：

新建一个页面，比如user，然后再在user.wxml里输入以下代码，点击按钮之后就会弹出授权弹窗，如果已经授权了，就不会有弹窗了：

<button open-type="getUserInfo">弹出授权弹窗</button>

当授权完成之后然后我们可以在控制台console里输入以下代码，看得到什么信息，点击开发者工具菜单里的”清缓存“的”全部清除“之后再输入看看什么效果：

javascript">wx.getUserInfo({success(res) {console.log(res);}
});

上面仅仅只是列举了很少一部分的API，小程序的API有数千个之多，用法也都不相同，因此在学习的时候，要善于查询技术文档。这些API也都是零散的，技术文档也做了一定的分门别类，开发一个实际的应用，这些API也并不会全部用到。

其实API本质上是一个个封装好了的函数，一个对象，除了可以在控制台调用它们之外，还可以通过事件机制来触发，后面会介绍点击事件、页面的生命周期等方法。