微信小程序应用开发 课件 第7章 小程序API-Part 2

第7章小程序API-Part2电子工业出版社在第6章对微信小程序的基本API做了介绍，包括基础功能、界面操作功能、页面跳转控制功能、媒体处理功能等。本章对微信小程序的网络通信API、设备控制API、AI功能API、还有微信开放能力API等进行介绍。目录7.1网络通信API7.2分享/转发API7.3设备API7.4微信开放接口API7.5案例：在线相册7.6练习：读书分享7.1网络通信API现代应用程序，当然也包括微信小程序都需要与外界进行信息交换，而这个信息交换是通过网络通信完成的。因此，微信小程序提供了一组专门进行网络通信的API供开发小程序时使用。本节对微信的网络通信进行介绍。7.1.1获取网络状态和网络IP地址API在可以使用网络进行通信之前，需要先获取网络的状态，简言之就是“当前网络可用吗？如果可用的话，当前网络的连接方式是哪种？是WIFI、2G、3G、4G、5G？信号强度如何？”等等。为了回答这个问题，微信提供了wx.getNetworkType(Objectobject)函数。函数wx.getNetworkType(Objectobject)获取网络的相关状态信息，它接受一个Object对象参数，Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性名称、属性类型及其含义如下：networkType，string，网络类型。可能值：wifi、2g、3g、4g、5g、unknown、none；signalStrength，number，信号强弱，单位dbm；hasSystemProxy，boolean，设备是否使用了网络代理。2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）在存在可用网络的前提下，可以使用wx.getLocalIPAddress(Objectobject)函数获取网络的IP地址。这个函数接受一个Object对象参数，Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性名称、属性类型及其含义如下：localip，string，本机局域网IP地址；netmask，string ，本机局域网子网掩码。2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）7.1.2图书信息服务器网络通信会涉及到两个程序：一个服务器程序和一个客户端程序。这种架构非常典型，因此被赋予一个简洁的名字：C/S模式，也就是客户/服务器模式。在C/S模式中，服务器为客户端提供数据服务，而客户端则可以随时按需从服务器请求数据。微信小程序是一种典型的客户端程序，因此，为了建立可以进行网络通信的环境，需要架设一个服务端程序。本书开发了一个简单的“图书信息服务器”程序，它提供了如下基本的服务接口：1、获取所有图书信息（不包括图书封面图片）微信小程序使用该接口可以从服务器上获取所有图书的信息。采用HTTP协议，格式定义如下。后台服务器系统处理请求后，采用如下格式对请求进行应答：请求地址http://****/book/all协议版本HTTP1.1请求方法GET编码UTF-8封装类型application/json参数名称参数类型是否必须描述无

协议版本HTTP1.1编码UTF-8封装类型JSONObject参数名称参数类型是否必须描述图书的完整信息，JSONArray，每个元素是如下的Object对象，属性及含义如下：idint

图书的idnamestring

书名pressstring

出版社covernull

图书的封面2、获取指定ID的图书封面图片微信小程序使用该接口可以从服务器上获取指定ID的图书封面图像。采用HTTP协议，格式定义如下。后台服务器系统处理请求后，采用如下格式对请求进行应答：请求地址http://****/book/cover/{id}协议版本HTTP1.1请求方法GET编码UTF-8封装类型application/json参数名称参数类型是否必须描述idint是图书的ID协议版本HTTP1.1编码UTF-8封装类型二进制流参数名称参数类型是否必须描述图像数据流3、修改指定ID的图书封面图片微信小程序使用该接口可以在服务器上修改指定ID的图书封面图像。采用HTTP协议，格式定义如下。后台服务器系统处理请求后，采用如下格式对请求进行应答：请求地址http://****/book/cover/{id}协议版本HTTP1.1请求方法POST编码UTF-8封装类型multipart/form-data参数名称参数类型是否必须描述coverbinary是图书的封面二进制流协议版本HTTP1.1编码UTF-8封装类型二进制流参数名称参数类型是否必须描述successint是0：成功；1：失败messagestring否失败原因采用SpringMVC实现如上这些接口功能，代码如下：importjakarta.servlet.http.HttpServletRequest;importjakarta.servlet.http.HttpServletResponse;importorg.apache.tomcat.util.http.fileupload.IOUtils;importorg.springframework.util.ResourceUtils;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;

