微信小程序开发实战教程课件

第6章常用API及组件微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标清楚微信小程序API的类型，熟悉界面交互API的使用了解地图的操作步骤熟悉表单组件，并获取表单项的值1236.1界面交互API微信小程序开发框架提供了丰富的原生API，可以方便地调用微信提供的功能，如获取用户信息、本地存储、支付等。约定以on开头的API，用来监听某个事件是否触发，如wx.onSocketOpen、wx.onCompassChange等。事件监听API用于实现一些简单的人机交互界面。界面交互API定以Sync结尾的API，如wx.setStorageSync、wx.getSystemInfoSync等。同步API大多数API是异步API，如wx.request、wx.login等。这类API通常会接收一个Object类型的参数。异步API6.1界面交互API【演练】熟悉常用界面交互API修改app.json文件，添加图中方框所示的代码。6.1界面交互APIview{padding:5px;}修改并保存p1.wxss文件，代码如下。6.1界面交互API保存并运行文件，运行结果如图所示。6.1界面交互API单击“模态对话框”按钮，如图所示。6.1界面交互API单击“消息提示框”按钮，如图所示。wx.showLoading({title:'加载中',})setTimeout(function(){wx.hideLoading()},2000)6.1界面交互API单击“loading提示框”按钮，如图所示。wx.showActionSheet({itemList:['A','B','C'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})6.1界面交互API单击“操作菜单”按钮，如图所示。wx.setNavigationBarTitle({title:'当前页面'})6.1界面交互API单击“动态设置当前页面的标题”按钮，如图所示，将标题设置为“当前页面”。wx.showTabBarRedDot({index:1})//wx.hideTabBarRedDot({//index:1//})6.1界面交互API单击“显示tabBar某项右上角红点”按钮，如图所示，底部导航中某标签页的右上方出现一个小红点。wx.setTabBarBadge({index:0,text:'10'})//wx.removeTabBarBadge({//index:0//})6.1界面交互API单击“为tabBar某项右上角添加文本”按钮，如图所示，底部导航中某标签页的右上方会出现一个数字角标。6.1界面交互API后续功能使用手机进行测试的效果更好。如图所示，单击“预览”按钮，进行扫描二维码预览，用手机上的微信扫描二维码。6.1界面交互API如图所示，确保打开调试。单击“相册选择图片或相机拍照”按钮，如图所示，可以继续选择“拍照”或“从手机相册选择”选项。6.1界面交互API/允许从相机和相册中扫码wx.scanCode({success(res){console.log(res)}})

//只允许从相机中扫码//wx.scanCode({//onlyFromCamera:true,//success(res){//console.log(res)//}//})单击“扫码”按钮，自行在手机上观察结果。该功能的代码如下。6.2地图操作【演练】实现常用地图操作修改并保存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>6.2地图操作<buttonbindtap='getLocation'>获取当前的地理位置、速度</button></view><view><buttonbindtap='moveToLocation'>将地图中心移动到当前定位点</button></view><view><buttonbindtap='includePoints'>缩放视野展示所有经纬度</button></view>6.2地图操作修改并保存p2.wxss文件，代码如下。view{padding:5px;}5G6.2地图操作保存并运行文件，使用手机进行测试。单击“预览”按钮，用手机上的微信扫描二维码。确保手机微信小程序打开调试。单击“打开地图选择位置”按钮，如图所示。6.2地图操作单击“获取当前的地理位置、速度”按钮，如图所示，在手机上单击“去这里”图标，将调用手机上的导航软件6.3常用组件常用组件是WXML的一些基本标签，如view、input等。在微信小程序中，很多标签带有自己的效果，可以实现一些简单的JS逻辑。一个微信小程序页面可以分解成多个组成部分，组件就是微信小程序页面的基本组成单元。为了让开发者快速进行开发，微信小程序的宿主环境中提供了一系列基础组件。组件在WXML模板文件声明中使用，WXML的语法和HTML语法相似，微信小程序使用标签名来引用一个组件，通常包含开始标签和结束标签，该标签的属性用来描述该组件。6.3常用组件【演练】熟悉常用组件修改p3.wxml文件，代码如下。<view><view><formcatchsubmit="formSubmit"catchreset="formReset"><view><view>switch</view><switchname="switch"/></view>6.3常用组件<view><view>radio</view><radio-groupname="radio"><label><radiovalue="radio1"/>选项一</label><label><radiovalue="radio2"/>选项二</label></radio-group></view><view><view>checkbox</view><checkbox-groupname="checkbox"><label>5G6.3常用组件<checkboxvalue="checkbox1"/>选项一</label><label><checkboxvalue="checkbox2"/>选项二</label></checkbox-group></view><view><view>slider</view><slidervalue="50"name="slider"show-value></slider></view>5G6.3常用组件<view><view>input</view><view><view><viewstyle="margin:30rpx0"><inputname="input"placeholder="这是一个输入框"/></view></view></view></view><view>5G6.3常用组件<buttonstyle="margin:30rpx0"type="primary"formType="submit">提交</button><buttonstyle="margin:30rpx0"formType="reset">重置</button></view></form></view></view>6.3常用组件修改p3.js文件，代码如下。Page({data:{},formSubmit(e){console.log('form发生了submit事件，携带数据为：',e.detail.val