第5章API应用案例（上）【案例1】用户登录【案例3】天气预报查询【案例2】个人中心【案例4】查看附近的美食餐厅学习目标掌握小程序网络请求服务器数据方法了解小程序位置信息、设备应用API的使用掌握登录、交互反馈、分享API的用法了解腾讯地图SDK用法掌握掌握4123了解目录5.35.25.15.4【案例3】天气预报查询【案例4】查看附近的美食餐厅【案例2】个人中心【案例1】用户登录?点击查看本节相关知识点?点击查看本节相关知识点?点击查看本节相关知识点?点击查看本节相关知识点知识架构5.1【案例1】用户登录14实现用户登录案例分析2前导知识3搭建开发者服务器知识架构5.1【案例1】用户登录5检查用户是否已经登录76获取用户信息开放数据校验与解密知识架构5.2【案例2】个人中心1案例分析2前导知识3实现底部标签页切换4编辑个人资料知识架构5.2【案例2】个人中心5订单物流查询76选择收货地址客服联系电话知识架构5.3【案例3】天气预报查询1案例分析2前导知识3动态获取输入的城市名54渲染界面展示数据请求天气接口数据知识架构5.4【案例4】查看附近的美食餐厅1案例分析2前导知识3设计地图界面54视野变化获取中心点坐标单击控件回到中心点5.1【案例1】用户登录1案例分析用户登录是微信小程序必不可少的环节，一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。已登录示例未登录示例5.1【案例1】用户登录2前导知识小程序通过微信官方提供的，获取微信提登录能力供的用户身份标识，建立用户体系。用户登录流程时序图（右图所示）：5.1【案例1】用户登录2前导知识用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与，下面介绍这3个角色的作用：小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的身份信息。开发者服务器：小程序的后端服务器，用于为小程序用户提供服务。微信接口服务：微信为开发者服务器提供的接口。5.1【案例1】用户登录2前导知识登录流程具体细节：小程序获取code。小程序将code发送给开发者服务器。开发者服务器通过微信接口服务校验登录凭证。开发者服务器自定义登录态。5.1【案例1】用户登录2前导知识数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数据缓存API如下表所示：方式名称说明异步wx.setStorage()将数据存储在本地缓存中指定的key中wx.getStorage()从本地缓存中异步获取指定key的内容wx.getStorageInfo()异步获取当前storage的相关信息wx.removeStorage()从本地缓存中移除指定key同步wx.setStorageSync()wx.setStorage()的同步版本wx.getStorageSync()wx.getStorage()的同步版本wx.getStorageInfoSync()wx.getStorageInfo()的同步版本wx.removeStorageSync()wx.removeStorage()的同步版本5.1【案例1】用户登录2前导知识保存数据缓存示例代码如下：//保存数据缓存wx.setStorage({key:''key'', //本地缓存中指定的keydata:''value'', //需要存储的内容（支持对象或字符串）success:res=>{},//接口调用成功的回调函数 fail:res=>{} //接口调用失败的回调函数})5.1【案例1】用户登录2前导知识获取缓存数据示例代码如下：//获取数据缓存wx.getStorage({key:''key'', //本地缓存中指定的keysuccess:res=>{ //接口调用成功的回调函数console.log(res.data)},fail:res=>{} //接口调用失败的回调函数})5.1【案例1】用户登录3搭建开发者服务器本节选择使用Node.js搭建开发者服务器，安装Node.js，创建项目：初始化项目，将会自动创建package.json配置文件。npminit–y安装Express框架和request模块。npminstallexpress–savenpminstallrequest--save安装nodemon监控文件修改（如果已经安装则跳过此步）。npminstallnodemon-g5.1【案例1】用户登录3搭建开发者服务器执行上述命令后，在项目目录下创建index.js文件，编写代码如下：引入Express框架和request模块，配置appid和secret。constexpress=require(''express'')constbodyParser=require(''body-parser'')constrequest=require(''request'')constapp=express()app.use(bodyParser.json())constwx={appid:'''', //需要填写开发者的AppIDsecret:'''' //需要填写开发者的AppSecret}5.1【案例1】用户登录3搭建开发者服务器模拟数据库。vardb={ //模拟数据库session:{}, //保存openid和session_key的会话信息user:{} //保存用户记录，如用户名、积分等数据}5.1【案例1】用户登录3搭建开发者服务器请求登录接口，校验登录凭证的微信接口URL地址。app.post(''/login'',(req,res)=>{varurl=''https://api.weixin.qq.com/sns/jscode2session?appid=''+wx.appid+''&secret=''+wx.secret+''&js_code=''+req.body.code+''&grant_type=authorization_code''request(url,(err,response,body)=>{if(){//此处代码判断session.openid是否存在}}res.json({token:token})})})5.1【案例1】用户登录3搭建开发者服务器处理判断语句代码。if(session.openid){varsession=JSON.parse(body)//用于生成tokenvartoken=''token_''+newDate().getTime()db.session[token]=session}5.1【案例1】用户登录3搭建开发者服务器暴露对外访问接口地址。app.listen(3000,()=>{console.log(''serverrunningathttp://127.0.0.1:3000'')})5.1【案例1】用户登录3搭建开发者服务器保存上述代码后，执行如下命令，启动开发者服务器。nodemonindex.js5.1【案例1】用户登录4实现用户登录创建一个空白项目，在app.js文件中编写代码，实现小程序启动时自动执行登录操作。login:function(){wx.login({success:res=>{console.log(''logincode:''+res.code)wx.request({//请求login登录接口})}})},5.1【案例1】用户登录4实现用户登录请求login登录接口。url:''http://127.0.0.1:3000/login'',method:''post'',data:{code:res.code},success:res=>{console.log(''token:''+res.data.token)//将token保存为公共数据（用于在多页面中访问）this.globalData.token=res.data.token//将token保存到数据缓存（下次打开小程序无需重新获取token）wx.setStorage({key:''token'',data:res.data.token})}5.1【案例1】用户登录4实现用户登录执行上述代码，控制台中打印出logincode和token的值。在开发者服务器的控制台中，打印出logincode和session的值。5.1【案例1】用户登录5检查用户是否已经登录值得一提判断数据缓存中是否存在token如果存在，取出数据缓存中的token值，不用再执行登录操作。需要注意的是，token有可能会过期，需要重新登录，这就需要从数据缓存中取出token后，先验证token是否过期，再使用token。5.1【案例1】用户登录5检查用户是否已经登录进入app.js中编写checkLogin()函数，判断token是否存在。checkLogin:function(callback){vartoken=this.globalData.tokenif(!token){token=wx.getStorageSync(''token'')//从数据缓存中获取tokenif(token){this.globalData.token=token}else{callback({is_login:false})return}}//如果token存在，请求服务器，判断是否有效}5.1【案例1】用户登录5检查用户是否已经登录如果token存在，判断token是否有效。wx.request({url:''http://127.0.0.1:3000/checklogin'',data:{token:token},success:res=>{callback({is_login:res.data.is_login})}})5.1【案例1】用户登录5检查用户是否已经登录修改app.js中onLaunch()函数，用于在小程序启动后检查用户是否已经登录，如果没有登录则执行登录操作。onLaunch:function(){this.checkLogin(res=>{console.log(''is_login:'',res.is_login)if(!res.is_login){this.login()}})}5.1【案例1】用户登录6获取用户信息获取用户信息的两种常用方式如下：使用组件的方式。单击按钮提示授权的方式。5.1【案例1】用户登录6获取用户信息使用组件来获取特点：不需要用户授权，可以直接显示用户的头像、昵称、性别等，适合只用来展示信息的情况。//示例代码：5.1【案例1】用户登录6获取用户信息单击按钮提示授权的方式用法：如果“!hasUserInfo”值为true，表示没有获取到用户信息，显示“获取头像昵称”按钮；如果值为false，则将用户信息显示在页面中。index.wxml获取头像昵称5.1【案例1】用户登录6获取用户信息index.jsdata:{userInfo:{},hasUserInfo:false},getUserInfo:function(e){if(e.detail.userInfo){this.setData({userInfo:e.detail.userInfo,hasUserInfo:true})}}5.1【案例1】用户登录6获取用户信息用法：在app.js文件的onLaunch()函数中，编写如下代码，在下次启动时判断是否已经授权。wx.getSetting({success:res=>{if(res.authSetting[''scope.userInfo'']){wx.getUserInfo({//表示用户已经授权，可以直接获取到用户信息success:res=>{this.globalData.userInfo=res.userInfo} //将res.userInfo保存到公共数据中，以便在其他页面可以调用})}}})5.1【案例1】用户登录6获取用户信息用法：在app.js文件的globalData中增加userInfo，编写如下代码。globalData:{userInfo:null, //增加代码token:null}调用：在其他页面通过app.globalData.userInfo获取到用户信息。5.1【案例1】用户登录7开放数据校验和解密使用场景：开发者服务器想要获取用户信息，需要在小程序端通过wx.request()请求来获取。使用弊端：无法辨别数据的真伪。解决办法：利用小程序提供的开放数据的校验和解密机制。5.2【案例2】个人中心1案例分析个人中心案例设计了两个标签页，“首页”展示个人的基本信息及简单的自我介绍；“个人中心”底部标签页任务需求如下：展示个人资料：展示头像、昵称、性别等信息。订单物流查询：输入订单号和快递公司查询物流信息。选择收货地址：调用开放接口，访问系统收货地址，进行选择。客服联系电话：调用开放接口，访问通讯录，拨打客服电话。5.2【案例2】个人中心1案例分析个人中心案例设计了两个标签页，通过这两个标签页来实现页面之间的跳转。任务需求如下：实现标签页与标签页之间的跳转实现标签页与非标签页之间的跳转。实现非标签页与非标签页之间的跳转5.2【案例2】个人中心1案例分析页面效果图：首页个人中心页面5.2【案例2】个人中心2前导知识wx.switchTab（只能跳转到tabBar页面，并关闭其他所有非tabBar页面）wx.switchTab常用属性属性类型说明urlstring需要跳转的tabBar页面的路径（app.json中tabBar字段定义的页面），路径后不能带参数successfunction接口调用成功的回调函数failfunction接口调用失败的回调函数completefunction接口调用结束的回调函数（成功、失败都会执行）5.2【案例2】个人中心2前导知识wx.navigateTo（跳转到应用内的某个页面，且保留当前页面）wx.redirectTo（跳转到应用内的某个页面，且关闭当前页面）wx.navigateTo、wx.redirectTo常用属性属性类型说明urlstring需要跳转的非tabBar页面的路径，路径后可以带参数successfunction接口调用成功的回调函数failfunction接口调用失败的回调函数completefunction接口调用结束的回调函数（成功、失败都会执行）5.2【案例2】个人中心2前导知识wx.reLaunch（关闭所有页面，打开到应用内的某个页面。既能跳转到标签页，又能跳转到非标签页）wx.chooseImage()从本地相册选择图片或使用相机拍照wx.chooseAddress()调起用户编辑收货地址原生界面wx.makePhoneCall()调起用户通讯录，拨打电话5.2【案例2】个人中心3实现底部标签页切换在“首页”中单击头像上方提示语“点我跳转”，进入到“个人中心页面”；这两个页面都属于tabBar页面，所以使用wx.swichTab或者wx.reLaunch方式。在app.js文件，配置tabBar在index.wxml文件，为头像绑定changeImage()函数在index.js文件，编写changeImage()函数//第一种方式：只能跳转到tabbar页面wx.switchTab({url:''/pages/person/person‘})//第二种方式：可以跳转到tabbar或者非tabbar页面wx.reLaunch({url:''/pages/person/person‘})5.2【案例2】个人中心4编辑个人资料进入详情页person.wxml个人资料person.jsinfo:function(e){//第一种方式：保留当前页面，点击页面左上角箭头，返回上一个页面wx.navigateTo({url:''../detail/detail''})//第二种方式：关闭当前页，左上角没有返回箭头，不能返回上一个页面wx.redirectTo({url:''/pages/detail/detail'',})}5.2【案例2】个人中心4编辑个人资料上传头像detail.wxmldetail.jswx.chooseImage({count:1,sizeType:[''original'',''compressed''],sourceType:[''album'',''camera''],success(res){this.setData({imgUrl:res.tempFilePaths})}})5.2【案例2】个人中心4编辑个人资料进入修改资料详情页单击“修改资料按钮”detail.wxml修改资料detail.jsdata:{},onLoad:function(options){}}jump:function(e){wx.navigateTo({url:''/pages/modify/modify?username=''+encodeURIComponent(this.data.username)+''&gender=''+encodeURIComponent(this.data.gender)})}5.2【案例2】个人中心4编辑个人资料进入个人资料修改页提交表单modify.wxml…//此处填写需要修改的姓名、性别信息保存modify.jsformSubmit:function(e){……获取表单数据formData、当前页面栈pages、获取上一个页面对象prevPageprevPage.setData({//把数据存到上一个页面中})wx.navigateBack()//返回到上一个页面}5.2【案例2】个人中心5订单物流查询在本任务中，将会实现订单物流查询功能，在“个人中心”页单击“订单物流查询”跳转到pages/order/order“订单查询”页面。功能需求如下：选择快递公司。输入运单号。单击查询按钮，在页面下方展示物流信息。5.2【案例2】个人中心5订单物流查询person.wxml订单物流查询person.jsorder:function(e){//保留当前页面，跳转到应用内的订单查询页面wx.redirectTo({url:''/pages/order/order'',})}5.2【案例2】个人中心5订单物流查询order.wxml查询5.2【案例2】个人中心5订单物流查询order.jsnoInput:function(e){this.setData({no:e.detail.value})}companyInput:function(e){this.setData({index:e.detail.value})}search:function(){wx.request({})}5.2【案例2】个人中心6选择收货地址在本任务中，将会实现选择收货地址功能，在“个人中心”页单击“选择收货地址”跳转到pages/address/address“收货地址”页面。功能需求如下：单击“获取收货地址”按钮，进行地址选择。在收货地址表单中会渲染数据。5.2【案例2】个人中心6选择收货地址person.jsperson.wxmladdress:function(e){//保留当前页面，跳转到应用内的选择收货地址页面wx.redirectTo({url:''../address/address''})}选择收货地址5.2【案例2】个人中心6选择收货地址address.wxml{{addressInfo.userName}}{{addressInfo.postalCode}}{{addressInfo.provinceName}}{{addressInfo.cityName}}{{addressInfo.countyName}}……表单数据5.2【案例2】个人中心7客服联系电话在本任务中，将会实现拨打电话功能。功能需求如下：在“个人中心”页单击“客服联系方式”。绑定拨打电话事件。调用拨打电话API（wx.makePhoneCall）。5.2【案例2】个人中心7客服联系电话person.wxml客服联系方式person.jscontact:function(e){//调用拨打电话APIwx.makePhoneCall({phoneNumber:''''//该电话号码为模拟数据})}5.3【案例3】天气预报查询1案例分析天气查询小程序，可以查询今日的天气状况，实时温度等信息。功能需求如下：设置input输入框，在搜索框中输入要查询的城市名称。设置button按钮，单击搜索图标调用接口进行查询。将查询数据展示在页面中。5.3【案例3】天气预报查询2前导知识wx.request发起HTTPS网络请求，一个小程序，同时只能有5个网络请求连接//示例代码wx.request({url:''test.php'',//仅为示例，并非真实的接口地址data:{x:'''',y:''''},header:{''content-type'':''application/json''//默认值},success(res){console.log(res.data)}})5.3【案例3】天气预报查询3动态获取输入的城市名weather.wxmlweather.js//定义城市、天气、温度、风级、图片,日期参数vardefaultcity,getweather,gettemp,getwind,getpic,getdatePage({bindKeyInput:function(e){defaultcity=e.detail.value},})5.3【案例3】天气预报查询4请求天气接口数据weather.wxmlweather.js//搜索城市search:function(e){wx.request({ …//接口请求})}5.3【案例3】天气预报查询5渲染界面展示数据weather.wxml{{city}}{{date}}{{weather}}{{temp}}{{wind}}5.4【案例4】查看附近美食餐厅1案例分析该案例使用腾讯地图SDK，配合地图组件和API进行调用，实现查看附近的美食餐厅小程序。功能需求如下：初始化地图组件。单击banner图跳转到优惠券页面。触发图标回到中心点位置。页面中用图标标记搜索到的附近餐厅。5.4【案例4】查看附近美食餐厅1案例分析页面效果图：跳转优惠券页面初始化地图组件5.4【案例4】查看附近美食餐厅2前导知识腾讯地图SDK接入。申请开发者密钥。下载微信小程序JavaScriptSDK。登录微信公众平台，设置request合法域名。引入SDK核心代码。5.4【案例4】查看附近美食餐厅2前导知识wx.getSystemInfo()获取设备的高度和宽度，示例代码如下：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.platform)//客户端平台}})5.4【案例4】查看附近美食餐厅2前导知识markers标记点，示例代码如下：markers:{iconPath:"/resources/others.png",//图标资源路径id:0,latitude:23.099994,//纬度longitude:113.324520,//经度width:50,//图标宽度height:50//图标高度}5.4【案例4】查看附近美食餐厅2前导知识controls?地图显示控件，示例代码如下：controls:[{id:1,//在控件点击事件回调返回此idiconPath:‘'',//图标路径资源position:{//控件相当于地图的定位left:0,//默认为0top:10,//默认为0width:375,//默认为图片宽度height:71},//默认为图片高度clickable:true//为true可以点击}]5.4【案例4】查看附近美食餐厅3设计地图界面map.wxml5.4【案例4】查看附近美食餐厅3设计地图界面map.jsvarQQMapWX=require(''../libs/qqmap-wx-jssdk.js'')Page({?qqmapsdk:newQQMapWX({key:''''????//注册后获得的key值}),data:{……//定义数据}onLoad:function(options){wx.getSystemInfo({})},//获取窗口的宽高onReady:function(){wx.getLocation({})},//获取当前位置getfood:function(longitude,latitude){}//请求接口，查找附近餐厅})5.4【案例4】查看附近美食餐厅4单击控件回到中心点map.jsbindcontroltap:function(e){varid=e.controlId//获取id值if(id===1){wx.navigateTo({?url:''/pages/coupon/coupon''})}elseif(id===2){//将地图中心移动到当前定位点?this.mapCtx.moveToLocation()}}5.4【案例4】查看附近美食餐厅5视野变化获取中心点坐标map.js//获取中心点bindregionchange:function(e){if(e.type===''end''){this.mapCtx.getCenterLocation){(success:res=>{this.getFood(res.longitude,res.latitude)}})}}本章总结本章介绍了微信小程序中的API功能，包括使用小程序开放接口获取用户的信息、授权登录、添加用户收货地址，调起相机、相册选择图片等，同时也使用腾讯地图插件SDK定位附近的美食餐厅。根据POST和GET两种请求方式，介绍了不同数据类型之间的转换规则。学习本章后，读者需要掌握小程序中常用的API方法，熟练地进行与服务器的数据交互，实现项目产品需求。Sheet1
Chart1
销售额
若要调整图表数据区域的大小，请拖拽区域的右下角。
熟悉知识
2.00
2.00
2.00
2.00
了解
销售额
熟悉知识
熟悉知识
熟悉知识
熟悉知识
2.00
2.00
2.00
2.00
|
|