importjava.io.File;importjava.io.FileInputStream;importjava.io.IOException;import.URLEncoder;importjava.util.ArrayList;importjava.util.Objects;

@RestControllerpublicclassWXController{staticArrayList<Book>alb=newArrayList<Book>();static{Bookb1=newBook();b1.id=1;="C语言程序设计";b1.press="清华大学出版社";try{Filef1=ResourceUtils.getFile("classpath:images/clang.jpg");b1.cover=newbyte[(int)f1.length()];IOUtils.readFully(newFileInputStream(f1),b1.cover);}catch(IOExceptione){thrownewRuntimeException(e);}alb.add(b1);

Bookb2=newBook();b2.id=2;="AndroidStudio移动应用开发";b2.press="电子工业出版社";try{Filef2=ResourceUtils.getFile("classpath:images/android.jpg");b2.cover=newbyte[(int)f2.length()];IOUtils.readFully(newFileInputStream(f2),b2.cover);}catch(IOExceptione){thrownewRuntimeException(e);}alb.add(b2);}@GetMapping("/book/all")publicArrayList<Book>getAllBooks(HttpServletRequestrequest){Strings=request.getScheme();Stringa=request.getLocalAddr();intp=request.getLocalPort();Stringcp=request.getServletContext().getContextPath();for(Bookb:alb){b.path=s+"://"+a+":"+p+cp+"/book/cover/"+b.id;}returnalb;}

@GetMapping("/book/cover/{id}")publicbyte[]getCoverById(@PathVariable("id")Integerid,HttpServletResponseresponse)throwsException{

for(Bookb:alb){if(Objects.equals(b.id,id)){response.setContentType("image/jpeg");response.setHeader("content-disposition","attachment;filename="+URLEncoder.encode("cover"+id+".jpg","UTF-8"));returnb.cover;}}thrownewException("图书ID不存在");}

@PostMapping("/book/cover/{id}")publicvoiduploadCoverById(@PathVariable("id")Integerid,@RequestParam("cover")MultipartFilecover)throwsIOException{for(Bookb:alb){if(Objects.equals(b.id,id)){b.cover=cover.getBytes();return;}}}

publicstaticclassBook{publicIntegerid;publicStringname;publicStringpress;publicStringpath;transientpublicbyte[]cover;}}7.1.3发起请求使用RequestTaskwx.request(Objectobject)函数发起一个像指定服务器的请求，该函数接受一个Object对象参数并返回一个RequestTask对象。Object对象参数的属性及其含义表：序号属性名类型默认值必填说明1urlstring无是开发者服务器接口地址2data string/object/ArrayBuffer无否请求的参数3headerObject无否设置请求的header，content-type默认为application/json4timeoutnumber无否超时时间，单位为毫秒。默认值为600005methodstringGET否HTTP请求方法。可选值：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT6dataTypestringjson否返回的数据格式。可选值：json，返回的数据为JSON，返回后会对返回的数据进行一次JSON.parse；其他，不对返回的内容进行JSON.parse。7responseTypestringtext否响应的数据类型。可选值：text，响应的数据为文本；arraybuffer，响应的数据为ArrayBuffer8successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性及其含义如表7-4所示。9failfunction无否接口调用失败的回调函数。接受一个Object参数对象，该对象的属性、类型及其含义如下：errMsg，String，错误信息；errno，Number，错误码。10completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）success回调函数的Object参数对象的属性序号属性名称类型含义1datastring/Object/Arraybuffer开发者服务器返回的数据2statusCodenumber开发者服务器返回的HTTP状态码3headerObject开发者服务器返回的HTTPResponseHeader4cookiesArray.<string>开发者服务器返回的cookies，格式为字符串数组5exceptionObject网络请求过程中的一些异常信息，例如httpdns重试等7.1.4文件下载使用DownloadTaskwx.downloadFile(Objectobject)函数可以从服务器上下载指定的文件到本地临时路径，单次下载允许的最大文件为200MB。该函数接受一个Object对象参数并返回一个DownloadTask对象。Object对象参数的属性及其含义表：序号属性名类型默认值必填说明1urlstring无是下载资源的url2headerObject无否HTTP请求的Header3timeoutnumber60000否超时时间，单位为毫秒4filePathstring无否指定文件下载后存储的路径(本地路径)5successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性及其含义如表7-6所示。6failfunction无否接口调用失败的回调函数。接受一个Object参数对象，该对象的属性、类型及其含义如下：errMsg，String，错误信息；errno，Number，错误码。7completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）success回调函数的Object参数对象的属性：序号属性名称类型含义1tempFilePathstring临时文件路径(本地路径)。没传入filePath指定文件存储路径时会返回，下载后的文件会存储到一个临时文件2filePathstring用户文件路径(本地路径)。传入filePath时会返回，跟传入的filePath一致3statusCodenumber开发者服务器返回的HTTP状态码7.1.5文件上传使用UploadTaskwx.uploadFile(Objectobject)函数将本地文件上传到服务器，header中的content-type为multipart/form-data。该函数接受一个Object对象参数并返回一个UploadTask对象。Object对象参数的属性及其含义表：序号属性名类型默认值必填说明1urlstring无是开发者服务器地址2filePathstring无是要上传文件资源的路径(本地路径)3namestring无是文件对应的key，开发者在服务端可以通过这个key获取文件的二进制内容4headerObject无否HTTP请求Header5formDataObject无否HTTP请求中其他额外的formdata6timeoutnumber无否超时时间，单位为毫秒7successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性名称、类型及其含义如下：data，string，开发者服务器返回的数据；statusCode，number，开发者服务器返回的HTTP状态码。8failfunction无否接口调用失败的回调函数。接受一个Object参数对象，该对象的属性、类型及其含义如下：errMsg，String，错误信息；errno，Number，错误码。9completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）7.1.6网络通信API应用综合举例这个例子结合前面介绍的图书信息系统的服务端程序，通过微信小程序查看图书信息，并且用户可以通过微信小程序修改图书的封面图片。为此，新建一个名称为mini-ch07-01的小程序工程，修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"wx:for="{{books}}"><imagesrc="{{item.path}}"bind:tap="change"id="{{item.id}}"mode="heightFix"></image><text>{{}}</text><text>{{item.press}}</text></view></scroll-view>修改index.js为如下内容：//index.jsvarthat={};Page({data:{books:[]},onReady(e){that=this;wx.request({url:'29:8080/book/all',header:{'content-type':'application/json'//默认值},success(res){that.setData({books:res.data});}})},change(e){letid=e.target.id;wx.chooseMedia({count:1,mediaType:['image'],sourceType:['album','camera'],success(res){wx.uploadFile({filePath:res.tempFiles[0].tempFilePath,name:'cover',url:'29:8080/book/cover/'+id,success(e){for(vari=0;i<that.data.books.length;i++){if(that.data.books[i].id==id){console.log("Got!")that.data.books[i].path=res.tempFiles[0].tempFilePath;that.setData({books:that.data.books});break;}}},fail(e){console.log("fail:");console.log(e);}});}})}})微信规定：任何小程序只能与已经注册并且已经通过微信认证的服务器进行网络通过，这些通信包括通过wx.request(Objectobject)请求发起、wx.downloadFile(Objectobject)发起和wx.uploadFile(Objectobject)发起的所有请求。为了方便小程序开发和调试，在开发和调试期间，可以在微信开发者工具中打开“不校验合法域名”设置来申请微信不执行网络通信校验，如图所示：运行这个程序，显示如图所示的界面：7.2分享/转发API分享/转发信息涉及到两个层面：其一，可以分享/转发小程序页面；其二，可以分享/转发小程序页面内的某个信息，例如，页面内的某个图片、某个视频或者某个文件。下面从这两个层面对分享/转发API做介绍。7.2.1分享/转发小程序页面微信提供了两种触发分享/转发小程序页面的方式：其一，通过微信小程序右上角三个点的分享/转发按钮触发；其二，在页面中使用一个open-type="share"的button组件触发。无论采用哪种方式触发，为了完成分享/转发功能，在页面js文件的Page函数中，都需要实现如下两个回调函数：onShareAppMessage(Objectobject)函数用于转发给好友/微信群；onShareTimeline(Objectobject)转发到朋友圈。1、onShareAppMessage(Objectobject)回调函数onShareAppMessage(Objectobject)回调函数用于监听用户点击右上角菜单“转发”按钮或者点击页面内转发按钮（button组件open-type=“share”）或的行为，并自定义转发内容。微信客户端在回调这个函数时，会传递一个Object对象参数，这个对象参数的属性及其含义如表：onShareAppMessage(Objectobject)回调函数需要返回（return）一个Object，用于自定义转发内容，这个Object的属性及其含义如表：序号属性名类型说明1fromString转发事件来源。button：页面内转发按钮；menu：右上角转发菜单2targetObject如果from值是button，则target是触发这次转发事件的button，否则为undefined3webViewUrlString页面中包含web-view组件时，返回当前web-view的url序号属性名类型说明1titlestring转发标题。默认值：当前小程序名称2pathstring转发路径

