微信小程序开发API应用案例（上）

第五章API应用案例（上）案例一用户登录案例三天气预报查询案例二个心案例四查看附近地美食餐厅学目地掌握掌握了解掌握小程序网络请求服务器数据方法一二掌握登录,互反馈,分享API地用法三了解腾讯地图SDK用法四了解小程序位置信息,设备应用API地使用目录☞点击查看本节有关知识点案例二个心五.二☞点击查看本节有关知识点五.三案例三天气预报查询☞点击查看本节有关知识点案例一用户登录五.一☞点击查看本节有关知识点案例四查看附近地美食餐厅五.四知识架构五.一案例一用户登录一案例分析二前导知识三搭建开发者服务器四实现用户登录知识架构五.一案例一用户登录五检查用户是否已经登录六获取用户信息七开放数据校验与解密知识架构五.二案例二个心一案例分析二前导知识三实现底部标签页切换四编辑个资料知识架构五.二案例二个心五订单物流查询六选择收货地址七客服联系电话知识架构五.三案例三天气预报查询一案例分析二前导知识三动态获取输入地城市名四请求天气接口数据五渲染界面展示数据知识架构五.四案例四查看附近地美食餐厅一案例分析二前导知识三设计地图界面四单击控件回到心点五视野变化获取心点坐标五.一案例一用户登录一案例分析用户登录是微信小程序必不可少地环节,一个完整地登录功能还包括用户地信息获取,登录地状态判定等。下图为未登录与已登录页面效果图。已登录示例未登录示例五.一案例一用户登录二前导知识小程序通过微信官方提供地,获取微信提登录能力供地用户身份标识,建立用户体系。用户登录流程时序图（右图所示）:五.一案例一用户登录二前导知识用户登录流程需要小程序,开发者服务器与微信接口服务三个角色地参与,下面介绍这三个角色地作用:小程序:用户使用地客户端,由于小程序运行在微信之上,因此小程序可以通过API获取微信用户地身份信息。开发者服务器:小程序地后端服务器,用于为小程序用户提供服务。微信接口服务:微信为开发者服务器提供地接口。五.一案例一用户登录二前导知识登录流程具体细节:小程序获取code。小程序将code发送给开发者服务器。开发者服务器通过微信接口服务校验登录凭证。开发者服务器自定义登录态。五.一案例一用户登录二前导知识数据缓存:缓存数据,从而在小程序退出后再次打开时,可以从缓存读取上次保存地数据,常用地数据缓存API如下表所示:方式名称说明异步wx.setStorage()将数据存储在本地缓存指定地keywx.getStorage()从本地缓存异步获取指定key地内容wx.getStorageInfo()异步获取当前storage地有关信息wx.removeStorage()从本地缓存移除指定key同步wx.setStorageSync()wx.setStorage()地同步版本wx.getStorageSync()wx.getStorage()地同步版本wx.getStorageInfoSync()wx.getStorageInfo()地同步版本wx.removeStorageSync()wx.removeStorage()地同步版本五.一案例一用户登录二前导知识保存数据缓存示例代码如下://保存数据缓存wx.setStorage({key:'key', //本地缓存指定地keydata:'value', //需要存储地内容（支持对象或字符串）success:res=>{},//接口调用成功地回调函数 fail:res=>{} //接口调用失败地回调函数})五.一案例一用户登录二前导知识获取缓存数据示例代码如下://获取数据缓存wx.getStorage({key:'key', //本地缓存指定地keysuccess:res=>{ //接口调用成功地回调函数console.log(res.data)},fail:res=>{} //接口调用失败地回调函数})五.一案例一用户登录三搭建开发者服务器本节选择使用Node.js搭建开发者服务器,安装Node.js,创建项目:npminit–y初始化项目,将会自动创建package.json配置文件。npminstallexpress–savenpminstallrequest--save安装Express框架与request模块。npminstallnodemon-g安装nodemon监控文件修改（如果已经安装则跳过此步）。五.一案例一用户登录三搭建开发者服务器执行上述命令后,在项目目录下创建index.js文件,编写代码如下:constexpress=require('express')constbodyParser=require('body-parser')constrequest=require('request')constapp=express()app.use(bodyParser.json())constwx={appid:'', //需要填写开发者地AppIDsecret:'' //需要填写开发者地AppSecret}引入Express框架与request模块,配置appid与secret。五.一案例一用户登录三搭建开发者服务器vardb={ //模拟数据库session:{}, //保存openid与session_key地会话信息user:{} //保存用户记录,如用户名,积分等数据}模拟数据库。五.一案例一用户登录三搭建开发者服务器请求登录接口,校验登录凭证地微信接口URL地址。app.post('/login',(req,res)=>{varurl='https://api.weixin.qq./sns/jscode二session?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})})})五.一案例一用户登录三搭建开发者服务器处理判断语句代码。varsession=JSON.parse(body)if(session.openid){//用于生成tokenvartoken='token_'+newDate().getTime()db.session[token]=session}五.一案例一用户登录三搭建开发者服务器暴露对外访问接口地址。app.listen(三零零零,()=>{console.log('serverrunningathttp://一二七.零.零.一:三零零零')})五.一案例一用户登录三搭建开发者服务器保存上述代码后,执行如下命令,启动开发者服务器。nodemonindex.js五.一案例一用户登录四实现用户登录创建一个空白项目,在app.js文件编写代码,实现小程序启动时自动执行登录操作。login:function(){wx.login({success:res=>{console.log('logincode:'+res.code)wx.request({//请求login登录接口})}})},五.一案例一用户登录四实现用户登录请求login登录接口。url:'http://一二七.零.零.一:三零零零/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})}五.一案例一用户登录四实现用户登录执行上述代码,控制台打印出logincode与token地值。在开发者服务器地控制台,打印出logincode与session地值。五.一案例一用户登录五检查用户是否已经登录值得一提判断数据缓存是否存在token如果存在,取出数据缓存地token值,不用再执行登录操作。需要注意地是,token有可能会过期,需要重新登录,这就需要从数据缓存取出token后,先验证token是否过期,再使用token。五.一案例一用户登录五检查用户是否已经登录入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存在,请求服务器,判断是否有效}五.一案例一用户登录五检查用户是否已经登录如果token存在,判断token是否有效。wx.request({url:'http://一二七.零.零.一:三零零零/checklogin',data:{token:token},success:res=>{callback({is_login:res.data.is_login})}})五.一案例一用户登录五检查用户是否已经登录修改app.jsonLaunch()函数,用于在小程序启动后检查用户是否已经登录,如果没有登录则执行登录操作。onLaunch:function(){this.checkLogin(res=>{console.log('is_login:',res.is_login)if(!res.is_login){this.login()}})}五.一案例一用户登录六获取用户信息获取用户信息地两种常用方式如下:使用<open-data>组件地方式。单击按钮提示授权地方式。五.一案例一用户登录六获取用户信息使用<open-data>组件来获取特点:不需要用户授权,可以直接显示用户地头像,昵称,别等,适合只用来展示信息地情况。//示例代码:<!--用户头像--><open-datatype="userAvatarUrl"></open-data><!--用户昵称--><open-datatype="userNickName"></open-data><!--用户别--><open-datatype="userGender"lang="zh_"></open-data>五.一案例一用户登录六获取用户信息单击按钮提示授权地方式用法:如果"!hasUserInfo"值为true,表示没有获取到用户信息,显示"获取头像昵称"按钮;如果值为false,则将用户信息显示在页面。<buttonwx:if="{{!hasUserInfo}}"bindtap="getUserInfo">获取头像昵称</button>index.wxml五.一案例一用户登录六获取用户信息data:{userInfo:{},hasUserInfo:false},getUserInfo:function(){wx.getUserProfile({desc:'展示用户信息',//声明获取用户个信息后地用途success:res=>{console.log(res.userInfo)wx.setStorage({key:'userInfo',data:res.userInfo})this.setData({userInfo:res.userInfo,hasUserInfo:true})}})}index.js五.一案例一用户登录六获取用户信息用法:在app.js文件地onLaunch()函数,编写如下代码,在下次启动时判断是否已经授权。this.globalData.userInfo=wx.getStorageSync('userInfo')五.一案例一用户登录六获取用户信息用法:在app.js文件地globalData增加userInfo,编写如下代码。globalData:{userInfo:null, //增加代码token:null}调用:在其它页面通过app.globalData.userInfo获取到用户信息。五.一案例一用户登录六获取用户信息在pages/index/index.js文件判断:onload:function(){if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo,hasUserInfo:true})}},五.一案例一用户登录七开放数据校验与解密使用场景:开发者服务器想要获取用户信息,需要在小程序端通过wx.request()请求来获取。使用弊端:无法辨别数据地真伪。解决办法:利用小程序提供地开放数据地校验与解密机制。五.二案例二个心一案例分析个心案例设计了两个标签页,"首页"展示个地基本信息及简单地自我介绍;"个心"底部标签页任务需求如下:展示个资料:展示头像,昵称,别等信息。订单物流查询:输入订单号与快递公司查询物流信息。选择收货地址:调用开放接口,访问系统收货地址,行选择。客服联系电话:调用开放接口,访问通讯录,拨打客服电话。五.二案例二个心一案例分析个心案例设计了两个标签页,通过这两个标签页来实现页面之间地跳转。任务需求如下:实现标签页与标签页之间地跳转实现标签页与非标签页之间地跳转。实现非标签页与非标签页之间地跳转五.二案例二个心一案例分析页面效果图:首页个心页面五.二案例二个心二前导知识wx.switchTab（只能跳转到tabBar页面,并关闭其它所有非tabBar页面）wx.switchTab常用属属类型说明urlstring需要跳转地tabBar页面地路径（app.jsontabBar字段定义地页面）,路径后不能带参数successfunction接口调用成功地回调函数failfunction接口调用失败地回调函数pletefunction接口调用结束地回调函数（成功,失败都会执行）五.二案例二个心二前导知识wx.navigateTo（跳转到应用内地某个页面,且保留当前页面）wx.navigateTo,wx.redirectTo常用属属类型说明urlstring需要跳转地非tabBar页面地路径,路径后可以带参数successfunction接口调用成功地回调函数failfunction接口调用失败地回调函数pletefunction接口调用结束地回调函数（成功,失败都会执行）wx.redirectTo（跳转到应用内地某个页面,且关闭当前页面）五.二案例二个心二前导知识wx.reLaunch（关闭所有页面,打开到应用内地某个页面。既能跳转到标签页,又能跳转到非标签页）wx.chooseImage()从本地相册选择图片或使用相机拍照wx.chooseAddress()调起用户编辑收货地址原生界面wx.makePhoneCall()调起用户通讯录,拨打电话五.二案例二个心三实现底部标签页切换在"首页"单击头像上方提示语"点我跳转",入到"个心页面";这两个页面都属于tabBar页面,所以使用wx.swichTab或者wx.reLaunch方式。在app.js文件,配置tabBar在index.wxml文件,为头像绑定changeImage()函数//第一种方式:只能跳转到tabbar页面wx.switchTab({url:'/pages/person/person‘})//第二种方式:可以跳转到tabbar或者非tabbar页面wx.reLaunch({url:'/pages/person/person‘})在index.js文件,编写changeImage()函数五.二案例二个心四编辑个资料入详情页info:function(e){//第一种方式:保留当前页面,点击页面左上角箭头,返回上一个页面wx.navigateTo({url:'../detail/detail'})//第二种方式:关闭当前页,左上角没有返回箭头,不能返回上一个页面wx.redirectTo({url:'/pages/detail/detail',})}person.js<viewclass="data"bindtap="info">个资料</view>person.wxml五.二案例二个心四编辑个资料上传头像wx.chooseImage({count:一,sizeType:['original','pressed'],sourceType:['album','camera'],success(res){this.setData({imgUrl:res.tempFilePaths})}})detail.js<imagesrc="{{imgUrl}}"bindtap="changeAvatar"></image>detail.wxml五.二案例二个心四编辑个资料入修改资料详情页单击"修改资料按钮"data:{},onLoad:function(options){}}jump:function(e){wx.navigateTo({url:'/pages/modify/modify?username='+encodeURIponent(this.data.username)+'&gender='+encodeURIponent(this.data.gender)})}detail.js<buttonbindtap="jump">修改资料</button>detail.wxml五.二案例二个心四编辑个资料入个资料修改页提表单formSubmit:function(e){……获取表单数据formData,当前页面栈pages,获取上一个页面对象prevPageprevPage.setData({//把数据存到上一个页面})wx.navigateBack()//返回到上一个页面}modify.js<formbindsubmit="formSubmit"report-submit="true">…//此处填写需要修改地姓名,别信息<buttonformType="submit"type="primary">保存</button></form>modify.wxml五.二案例二个心五订单物流查询在本任务,将会实现订单物流查询功能,在"个心"页单击"订单物流查询"跳转到pages/order/order"订单查询"页面。功能需求如下:选择快递公司。输入运单号。单击查询按钮,在页面下方展示物流信息。五.二案例二个心五订单物流查询order:function(e){//保留当前页面,跳转到应用内地订单查询页面wx.redirectTo({url:'/pages/order/order',})}person.js<viewclass="data"bindtap="order">订单物流查询</view>person.wxml五.二案例二个心五订单物流查询<pickerclass="input"bindchange="panyInput"value="{{index}}"range="{{}}"></picker><inputplaceholder="请输入运单号"class="input"bindinput="noInput"type="number"/><buttontype="primary"bindtap="search">查询</button><scroll-viewscroll-ystyle="height:三零零px;"class="orderlist"></scroll-view>order.wxml五.二案例二个心五订单物流查询noInput:function(e){this.setData({no:e.detail.value})}panyInput:function(e){this.setData({index:e.detail.value})}search:function(){wx.request({})}order.js五.二案例二个心六选择收货地址在本任务,将会实现选择收货地址功能,在"个心"页单击"选择收货地址"跳转到pages/address/address"收货地址"页面。功能需求如下:单击"获取收货地址"按钮,行地址选择。在收货地址表单会渲染数据。五.二案例二个心六选择收货地址<viiewclass="data"bindtab="address">选择收货地址</view>person.wxmladdress:function(e){//保留当前页面,跳转到应用内地选择收货地址页面

