程序基础实战 7

wx.showModalwx.showToastwx.showLoadingwx.chooseMediawx.scanCodemap/form第6章常用API及组件课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》学习目标第6章常用API及组件微信小程序提供了丰富的API与组件，助力开发者高效构建功能完善的轻应用。通过组件化搭建界面，配合API处理逻辑与数据，开发者可快速实现业务功能，降低开发成本。1了解微信小程序API的类型。2熟悉界面交互API的使用。3了解常用地图操作的实现方法。4熟悉常用组件。26.1

API类型及界面交互API的使用第6章常用API及组件微信小程序开发框架提供了丰富的原生API，使用这些API可以方便地调用微信提供的功能，如获取用户信息、本地存储、支付等。通常，微信小程序API有以下几种类型。（1）事件监听API：以on开头的API，用来监听某个事件是否触发，如wx.onSocketOpen、wx.onCompassChange等。这类API接收一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。（2）同步API：以Sync结尾的API，如wx.setStorageSync、wx.getStorageSync等。此外，也有其他的同步API，如wx.createWorker、wx.getBackgroundAudioManager等。同步API的运行结果可以通过函数返回值直接获取，如果运行出错，则会抛出异常。36.1

API类型及界面交互API的使用（续）第6章常用API及组件（3）异步API：大多数API是异步API，如wx.request、wx.login等。这类API通常会接收一个对象类型的参数。（4）界面交互API：用于实现一些简单的人机交互界面，主要包括wx.showModal、wx.showToast、wx.showLoading、wx.hideLoading、wx.showActionSheet、wx.setNavigationBarTitle、wx.showTabBarRedDot、wx.setTabBarBadge。这类API通常接收一个对象作为参数。对于以上4种API，事件监听API前面已经涉及，后面项目开发中将介绍同步API、异步API，本节主要介绍界面交互API。46.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。1打开第2章中完成的项目。2修改app.json文件，如图6-1所示。图6-1

修改app.json文件56.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。3修改并保存p1.wxml文件，代码如下。<view><buttonbindtap='showModal'>模态对话框</button></view><view><buttonbindtap='showToast'>消息提示框</button></view><view><buttonbindtap='showLoading'>loading提示框</button></view><view><buttonbindtap='showActionSheet'>操作菜单</button></view><view><buttonbindtap='setNavigationBarTitle'>动态设置当前页面的标题</button>66.1

API类型及界面交互API的使用（续）第6章常用API及组件（3）p1.wxml文件（续）</view><view><buttonbindtap='showTabBarRedDot'>显示tabBar某项右上角的红点</button></view><view><buttonbindtap='setTabBarBadge'>为tabBar某项右上角添加文本</button></view><view><buttonbindtap='chooseImage'style="background-image:url({{viewBg}})

;">相册选择图片或相机拍照</button></view><view><buttonbindtap='scanCode'style="background-image:url({{viewBg}})

;">扫码</button></view>4修改并保存p1.wxss文件，代码如下。view{padding:5px;}76.1