默认值：当前页面path，必须是以“/”开头的完整路径3imageUrlstring自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5:4。默认值：使用默认截图。4promiseObject如果该参数存在，则以resolve结果为准，如果三秒内不resolve，分享会使用上面传入的默认参数2、onShareTimeline()回调函数onShareTimeline()回调函数监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。onShareTimeline()回调函数没有参数，但是需要返回一个Object，用于自定义分享的内容，这个Object的属性及其含义如表：序号属性名类型说明1titlestring自定义标题，即朋友圈列表页上显示的标题。默认值：当前小程序名称。2querystring自定义页面路径中携带的参数，如path?a=1&b=2的“?”后面部分。默认值：当前页面路径携带的参数。3imageUrlstring自定义图片路径，可以是本地文件或者网络图片。支持PNG及JPG，显示图片长宽比是1:1。7.2.2分享/转发小程序页面内的信息1、使用wx.showShareImageMenu(Objectobject)分享图片使用wx.showShareImageMenu(Objectobject)函数打开分享图片弹窗，可以将图片发送给朋友、收藏或下载。它接受一个Object对象参数，这个对象参数的属性及其含义如表：序号属性名类型默认值必填说明1pathstring无是要分享的图片地址，必须为本地路径或临时路径2stylestring'default'否分享样式，可选v23needShowEntrancestringfalse否分享的图片消息是否要带小程序入口(仅部分小程序类目可用)4entrancePathstring‘’否从消息小程序入口打开小程序的路径，如果当前页面允许分享给朋友，则默认为当前页面路径，否则默认为小程序首页5successfunction无否接口调用成功的回调函数。6failfunction无否接口调用失败的回调函数。7completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、使用wx.shareVideoMessage(Objectobject)转发视频使用wx.shareVideoMessage(Objectobject)函数转发视频到聊天。它接受一个Object对象参数，这个对象参数的属性及其含义如表：序号属性名类型默认值必填说明1videoPathstring无是要分享的视频地址，必须为本地路径或临时路径2thumbPathstring无否缩略图路径，若留空则使用视频首帧3successfunction无否接口调用成功的回调函数。4failfunction无否接口调用失败的回调函数。5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）7.2.3分享/转发API应用举例下面通过一个简单的程序演示分享/转发API的应用。在这个示例程序的页面中，显示一段介绍性文字和一张风景图片，用户可以将整个小程序页面分享给其他人，也可以使用将页面中的图片分享/转发给其他人。为此，新建名称为mini-ch07-02的小程序，新建images目录，并在images目录下放置一张风景图片。然后修改index.xwml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><textstyle="margin-bottom:20px;">美图欣赏和分享。好东西是要分享的，分享是一种境界，也是一种选择。这个例子演示了如何使用微信小程序的分享和转发API进行信息的分享和转发。</text><imagesrc="../../images/04.jpg"bind:tap="tapToShare"></image><text>这是一幅在某个地方拍摄的风景图像，漂亮极了，你可以点击这个图像将图像分享给你喜欢的人，或者喜欢这张图片的人。</text><buttonopen-type="share"type="primary">点击按钮分享</button></view></scroll-view>修改index.js文件为如下内容：//index.jsPage({tapToShare(){wx.showShareImageMenu({path:'../../images/04.jpg'});},onShareAppMessage(obj){return{title:'美图赏析',path:'/pages/index/index.wxml'}},onShareTimeline(){return{title:'美图赏析',imageUrl:'../../images/04.jpg'}}})运行这个程序，显示如图所示的界面：7.3设备API微信小程序提供了操作手机设备的API，包括：经典蓝牙操作API、低功耗蓝牙操作API、NFC读写操作API、Wi-Fi操作API、屏幕操作API、键盘操作API、扫码API、振动API等。本节对常用的扫码API和振动API进行介绍，对于其他类型的设备操作，请阅读微信小程序相关文档。7.3.1扫码API函数wx.scanCode(Objectobject)将唤起客户端扫码界面进行扫码，并得到扫码结果。它接受一个Object对象参数，这个对象参数的属性及其含义如表：序号属性名类型默认值必填说明1onlyFromCamerabooleanfalse否是否只能从相机扫码，不允许从相册选择图片。2scanTypeArray.<string>['barCode','qrCode']否扫码类型。可选值：barCode，一维码；qrCode，二维码；datamatrix，DataMatrix码；pdf417，PDF417条码。3successfunction无否接口调用成功的回调函数。该函数会接受到一个Object对象参数，该对象参数的属性及其含义如表7-14所示。4failfunction无否接口调用失败的回调函数。5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）当wx.scanCode(Objectobject)成功扫码后会调用success属性指定的回调函数，此时，该回调函数会接受到一个Object类型的对象参数，该参数的属性及其含义如表：序号属性名类型含义1resultstring所扫码的内容2scanTypestring所扫码的类型。可能值：QR_CODE，二维码；AZTEC，一维码；CODABAR，一维码；CODE_39，一维码；CODE_93，一维码；CODE_128，一维码；DATA_MATRIX，二维码；WX_CODE，二维码；CODE_25，一维码等。3charSetstring所扫码的字符集4pathstring当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的path5rawDatastring原始数据，base64编码7.3.2震动控制API微信提供了两个振动控制API：wx.vibrateShort(Objectobject)函数，用于正东手机15ms；wx.vibrateLong(Objectobject)函数，用于振动手机400ms。它们都接受一个Object对象参数，其中，wx.vibrateShort(Objectobject)函数的参数属性及其含义如表所示；wx.vibrateLong(Objectobject)函数的参数属性及其含义如表。wx.vibrateShort(Objectobject)函数参数Object对象的属性及其含义：序号属性名类型默认值必填说明1typestring无是震动强度类型，有效值为：heavy、medium、light2successfunction无否接口调用成功的回调函数。3failfunction无否接口调用失败的回调函数。4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）wx.vibrateLong(Objectobject)函数参数Object对象的属性及其含义：序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。2failfunction无否接口调用失败的回调函数。3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）7.3.3设备API使用举例下面编写一个例子来介绍设备API的具体使用。在这个例子的首页面有一个按钮，点击这个按钮，启动微信小程序扫码功能，当成功扫码后，将振动手机，同时在按钮下方显示扫码结果。为此，新建名称为mini-ch07-03的小程序工程，修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><view><buttontype="primary"bind:tap="scan">扫码</button><viewwx:if="{{sr!=''}}"style="margin:70px;">{{sr}}</view></view></scroll-view>修改index.js为如下内容：//index.jsPage({data:{sr:''},scan(){letthat=this;wx.scanCode({success(res){wx.vibrateLong();console.log(res);that.setData({sr:res.result})}});}})可以在微信模拟器或者在手机上运行这个程序。当在手机上运行时，可以通过相机扫码，并在页面按钮下方显示扫码结果；当在模拟器上运行时，可以扫码某张包含二维码的图片，让后在按钮下方显示扫码结果。如图是程序在模拟器上运行时的首页面，点击扫扫码按钮，可选择某个包含二维码的图片进行扫码：7.4微信开放接口API微信平台提供了一组接口，使得微信小程序可以使用微信的基本功能，包括获取微信用户的基本信息、微信用户登录并获得唯一凭证、功能授权等。本节对典型和常用的微信开放接口进行介绍。先从获取微信用户基本信息开始。7.4.1获取用户头像avatar信息在新版的微信小程序开放接口API中，已经收回了wx.getUserInfo函数（也就是这个函数不再被支持）；同时，wx.getUserProfile(Objectobject)函数只能获取一个通用默认的用户头像avatar地址和名称为“微信用户”默认用户昵称，因此，wx.getUserProfile(Objectobject)函数不再提供具有实质参考价值的信息；但是有时为了有较好的用户体验，需要在小程序中获取用户的头像，为此，可以使用button组件并指定其open-type属性为“chooseAvatar”来实现这个功能。使用button组件获取用户头像的具体过程如下：在页面中放置button组件，指定该组件的open-type属性为“chooseAvatar”，并设置该组件的bindchooseavatar属性指向回调函数。在回调函数中，函数事件参数e的属性e.detail.avatarUrl就是头像临时文件链接地址。下面举一个例子演示如何获取用户头像。在这例子中，用户点击程序首页面上的“获取用户头像”按钮即可在按钮下面的组件中显示用户的头像。为此，先建立名称为mini-ch07-04的小程序工程，修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttonopen-type="chooseAvatar"type="primary"