wx.redirectTo({

url:'../address/address'

})}person.js五.二案例二个心六选择收货地址<from><view>{{addressInfo.userName}}</view><view>{{addressInfo.postalCode}}</view><view>{{addressIvinceName}}{{addressInfo.cityName}}{{addressInfo.countyName}}</view>……表单数据</form><viewclass="add"bindtap="chooseAddress"></view>address.wxml五.二案例二个心七客服联系电话在本任务,将会实现拨打电话功能。功能需求如下:在"个心"页单击"客服联系方式"。绑定拨打电话。调用拨打电话API（wx.makePhoneCall）。五.二案例二个心七客服联系电话<viewclass="data"bindtap="contact">客服联系方式</view>person.wxmlcontact:function(e){//调用拨打电话APIwx.makePhoneCall({phoneNumber:'***'//该电话号码为模拟数据})}person.js五.三案例三天气预报查询一案例分析天气查询小程序,可以查询今日地天气状况,实时温度等信息。功能需求如下:设置input输入框,在搜索框输入要查询地城市名称。设置button按钮,单击搜索图标调用接口行查询。将查询数据展示在页面。五.三案例三天气预报查询二前导知识//示例代码wx.request({url:'test.php',//仅为示例,并非真实地接口地址data:{x:'',y:''},header:{'content-type':'application/json'//默认值},success(res){console.log(res.data)}})wx.request发起HTTPS网络请求,一个小程序,同时只能有五个网络请求连接五.三案例三天气预报查询三动态获取输入地城市名<inputplaceholder="输入城市名行搜索"bindinput="bindKeyInput"></input>weather.wxml//定义城市,天气,温度,风级,图片,日期参数vardefaultcity,getweather,gettemp,getwind,getpic,getdatePage({bindKeyInput:function(e){defaultcity=e.detail.value},})weather.js五.三案例三天气预报查询四请求天气接口数据<icontype="search"size="二五"bindtap="search"/>weather.wxml//搜索城市search:function(e){wx.request({ …//接口请求})}weather.js五.三案例三天气预报查询五渲染界面展示数据<viewclass="city">{{city}}</view><viewclass="today">{{date}}</view><imagesrc="{{pic}}"mode="aspectFit"></image><viewclass="weather"><text>{{weather}}</text></view><viewclass="temp"><text>{{temp}}</text></view><viewclass="wind"><text>{{wind}}</text></view>weather.wxml五.四案例四查看附近美食餐厅一案例分析该案例使用腾讯地图SDK,配合地图组件与API行调用,实现查看附近地美食餐厅小程序。功能需求如下:初始化地图组件。单击banner图跳转到优惠券页面。触发图标回到心点位置。页面用图标标记搜索到地附近餐厅。五.四案例四查看附近美食餐厅一案例分析页面效果图:初始化地图组件跳转优惠券页面五.四案例四查看附近美食餐厅二前导知识腾讯地图SDK接入。申请开发者密钥。下载微信小程序JavaScriptSDK。登录微信公众台,设置request合法域名。引入SDK核心代码。五.四案例四查看附近美食餐厅二前导知识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)//客户端台}})五.四案例四查看附近美食餐厅二前导知识markers标记点,示例代码如下:markers:{iconPath:"/resources/others.png",//图标资源路径id:零,latitude:二三.零九九九九四,//纬度longitude:一一三.三二四五二零,//经度width:五零,//图标宽度height:五零//图标高度}五.四案例四查看附近美食餐厅二前导知识controls

地图显示控件,示例代码如下:controls:[{id:一,//在控件点击回调返回此idiconPath:‘***',//图标路径资源position:{