API类型及界面交互API的使用（续）第6章常用API及组件（5）修改并保存p1.js文件，代码如下。仅保留9个按钮处理函数，生命周期函数省略。（第1／2段）Page({data:{viewBg:''},showModal:function(){wx.showModal({title:'提示',content:'这是一个模态弹窗',success(res){if(res.confirm){console.log('用户单击“确定”按钮')}elseif(res.cancel){console.log('用户单击“取消”按钮')}}})},showToast:function(){wx.showToast({title:'成功',icon:'success',duration:2000})},showLoading:function(){wx.showLoading({title:'加载中',})setTimeout(function(){wx.hideLoading()},2000)},showActionSheet:function(){wx.showActionSheet({itemList:['A','B','C'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})},setNavigationBarTitle:function(){wx.setNavigationBarTitle({title:'当前页面'})},86.1

API类型及界面交互API的使用（续）第6章常用API及组件（5）p1.js文件（续）。仅保留9个按钮处理函数，生命周期函数省略。（第2／2段）showTabBarRedDot:function(){wx.showTabBarRedDot({index:1})//wx.hideTabBarRedDot({//

index:1//})},setTabBarBadge:function(){wx.setTabBarBadge({index:0,text:'10'})//wx.removeTabBarBadge({//

index:0//})},chooseImage:function(){var_self=this;wx.chooseImage({count:1,sizeType:['original','compressed'],sourceType:['album','camera'],success(res){//tempFilePaths可以作为img标签的src属性来显示图片consttempFilePaths=res.tempFilePaths;_self.setData({viewBg:tempFilePaths})}})},scanCode:function(){//允许从相机和相册中扫码wx.scanCode({success(res){console.log(res)}})//只允许从相机中扫码//wx.scanCode({//

onlyFromCamera:true,//

success(res){//

console.log(res)//

}//})},})96.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。6保存并运行文件，运行结果如图6-2所示。7单击“模态对话框”按钮，结果如图6-3所示。图6-2

运行结果图6-3

模态对话框106.1

API类型及界面交互API的使用（续）第6章常用API及组件（7）该功能的代码如下。wx.showModal({title:'提示',content:'这是一个模态弹窗',success(res){if(res.confirm){console.log('用户单击“确定”按钮')}elseif(res.cancel){console.log('用户单击“取消”按钮')}}})单击“确定”按钮或“取消”按钮，在控制台中观察运行结果。可通过res.confirm字段判断用户单击的是“确定”按钮还是“取消”按钮，从而执行相应的业务逻辑。116.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。8单击“消息提示框”按钮，结果如图6-4所示。该功能的代码如下。wx.showToast({title:'成功',icon:'success',duration:2000})图6-4

消息提示框其中，icon为通知图标，duration为通知持续时间，其单位为毫秒。126.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。9单击“loading提示框”按钮，结果如图6-5所示。该功能的代码如下。wx.showLoading({title:'加载中',})setTimeout(function(){wx.hideLoading()},2000)图6-5

loading提示框这里将加载和隐藏功能的实现代码写在了一起，可根据具体业务逻辑组织相应代码。136.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。10单击“操作菜单”按钮，结果如图6-6所示。该功能的代码如下。wx.showActionSheet({itemList:['A','B','C'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})图6-6

操作菜单选择操作菜单中的某一项，在控制台中观察结果，可看到选择的选项的索引号。实现具体业务时，可利用res.tapIndex字段判断用户选择了哪个选项。146.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。11单击“动态设置当前页面的标题”按钮，结果如图6-7所示，将标题设置为“当前页面”。该功能的代码如下。wx.setNavigationBarTitle({title:'当前页面'})图6-7

动态设置当前页面的标题156.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。12单击“显示tabBar某项右上角的红点”按钮，结果如图6-8所示，底部导航中某标签页的右上角会出现一个小红点。该功能的代码如下。wx.showTabBarRedDot({index:1})//wx.hideTabBarRedDot({//

index:1//})图6-8

显示tabBar某项右上角的红点其中，index表示底部导航的索引号（从0开始），如果需要隐藏该项右上角的红点，则使用注释部分的代码。166.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。13单击“为tabBar某项右上角添加文本”按钮，结果如图6-9所示，底部导航中某标签页的右上角会出现一个数字角标。该功能的代码如下。wx.setTabBarBadge({index:0,text:'10'})//wx.removeTabBarBadge({//

index:0//})图6-9

为tabBar某项右上角添加文本其中，index表示底部导航的索引号（从0开始），如果需要隐藏该项右上角的文本，则使用注释掉的代码。176.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。14后续功能使用手机进行测试效果更好。如图6-10所示，单击“预览”按钮，用手机扫描二维码进行预览。15如图6-11所示，确保打开调试模式。图6-10

扫描二维码进行预览图6-11

打开调试模式186.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。16单击“相册选择图片或相机拍照”按钮，结果如图6-12所示，可以继续选择“拍照”或从手机相册选择“选项。该功能的代码如下。var_self=this;wx.chooseMedia({count:1,sizeType:['original','compressed'],sourceType:['album','camera'],success(res){//tempFilePaths变量作为img标签的src属性来显示图片consttempFilePaths=res.tempFilePaths[10].tempFilePath;_self.setData({viewBg:tempFilePaths})}})图6-12

从相册选择图片或用相机拍照其中，setData()中的变量viewBg保存了图片文件路径。196.1

API类型及界面交互API的使用（续）第6章常用API及组件【演练6.1】熟悉常用界面交互API。17单击“扫码”按钮，在手机上观察结果。该功能的代码如下。//允许从相机和相册中扫码wx.scanCode({success(res){console.log(res)}})//只允许从相机中扫码//wx.scanCode({//

onlyFromCamera:true,//

success(res){//

console.log(res)//

}//})206.2

地图操作第6章常用API及组件【演练6.2】实现常用地图操作。1修改并保存p2.wxml文件，代码如下。<mapid="myMap"longitude="113.324520"latitude="23.099994"scale="14"controls="{{controls}}"bindcontroltap="controltap"markers="{{markers}}"bindmarkertap="markertap"polyline="{{polyline}}"bindregionchange="regionchange"show-locationstyle="width:100%;height:300px;"></map><view><buttonbindtap='chooseLocation'>打开地图选择位置</button></view><view><buttonbindtap='getLocation'>获取当前的地理位置、速度</button></view><view><buttonbindtap='moveToLocation'>将地图中心移动到当前定位点</button></view><view><buttonbindtap='includePoints'>缩放视野展示所有经纬度</button></view>216.2

地图操作（续）第6章常用API及组件2修改并保存p2.wxss文件，代码如下。view{padding:5px;}3修改并保存p2.js文件，代码如下。（第1／4段）226.2

地图操作（续）第6章常用API及组件（3）修改并保存p2.js文件，代码如下。（第1／4段）Page({/***页面的初始数据*/data:{markers:[{iconPath:'/images/cpyj.jpg',id:0,latitude:23.099994,longitude:113.324520,width:50,height:50}],polyline:[{points:[{longitude:113.3245211,latitude:23.10229},{longitude:113.324520,latitude:23.21229}],color:'#FF0000DD',width:2,dottedLine:true}],controls:[{id:1,iconPath:'/images/cxfw.jpg',position:{left:0,top:300-50,width:50,height:50},clickable:true}]},regionchange(e){console.log(e.type)},236.2

地图操作（续）第6章常用API及组件（3）修改并保存p2.js文件，代码如下。（第2／4段）markertap(e){console.log(e.markerId)},controltap(e){console.log(e.controlId)},chooseLocation:function(){var_this=this;wx.chooseLocation({success:function(res){console.log(res)},complete(r){console.log(r)}})},getLocation:function(){wx.getLocation({type:'gcj02',//gcj02返回可用于wx.openLocation的坐标若设置为wgs84则返回GPS坐标success(res){constlatitude=res.latitudeconstlongitude=res.longitudeconstspeed=res.speedconstaccuracy=res.accuracywx.openLocation({latitude,longitude,scale:18})}})},/***生命周期函数——监听页面加载*/onLoad:function(options){},/**246.2

地图操作（续）第6章常用API及组件（3）修改并保存p2.js文件，代码如下。（第3／4段）*生命周期函数——监听页面初次渲染完成*/onReady:function(){this.mapCtx=wx.createMapContext('myMap')},moveToLocation:function(){this.mapCtx.moveToLocation()},includePoints:function(){this.mapCtx.includePoints({padding:[10],points:[{latitude:23.10229,longitude:113.3345211,},{latitude:23.00229,longitude:113.3345211,}]})}})256.2

地图操作（续）第6章常用API及组件【演练6.2】实现常用地图操作。4保存并运行文件，使用手机进行测试。单击“预览”按钮，用手机上的微信扫描二维码进行预览。5确保手机微信小程序打开了调试模式。后续步骤需在手机微信中完成，请先确认已打开调试模式，再依次单击页面上的按钮观察运行结果。266.2

地图操作（续）第6章常用API及组件【演练6.2】实现常用地图操作。6单击“打开地图选择位置”按钮，结果如图6-13所示。7单击“获取当前的地理位置、速度”按钮，结果如图6-14所示，在手机上单击“去这里”图标，将调用手机上的导航软件。图6-13

打开地图选择位置图6-14

获取当前的地理位置、速度276.2

地图操作（续）第6章常用API及组件【演练6.2】实现常用地图操作。8单击“将地图中心移动到当前定位点”按钮，观察运行结果。9单击“缩放视野展示所有经纬度”按钮，观察运行结果。通过wx.createMapContext('myMap')获取地图上下文后，调用moveToLocation()可将地图中心移动到当前定位点；调用includePoints()可缩放视野以展示传入的所有经纬度。286.3

常用组件第6章常用API及组件常用组件是WXML提供的一些基本标签，如view、input等。在微信小程序中，这些标签不仅带有自身的效果，还能通过简单的JS逻辑实现更多功能。为了让开发者快速进行开发，微信小程序的宿主环境提供了一系列基础组件。这些组件是微信小程序页面的基本组成单元，可以将一个页面分解成多个组成部分。组件在WXML模板文件中以声明方式使用，WXML的语法与HTML的语法相似。微信小程序通过标签名来引用组件，通常包含开始标签和结束标签，标签的属性用于描述该组件。实际上，前面已经使用了部分组件，接下来将学习一些常用组件。【演练6.3】熟悉常用组件。296.3

常用组件（续）第6章常用API及组件【演练6.3】熟悉常用组件。1修改p3.wxml文件，代码如下。（第1／4段）<view><view><formcatchsubmit="formSubmit"catchreset="formReset"><view><view>switch</view><switchname="switch"/></view><view><view>radio</view><radio-groupname="radio"