3.2 小程序API实战
要使用JavaScript来实现小程序的具体的功能，除了要了解如何操作由不同的数据类型构成的实际数据以外，还需要掌握如何使用JavaScript适时的调用小程序封装好的API。编程语言的逻辑、数据以及API是小程序应用开发最核心的组成部分。
3.2.1 全局对象wx
wx是小程序的全局对象，用于承载小程序能力相关API。小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，了解网络状态等。大家可以在微信开发者工具的控制台Console里了解一下这个wx这个对象。
wx
可以看到wx的所有属性和方法，如果你对wx的哪个属性和方法不了解，你可以查阅API技术文档。
3.2.2 控制台实战小程序API
开发者工具的console控制台除了可以用于运行测试JavaScript的代码外，还可以来运行测试小程序以及云开发的API。接下来我们会先来介绍一些能够实际看得到效果的接口，大家可以直接把代码输入到控制台查看效果，而每一个接口都在API技术文档里有介绍，建议实战与文档一起结合起来学习。
1、了解网络状态
wx.getNetworkType()接口可以用于获取小程序所在的手机当前的网络状态是WiFi、3G、4G、5G？这样的场景经常会有，比如播放视频音乐或玩一些游戏以及流量大图片时，如果网络处于非WiFi状态时就会有流量注意的提醒。
大家可以切换一下开发者工具的模拟器的网络，然后多次在控制台console输入以下代码查看有什么不同：
wx.getNetworkType({
success(res) { console.log(res)
}
});
2、了解用户信息
wx.getUserInfo()接口可以用于获取微信用户的一些基本信息，比如头像、昵称、城市等等，常用与小程序的用户基础信息与社交场景。不过调用这个接口的前提是先要取得用户的授权，而使用开发者工具创建云开发QuickStart小程序以及不使用云服务创建的Demo小程序项目都有获取用户头像的案例。
在模拟器的小程序能够显示你的头像的情况下，我们可以在控制台console里输入以下代码，看得到什么信息：
wx.getUserInfo({
success(res) { console.log(res);
}
});
3、 获取设备信息
wx.getSystemInfo()可以用于获取用户手机的微信版本、操作系统及版本、屏幕分辨率、设备的型号与品牌、基础库版本等信息。
大家可以留意打印的res对象与使用res的点表示法访问具体属性有什么区别。接口返回的具体属性的含义则需要我们查阅技术文档来大致了解。
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)
}
})
4、页面链接跳转
除了可以获取到用户、设备、网络等的信息，使用控制台来调用对象的方法也可以执行一些动作，比如页面跳转wx.navigateTo()的接口。前面我们在home页面的下面建了一个imgshow的二级页面，我们在控制台Console里输入：
wx.navigateTo({ url: '/pages/home/imgshow/imgshow' })
还可以在控制台直接调用wx.navigateBack()返回页面的上一层，在控制台里输入
wx.navigateBack({ delta: 1 })
5、显示消息提示框
wx.showToast()接口可以来显示消息提示框，比如操作成功、操作失败等都需要给用户一个反馈，这个时候就需要调用这个接口，我们在console控制台打印一下，看看模拟器小程序的效果：
wx.showToast({ title: '弹出成功', icon: 'success', duration: 1000 })
6、设置当前页面的标题
wx.setNavigationBarTitle()可以用来设置当前页面的标题。在我们实际生活中，会经常看到资讯、商品、博客有无数个新闻、商品、文章，打开不同的页面都会显示对应的标题，这个当然不会像静态页面一样写死，而都是用JavaScript来控制的，而小程序就会调用这个接口。
wx.setNavigationBarTitle({ title: '控制台更新的标题' })
7、打开文件选择器上传文件
调用wx.chooseImage()打开图片上传选择器，其实就已经可以将电脑上面的图片上传到小程序端，只是由于一个接口只干一件事情，上传的图片路径需要我们用其他函数来处理才行。
wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'],
success (res) { const tempFilePaths = res.tempFilePaths
}
})
8、控制台实战云开发API
在前面我们已经说过wx是小程序的全局对象，而在这个对象里的cloud属性也是一个对象，这个是用于承载云开发在小程序端的相关能力的API，我们仍然可以通过console控制台了解相关信息。
我们可以在控制台依次打印如下内容，至于具体的含义，大家可以通过以后章节的学习来了解：
wx.cloud
wx.cloud.database()
wx.cloud.database().command
wx.cloud.database().command.aggregate
小程序的这些API有的是返回数据（如网络状态、设备信息、用户信息等），有的是在小程序上出现交互（消息提示框、模态框、操作菜单、标题的设置），还有的需要传入一些参数等等。这一部分主要是让大家明白控制台Console的强大之处，以及通过控制台实战的方法对小程序API的运行机制有一个初步的了解。
上面仅仅只是列举了很少一部分的API，小程序的API有数千个之多，用法也都不相同，因此在学习的时候，要善于查询技术文档。这些API也都是零散的，技术文档也做了一定的分门别类，开发一个实际的应用，这些API也并不会全部用到。
其实API本质上是一个个封装好了的函数，一个对象，除了可以在控制台调用它们之外，还可以通过事件机制来触发，后面会介绍点击事件、页面的生命周期等方法。
发表评论：