bind:chooseavatar="chooseavatar">获取用户头像</button><imagewx:if="{{avatar}}!=''"src="{{avatar}}"></image></view></scroll-view>在index.js文件中，编写chooseavatar回调函数代码。修改后的index.js如下：//index.jsPage({data:{avatar:''},chooseavatar(e){this.setData({avatar:e.detail.avatarUrl})}})运行这个程序，显示如图所示的首页面：7.4.2小程序登录目前各种前端应用程序为了完成一定的业务功能都需要后台服务端程序的支持。后台服务程序为了准确的为用户提供服务，需要了解每个用户的身份，也就是，代表用户的各种前端程序需要在服务端唯一的标识自己以与其他用户区分。为此，每个小程序用户在服务端需要一个能够唯一标识自己的编号。小程序登录功能可为每个小程序及每个用户生成一个唯一的标识码。小程序登录wx.login(Objectobject)函数只会返回一个有效期为5分钟的登录凭证。为了获取唯一标识码，小程序需要将这个凭证发送到后台服务器程序，后台服务器程序再通过访问如下网络服务API获得用户唯一标识号：GET/sns/jscode2session也就是通过HTTP的GET方法访问这个特定的链接方可获取用户唯一标识号。访问这个链接时，需要提供如表：jscode2session链接访问参数及其含义：访问这个链接后，微信平台返回一个JSON数据对象，这个JSON数据对象的属性及其含义如表：序号参数名类型必填说明1appidstring是小程序appId2secretstring是小程序appSecret3js_codestring是登录时获取的code，可通过wx.login获取4grant_typestring是授权类型，此处只需填写authorization_code序号属性名类型说明1session_keystring会话密钥。可以使用这个key对数据加密从而确保数据通信安全。2unionidstring用户在开放平台的唯一标识符，若当前小程序已绑定到微信开放平台账号下才会返回这个值。3openidstring用户唯一标识。这个就是能够唯一标识用户的标识号。4errmsgstring错误信息5errcodeint32错误码观察访问jscode2session链接时的参数，发现里面有两个特别的参数：appid和secret，这两个是什么参数？如何获得这两个参数值呢？回顾一下在微信开发工具中新建微信小程序时的界面，如图：为了能够使得小程序可以登录微信平台并获取唯一的用户标识号，需要正常注册后才能够调用wx.login(Objectobject)函数。为此，点击图箭头2所指向的“注册”链接打开小程序注册页面，如图：按图所示的过程和说明注册一个微信小程序账号。注册成功后，用注册的账号登录微信进入小程序管理页面，点击左侧功能区的“开发管理”链接，进入如图：即可看到已经注册的账号所分配的AppID和AppSecret。基于上面的介绍，在注册了微信小程序账号并且获得了AppID和AppSecret以后，就可以访问jscode2session链接获得用户唯一的标识号，服务端将这个唯一的用户标识号发给小程序，并且在小程序每次访问服务端程序时都携带这个标识号，后台服务程序即可准确识别不同的用户，从而为用户提供精确的服务。在编写例子程序之前，先介绍一下wx.login(Objectobject)函数的参数属性及其含义。wx.login(Objectobject)函数的Object对象的属性及其含义如表：序号属性名类型默认值必填说明1timeoutnumber无否超时时间，单位ms2successfunction无否接口调用成功的回调函数。成功后会传递一个Object对象参数，该对象参数的属性及其含义如下：code，string，用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用code2Session，使用code换取openid、unionid、session_key等信息。3failfunction无否接口调用失败的回调函数。4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）下面编写一个程序，通过登录获取用户唯一的openid标识码和session_key数据。为此，首先新建一个名为mini-ch07-05的小程序工程，修改inex.wxml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black“background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttonbind:tap="tap">登录</button><text>openid:</text><text>{{openid}}</text><text>session_key:</text><text>{{session_key}}</text></view></scroll-view>修改index.js为如下内容：//index.jsPage({data:{openid:'',session_key:''},tap(){letthat=this;wx.login({success(res){if(res.code){console.log("logincode:")console.log(res.code);wx.request({url:'29:8080/login/openid',data:{js_code:res.code,grant_type:'authorization_code'},success:function(e){that.setData({openid:e.data.openid,session_key:e.data.session_key});console.log(e.data)//res.data中有openid},fail(e){console.log(e);}})}else{console.log('登录失败！'+res.errMsg)}}});}})注意，其中wx.request()函数中的url地址是服务器地址。为此，在服务端采用SpringMVC编写如下所示的Controller：packagecom.ttt.wxserver;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.client.RestTemplate;

