第9章 小程序扩展应用
第9章小程序扩展应用
微信小程序可以用来帮助旅行者记录旅行中的点滴。开发者利用微信小程序的设备应用API实现访问设备摄像头和地理位置的功能，用户就
可以拍摄照片或视频，并记录下拍摄时的地理位置信息。另外，文件操作API让用户能够将照片和视频保存到小程序的本地存储中，方便随
时查看和分享。为了提供更好的用户体验，可以使用窗口API调整小程序页面的布局和样式，确保内容显示清晰、舒适，还可以使用微信运
动API，让用户能够记录旅行中的步行距离和消耗的热量，并与好友进行竞赛。综合这些功能，可以为旅行者打造一个便捷、有趣且互动性
强的微信小程序，让他们能够更好地记录和分享美好的旅行经历。
微信小程序提供了丰富的组件和API，仅一个完整的项目并不能把所有的组件和API都用到。本章介绍一些莫凡商城小程序没有用到的API，
包括设备应用API、文件操作API，这些接口可以用在不同的项目中。
9.1设备应用API
微信小程序提供设备应用相关的API，包括与获得系统信息、获取网络状态、加速度计、拨打电话、扫码、剪贴板、屏幕亮度等相关的API。
9.1.1 获得系统信息
微信小程序为获得系统信息提供了两个API：一个是异步获取系统信息的wx.get SystemInfo()，另一个是同步获取系统信息的
wx.getSystemInfoSync()。调用成功后的返回参数说明如表9.1所示。
表9.1 调用成功后的返回参数说明
参数说明
brand设备品牌
model手机型号，新机型刚推出一段时间会显示unknown，微信会尽快进行适配
pixelRatio设备像素比
screenWidth屏幕宽度，单位为px
screenHeight屏幕高度，单位为px
windowWidth可使用窗口宽度，单位为px
windowHeight可使用窗口高度，单位为px
statusBarHeight状态栏的高度，单位为px
language微信设置的语言
version微信版本号
system操作系统及版本
platform客户端平台，合法值有ios、android、windows、mac、 devtools
fontSizeSetting用户设备字体大小，单位为px。以微信App“我”→“设置”→“通用”→“字体大小”中的设置为准
SDKVersion客户端基础库版本
benchmarkLevel设备性能等级（仅Android小游戏）。取值为−2或0时，该设备无法运行小游戏；为−1时表示性能未知；≥1时，此值为设备性
能值。该值越高，设备性能越好，目前最高不到50
albumAuthorized允许微信使用相册的开关（仅iOS有效）
cameraAuthorized允许微信使用摄像头的开关
locationAuthorized允许微信使用定位的开关
microphoneAuthorized允许微信使用麦克风的开关
notificationAuthorized允许微信通知的开关
notificationAlertAuthorized允许微信通知带有提醒的开关（仅iOS 有效）
notificationBadgeAuthorized允许微信通知带有标记的开关（仅iOS有效）
notificationSoundAuthorized允许微信通知带有声音的开关（仅iOS有效）
phoneCalendarAuthorized允许微信使用日历的开关
bluetoothEnabled蓝牙的系统开关
locationEnabled地理位置的系统开关
wifiEnabledWi-Fi的系统开关
safeArea在竖屏正方向下的安全区域，合法值有left、right、top、 bottom、width、height
locationReducedAccuracytrue表示模糊定位，false表示精确定位（仅 iOS 支持）
theme系统当前主题，取值为light或dark，全局配置"darkmode":true 时才能获取，否则为undefined（不支持小游戏），合法值有dark、light
host当前小程序运行的宿主环境，合法值有appId
enableDebug是否已打开调试。可通过右上角菜单或 wx.setEnableDebug()打开调试
deviceOrientation设备方向，合法值有portrait（竖屏）、landscape（横屏）
使用wx.getSystemInfo()可以异步获取系统信息，示例代码如下：
Page({
onLoad:function(){
wx.getSystemInfo({
success: function(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.system)
console.log("客户端平台="+res.platform)
}
})
}
})
使用wx.getSystemInfoSync()可以同步获取系统信息，它是没有参数的，示例代码如下：
Page({
onLoad: function () {
try {
var res = wx.getSystemInfoSync()
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.system)
console.log("客户端平台=" + res.platform)
} catch (e) {
// Do something when catch error
}
}
})
9.1.2 获取网络状态
微信小程序使用wx.getNetworkType()来获取网络类型，网络类型分为 2g（2G网络）、3g（3G网络）、4g（4G网络）、wifi（Wi-Fi网络）、
unknown（Android系统中不常见的网络类型）、none（无网络）。
示例代码如下：
Page({
onLoad:function(){
wx.getNetworkType({
success:function(res){
// 返回网络类型2g、3g、4g、wifi等
var networkType = res.networkType;
console.log("网络类型 = "+networkType);
}
})
}
})
微信小程序使用wx.onNetworkStatusChange()监听网络状态变化事件，返回isConnected（当前是否有网络连接）、networkType（网络类
型）。调用wx.offNetworkStatusChange()可以取消监听网络状态变化事件。
示例代码如下：
wx.onNetworkStatusChange(function (res) {
console.log(res.isConnected)
console.log(res.networkType)
})
9.1.3 加速度计
微信小程序使用wx.onAccelerometerChange()来实现监听加速度计的数据，频率为5次/秒，具体参数说明如表9.2所示。使用
wx.offAccelerometerChange()可以取消监听加速度计的数据。
表9.2 wx.onAccelerometerChange()的参数说明
参数类型说明
Xnumberx轴
Ynumbery轴
Znumberz轴
示例代码如下：
Page({
onLoad: function () {
wx.onAccelerometerChange(function(res) {
console.log("x轴="+res.x)
console.log("y轴="+res.y)
console.log("z轴="+res.z)
})
}
})
微信小程序使用wx.startAccelerometer()来开始监听加速度计，使用 wx.stopAccelerometer()来停止监听加速度计。
9.1.4 拨打电话
微信小程序使用wx.makePhoneCall()来拨打电话，参数phonenumber 为需要拨打的电话号码。
示例代码如下：
wx.makePhoneCall({
phonenumber:'▓▓▓▓▓▓▓▓▓▓▓▓▓'
})
9.1.5 扫码
微信小程序使用wx.scanCode()来调取客户端扫码界面，扫码成功后返回对应的扫码结果，具体参数如表9.3所示。
表9.3 wx.scanCode()的参数说明
属性类型是否必填说明
onlyFromCameraboolean否指定是否只能用相机扫码，不允许从相册选择图片
scanTypearray.<string>否扫码类型：barCode为一维码、qrCode为二维码、datamatrix为Data Matrix码、pdf417为PDF417条码
successfunction是接口调用成功的回调函数，返回内容详见表9.4
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
success返回参数说明如表9.4所示。
表9.4 success返回参数说明
参数说明
result扫码的内容
scanType所扫的码的类型
charSet所扫的码的字符集
path当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的path
rawData原始数据，base64编码
示例代码如下：
wx.scanCode({
success: (res) => {
console.log(res)
}
})
9.1.6 剪贴板
微信小程序提供剪贴板功能，可以使用wx.setClipboardData()来设置剪贴板的内容，使用wx.getClipboardData()来获取剪贴板的内容。
示例代码如下：
Page({
onLoad: function () {
wx.setClipboardData({
data: '我是剪贴板内容',
complete: function (res) {
wx.getClipboardData({
success: function (res) {
console.log(res.data)
}
})
}
})
}
})
9.1.7 屏幕亮度
wx.setScreenBrightness()用来设置屏幕亮度，它有一个参数value，取值范围是0〜1，0代表最暗，1代表最亮；wx.getScreenBrightness()用
来获取屏幕的亮度；wx.setKeepScreenOn()用来设置是否保持常亮状态，仅在当前小程序生效，离开小程序后设置失效，它有一个参数
keepScreenOn，表示是否保持屏幕常亮；wx.onUserCaptureScreen()
用来监听用户主动截屏事件，用户使用系统截屏按键截屏时触发该监听事件，并且该监听事件只能注册一个；wx.offUserCaptureScreen()
用来取消监听用户主动截屏事件。
9.2文件操作API
微信小程序提供了针对文件操作的API，包括wx.saveFile()、 wx.getSaved FileList()、wx.get SavedFileInfo()、
wx.removeSavedFile()、wx.openDocument()、wx.getFileInfo()、 FileSystemManoger等。
9.2.1 保存文件到本地API
wx.saveFile()可以根据文件的临时路径将文件保存到本地，下次启动微信小程序的时候，仍然可以获取到该文件。如果是临时路径，下次启
动微信小程序的时候就无法获取到该文件。本地文件存储的大小限制为 10MB。wx.saveFile()可用来移动临时文件，因此调用成功后传入的
tempFilePath将不可用，参数tempFilePath为需要保存的文件的临时路径。
示例代码如下：
Page({
onLoad:function(){
wx.getImageInfo({
src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=49292017,
22064401&fm=28&gp=0.jpg ',
success: function (res) {
var path = res.path;
console.log("临时文件路径="+path);
wx.saveFile({
tempFilePath: path,
success: function(res){
var savedFilePath = res.savedFilePath;
console.log("本地文件路径="+savedFilePath);
}
})
}
})
}
})
将文件保存到本地后，会返回一个本地文件存储路径savedFilePath，根据这个路径可以访问或使用该文件。微信小程序下次启动的时候，
这个本地文件仍然存在。
9.2.2 获取本地文件列表API
wx.saveFile()可以将临时文件保存到本地，使之成为本地文件。用 wx.getSavedFileList()来获取本地文件列表，可以获取wx.saveFile()保
存的文件，调用成功后返回接口调用结果errMsg和文件列表fileList， fileList的说明如表9.5所示。
表9.5 fileList的说明
键类型说明
filePathstring文件的本地路径
createTimenumber文件保存时的时间戳，从1970年1月1日00꞉00꞉00到当前时间的秒数
sizenumber文件大小，单位为字节
示例代码如下：
Page({
onLoad:function(){
wx.getSavedFileList({
success: function(res) {
var fileList = res.fileList;
console.log(fileList)
for(var i=0;i<fileList.length;i++){
var file = fileList[i];
console.log("第"+(i+1)+"个文件:");
console.log("文件创建时间="+file.createTime);
console.log("文件大小="+file.size);
console.log("文件本地路径="+file.filePath);
}
}
})
}
})
9.2.3 获取本地文件信息API
wx.getSavedFileInfo()用于获取本地文件的文件信息，此接口只能用于已保存到本地的文件，若需要获取临时文件信息，需使用
wx.getFileInfo()接口。用wx.getSavedFileInfo()获取的本地指定路径的
文件信息包括文件的创建时间、文件大小及接口调用结果。
wx.getSavedFileInfo()的参数filePath表示文件路径。
示例代码如下：
Page({
onLoad:function(){
wx.getSavedFileList({
success: function(res) {
var fileList = res.fileList;
console.log(fileList)
var file = fileList[0];
wx.getSavedFileInfo({
filePath: file.filePath,
success: function(res){
console.log("文件创建时间="+res.createTime);
console.log("文件大小="+res.size);
console.log("接口调用结果="+res.errMsg);
}
})
}
})
}
})
9.2.4 删除本地文件API
wx.removeSavedFile()用来删除本地文件，参数filePath为需要删除的文件路径。示例代码如下：
Page({
onLoad:function(){
wx.getSavedFileList({
success: function(res) {
var fileList = res.fileList;
console.log(fileList)
var file = fileList[0];
wx.removeSavedFile({
filePath: file.filePath,
complete: function(res) {
console.log(res)
}
})
}
})
}
})
9.2.5 打开文档API
wx.openDocument()可以用来打开.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf等多种格式的文件，
wx.openDocument()的参数filePath为文件路径，可通过downloadFile()
获得。
示例代码如下：
Page({
onLoad:function(){
wx.downloadFile({
url:'http://▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓',
success:function (res) {
var filePath = res.tempFilePath
wx.openDocument({
filePath:filePath,
success:function (res) {
console.log('打开文件成功')
}
})
}
})
}
})
9.2.6 获取文件信息API
wx.getFileInfo()用来获取文件信息，参数filePath为本地文件路径、 digestAlgorithm为计算文件摘要的算法（如MD5算法、SHA1算法等），
返回值为size（文件大小），以字节为单位，digest按照传入的 digestAlgorithm计算得出文件摘要。
示例代码如下：
wx.getFileInfo({
success (res) {
console.log(res.size)
console.log(res.digest)
}
})
9.2.7 文件管理器API
微信小程序的FileSystemManager一个用于对小程序本地文件系统进行操作的文件管理器是API，它允许开发者进行文件的创建、读取、写
入、复制、移动、删除等各种文件管理操作。
通过FileSystemManager，开发者可以在小程序的本地文件系统中创建文件或文件夹，并可以指定存储路径、文件名、内容等相关参数。可
以使用writeFile()方法将数据写入指定文件，或使用appendFile()方法追加数据到已有文件。可以使用readFile()方法读取文件内容，并使用
readdir()方法获取指定目录下的文件列表。FileSystemManager还提供了copyFile()和rename()方法，用于复制文件和重命名文件，方便文件
的管理和操作。此外，还可以使用unlink()方法删除文件或使用rmdir()
方法删除文件夹。
FileSystemManager提供了丰富的文件操作方法，方便开发者在微信小程序中对本地文件系统进行各种管理和操作，从而实现更多的功能。
9.3项目实战：使用AI编程工具辅助实现图书分类
页面1
．任务目标
实现图书分类页面，学习手风琴式导航菜单切换设计的相关知识。
2．任务实施
（1）在app.json文件里添加图书分类页面路径 “pages/category/category”。
（2）把实现首页搜索区域的代码复制到图书分类页面中。
（3）打开通义灵码，输入以下内容并发送，如图9.1所示。
图9.1 发送需求
微信小程序实现图书分类页面，该页面分为左、右两部分，左边是菜单，被选中的菜单的背景色为灰色、左边框为橙色，右边是图书列
表，图书列表每行显示3本图书，每本图书分为两部分，上面是图书图片，大小为100px×100px，图片下面是图书名称，JS中使用假数据展
示。
3．AI生成
通义灵码根据需求生成了实现图书分类界面的代码，包括WXML布局、 WXSS及JS数据绑定。图9.2展示了通义灵码生成图书分类页面。
图9.2 通义灵码生成图书分类页面
4．优化建议
在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。
- 对需求进行更加细致的描述后再次进行生成，例如给出导航菜单的样
式等。
- 分模块进行生成，例如先完成左侧菜单模块内容，再完成图书列表内
容，最后把两部分内容整合到一起。
- 把生成的示例接口替换成真实接口，把假数据替换成接口返回的真实
数据，渲染到页面上。
- 根据自己的实际需求手动调整代码，保证页面样式美观。
5．页面展示
代码经过优化后，运行代码，页面样式如图9.3所示。
图9.3 图书分类页面
9.4项目实战：使用AI编程工具辅助实现图书分类
结果页面1
．任务目标
实现图书分类结果页面，巩固图书列表动态获取的相关知识。
莫凡商城小程序的图书分类结果页面用来显示图书分类二级导航菜单对应的结果列表，内容包括图书名称、作者、出版社、出版时间及价
格。
2．任务实施
（1）在app.json文件里添加图书分类结果页面路径 “pages/goodsList/goodsList”。
（2）把图书分类页面中的搜索部分代码复制到图书分类结果页面中。
（3）打开通义灵码，输入以下内容并发送，如图9.4所示。
图9.4 发送需求
微信小程序实现图书分类结果页面，点击图书分类页面中的某个分类，跳转到此页面，每个结果列表分为左右两部分，左边是图书封面
图，右边包括图书名称、作者、出版社、出版时间及价格，图书列表通过动态获取，只需要给出结果页面的实现代码。
3．AI生成
通义灵码根据需求生成了实现图书分类结果页面的代码，包括WXML布局、WXSS样式及JS数据绑定，如图9.5所示。
图9.5 通义灵码生成图书分类结果页面
4．优化建议
在运行AI生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。
- 当发现要实现的功能与之前的功能重合时，我们可以复用之前的代
码，如果有多处要用到这个功能，可以把这部分功能封装成组件以便使用，在小程序中封装组件可以通过AI编程工具进行实现。
- 把示例接口替换成真实的图书列表接口，把假数据改成真实接口返回
的数据。
- 根据自己的实际需求手动调整代码，如图书封面图与描述文字的间
距，不同描述文字的间距、大小、颜色等，保证页面美观。
5．页面展示
代码经过优化后，运行代码，页面样式如图9.6所示。
图9.6 图书分类结果页面
Copyright Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’.
License This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also
available with a FAQ at: http://scripts.sil.org/OFL SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 PREAMBLE The
goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be
shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided
that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any
other type of license. The requirement for fonts to remain under this license does not apply to any document created using the
fonts or their derivatives. DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this
license and clearly marked as such. This may include source files, build scripts and documentation. "Reserved Font Name"
refers to any names specified as such after the copyright statement(s). "Original Version" refers to the collection of Font
Software components as distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting, or substituting — in part or in whole — any of the
components of the Original Version, by changing formats or by porting the Font Software to a new environment. "Author" refers
to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION &
CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study,
copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following
conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by
itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software,
provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone
text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as
long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved
Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies
to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of
the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or
unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other
license. The requirement for fonts to remain under this license does not apply to any document created using the Font
Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE
FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL,
OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.