@RestControllerpublicclassWXOpenIdController{@GetMapping("/login/openid")publicStringgetWXOpenId(@RequestParamStringjs_code,@RequestParamStringgrant_type){Stringurl="/sns/jscode2session?"+"appid=填写自己的AppID&"+"secret=填写自己的AppSecret&"+"js_code="+js_code+"&"+"grant_type=authorization_code";RestTemplateclient=newRestTemplate();Stringbody=client.getForEntity(url,String.class).getBody();System.out.println(body);returnbody;}}运行这个程序，显示如图所示的首界面，点击“登录”按钮，程序将登录并获取小程序用户唯一标识号openid和session_key，如图：7.4.3授权和设置微信小程序的部分接口API需要经过用户授权同意才能调用，微信把这些接口按使用范围分成多个scope。当小程序首次调用需要授权才可以正常调用的微信API函数时，微信客户端会弹窗询问用户是否允许小程序调用该API：如果用户选择授权，小程序后台会记住此次授权操作，在本次及以后的类似调用中不再弹窗询问，而是直接允许调用该API；如果用户拒绝授权，小程序后台也会记住此次授权操作，在本次及以后的类似调用中不再弹窗询问，而是直接调用该API参数对象的fail属性所指定的回调函数。微信权限scope及其对应接口API如表：序号scope对应接口名称说明1scope.userLocationwx.getLocation,wx.startLocationUpdate精确地理位置2scope.userFuzzyLocationwx.getFuzzyLocation模糊地理位置3scope.userLocationBackgroundwx.startLocationUpdateBackground后台定位4scope.recordlive-pusher组件wx.startRecordwx.joinVoIPChatRecorderManager.start麦克风5scope.cameracamera组件,live-pusher组件wx.createVKSession摄像头6scope.bluetooth wx.openBluetoothAdapterwx.createBLEPeripheralServer蓝牙7scope.writePhotosAlbumwx.saveImageToPhotosAlbumwx.saveVideoToPhotosAlbum添加到相册8scope.addPhoneContactwx.addPhoneContact 添加到联系人9scope.addPhoneCalendarwx.addPhoneRepeatCalendarwx.addPhoneCalendar添加到日历10scope.werunwx.getWeRunData微信运动步数除了可以借助微信客户端的弹窗功能授权/拒绝授权小程序使用微信特定API和功能外，还可以使用小程序的wx.authorize(Objectobject)函数提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。wx.authorize(Objectobject)函数的Object兑现参数的属性及其含义如表：序号属性名类型默认值必填说明1scopestring无是需要获取权限的scope，详见scope列表，如表7-20所示。2successfunction无否接口调用成功的回调函数。3failfunction无否接口调用失败的回调函数。4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）为了了解对某个小程序的授权情况及其对权限进行控制，用户可以在小程序设置界面中查看及控制对该小程序的授权状态，如图：小程序则可以通过调用wx.getSetting(Objectobject)函数获取用户的当前权限设置。该函数接受一个Object对象参数，该Object对象参数的属性及其含义如表：序号属性名类型默认值必填说明1withSubscriptionsBooleanfalse否是否同时获取用户订阅消息的订阅状态，默认不获取。2successfunction无否接口调用成功的回调函数。当成功时，传递一个Object对象作为参数，该对象的属性及其属性如下：authSetting，AuthSetting，用户授权结果；subscriptionsSetting，SubscriptionsSetting 用户订阅消息设置，接口参数withSubscriptions值为true时才会返回。其中，AuthSetting对象类型包含授权scope，当对应的scope属性为true时表示已经授权此scope，否则表示没有授权该scope。3failfunction无否接口调用失败的回调函数。4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）7.5案例：在线相册用照片记录美好瞬间并把这些照片妥善保存起来是一件很惬意的事。本案例程序实现一个简单的在线相册，每个用户可以创建自己的相册，并用该相册保存自己的照片。7.5.1案例目标编写一个微信小程序，实现个人相册功能，具体包括：1、每个用户可以拥有自己的相册，并且不同用户之间的相册不能混淆；2、用户可以查看自己相册的照片；3、用户可以增加新的照片到相册；4、用户可以删除自己相册中的某张照片。7.5.2案例分析为了实现个人相册并对每个用户的照片进行管理，显然，需要一个后台服务器程序。在后台服务器程序中，可以基于用户的openid为每个小程序用户建立一个独立的相册目录，然后将该用户的所有照片保存到该目录中。为此，需要完成如下编码工作：1、 实现一个后台服务系统，实现照片的管理工作。本案例采用SpringMVC实现后台服务系统。在服务端程序中，基于用户的openid为每个用户创建一个唯一的存放用户照片的目录。2、 实现前端小程序，完成照片的显示、上传、删除等功能。7.5.3案例实施先编写后台服务程序。建立SpringMVC工程，在工程中新建一个名为PhotoController的控制器程序，实现上传照片、获取所有照片列表、获取指定照片、删除指定照片的功能。PhotoController.java代码如下：importjakarta.servlet.http.HttpServletRequest;importjakarta.servlet.http.HttpServletResponse;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.client.RestTemplate;importorg.springframework.web.multipart.MultipartFile;

importjava.io.*;import.URLEncoder;importjava.nio.charset.StandardCharsets;importjava.text.SimpleDateFormat;importjava.util.ArrayList;importjava.util.Date;@RestControllerpublicclassPhotoController{@GetMapping("/login")publicStringgetWXOpenId(@RequestParamStringjs_code,@RequestParamStringgrant_type){Stringurl="/sns/jscode2session?"+"appid=自己的AppID&"+"secret=自己的AppSecret&"+"js_code="+js_code+"&"+"grant_type="+grant_type;RestTemplateclient=newRestTemplate();Stringbody=client.getForEntity(url,String.class).getBody();System.out.println(body);returnbody;}

@GetMapping("/list")publicArrayList<String>getPhotoList(@RequestParamStringopenid,HttpServletRequestreq){Stringpath="C:/Wu/photos/"+openid;Filef=newFile(path);if(!f.exists())returnnull;

String[]ns=f.list();if(ns==null)returnnull;Stringscheme=req.getScheme();Stringip=req.getLocalAddr();intport=req.getLocalPort();Stringcp=req.getContextPath();ArrayList<String>pl=newArrayList<>();for(Stringname:ns){Stringlink=scheme+"://"+ip+":"+port+"/"+cp+"photo?"+"id="+name+"&openid="+openid;pl.add(link);}returnpl;}

@GetMapping("/photo")publicbyte[]getPhotoById(@RequestParamStringopenid,@RequestParamStringid,HttpServletResponseresponse)throwsIOException{Stringpath="C:/Wu/photos/"+openid+"/"+id;Filef=newFile(path);if(!f.exists())returnnull;

byte[]photo=newbyte[(int)f.length()];FileInputStreamfis=newFileInputStream(f);if(fis.read(photo)<=0)returnnull;fis.close();

response.setContentType("image/jpeg");response.setHeader("content-disposition","attachment;filename="+URLEncoder.encode(id+".jpg",StandardCharsets.UTF_8));returnphoto;}

@PostMapping("/upload")publicvoiduploadPhoto(@RequestParam