mysql车库管理系统_毕设-智能车位管理系统微信小程序的设计与实现

图2.10 登录日志界面图

2.3 API相关组件

微信小程序柜架里的UI组件有很多，如视图容器类组件、基础内容类组件、完善的表单组件、友好的逻辑交互操作反馈组件、导航组件里面的页面链接、媒体组件用于音视频播放、地图导航以及画布类组件。这些UI组件就像小时候玩的积木一样，使用这些积木可以建造一座房子、一座大桥，而每个UI组件也都有不同的用处，有了这些组件，就可以完成界面的布局和界面的渲染。

(1)视图容器类组件；

(2)基础内容类组件；

(3)表单类组件；

(4)导航类组件；

(5)媒体类组件；

(6)地图类组件；

(7)画布类组件；

(8)开放能力类组件；

2.3.2常用API阐述

(2)媒体的操作：图片的添加、录音的插入、视频的播放；

(3)文件操作：文件的打开、保存和删除；

(4)数据操作：数据的获取、保存与删除；

(5)位置操作：当前位置的获取及查看；

(6)设备管理：系统的状态、重力的感应、电话的拨打；

(7)界面设计：交互逻辑的反馈、导航页面、过渡动画、下拉操作；

(8)开放接口；用户登录检测、状态信息查询、当前页面分享；

2.3.3登录授权

平常所使用的应用程序，都离不开用户的注册和登录。小程序拥有完整的登录流程，在这套登录流程里，进行通讯交互的涉及到小程序端、应用自身的服务端、微信的服务端。小程序端首先调用API的wx.login()获取code，这个code是用户的临时登录凭证，它是有有效期的。获取到登录凭证后，需要向服务端发送一个request请求，并携带上刚刚所获取到的code，服务端在接受到这个请求后会带上小程序应用的appid以及appsecret,这个appsecret表示小程序应用的一个秘钥。服务端拿到code之后，调用微信提供的接口，这条接口是微信的登录凭证校验接口，这个校验接口包含三个实参，分别是appid和appsecret，第三个就是临时登录凭证code。在调用微信的这条登录凭证校验接口之后，会换取一个seccion_key和openid，这个seccion_key就是用户当前会话的一个密钥，这个openid是用户在小程序里面的唯一标识。

换取seccion_key和openid后，服务端需要将两者组合生成小程序应用中用户当前的登录态标识。服务端还需要将seccion_key和openid所生成的登陆态标识这三者相关联，存入到对应的数据库中。生成一个自定义的登录态标识之后，小程序拥有登录态标识后，将它存起来，这里不是通过小程序全局变量来存储，而是一般会将它存入到小程序的本地缓存中。服务器端在接收到这样的一个请求，并拿到所携带的登陆态标识之后就可以去数据库中查询当前所携带的登录态标识所对应的用户的openid及seccion_key，通过openid对用户的数据来进行存取，并且返回给小程序端结果。具体如图2.11所示：

图2.11 授权登录流程

在小程序业务端，应该如何对用户进行登录健全的操作？在这张流程图中，小程序启动的时候，也就是onLaunch生命周期函数内，会去检测本地缓存中是否存在一个skey，即自己下发的一个登录态标识，如果存在，就需要去调用小程序所提供的一个wx.checksession的API来去检测当前用户的一个seccion_key是否过期，如果用户的seccion_key过期，需要调用login进行重新登录，这个登录操作是自己去定义的，不是微信提供的API，如果调用API里面的wx.checksession后，用户的seccion_key没有过期，就可以进行用户正常的一个业务请求。如果本地缓存中没有登录态标识，同样需要进行login这样的一个登录操作，具体流程如图2.12所示：

图2.12 业务端登录图

2.4微信支付技术

这个应用程序中也会涉及到微信支付的一个功能，小程序给用户提供了这个开放功能。在小程序管理后台，左侧有一个微信支付的入口，个人主体类型是没有这样的入口的，因为只有微信认证之后，其支付功能才能够使用，而个人主体类型没有微信认证的入口。开通微信支付有两种方式，首先是申请新的微信支付的商户号，否则只能绑定之前的商户号。在开通微信支付功能之后，会分配一个微信商户系统的登陆账号和密码，拿到账号和密码后就要去登录微信商户的一个平台来进行一些相关的设置，在账户中心找到'账户设置’，再找到'API安全’这一项，需要去进行一个秘钥的设置，密钥是32位的密钥，所有微信支付相关的接口都可以使用这个密钥来加密，同时需要去下载商户对应的一个证书，然后将这个证书部署到web代理服务器上，使用微信支付功能之前，要确保web代理服务器开通了一个HTTPS的服务。

在微信支付交互中，用户需要去主动的触发支付行为，并将这个行为传达给小程序，小程序在接收到这行为之后会向服务端进行一个下单的请求，在进行下单请求之前，要确保用户登录过小程序，并通过getuserinfo获取用户的openid标识，服务端在接收到下单请求之后，需要去生成对应的商户定单数据，然后去调用微信支付所提供的一个统一下单的API，这个统一下单API会在微信支付服务后台来生成一个预支付的交易单。在所有的支付方式中都需要通过统一下单这个API来获取到一个支付的凭证。 服务端调用微信支付统一下单接口成功的情况下，会返回一个预付单的信息prepay_id，它表示当前商户系统预支付交易单的标识，然后组合前面所传入的一些参数的数据进行再次签名，并将签名结果以及前面所传入的一些参数下发给小程序，小程序端就可以通过wx.requestpayment结合这些参数以及签名来发起支付的操作。支付交互如图2.13所示：

图2.13 支付交互流程图

2.5MySql数据库

MySql是一种传统关系型数据库类型的产品，它拥有开放式架构，并且技术日渐成熟，性能也在不断增强，支持的功能也日益完善，用户对平台的支持量以及社区的开发与维护人数也在逐日增多。目前，在遵守GPL协议的条件下，因MySql功能优越、性能稳定可靠，并可以免费的使用和修改而得到用户的青睐。关系型数据库不是把所有的数据都融合、统一地放一起，它鲜明的特点是将数据存到不同的工作表里，然后再将这些工作表放进不同的数据库中，这样不仅加快了MySql的读取速度，而且其变通性和可管理性也得到了极大的改善。Sql——结构化查询语言是对MySql数据库访问和管理的最常用的标准化语言。对数据库进行增添、删除、修改、查找的操作因Sql变得更加简单、方便。

2.5.2项目数据库技术

在项目中，可以后台录入数据进行测试。即用到了数据库来查询个人信息、车位信息等。当后台录入数据后，在小程序中再次进行查询和登录等操作时，即可正常进行存取操作。

例如：当用户查看个人信息时，会调用wx.getStorageSync('sessionid')方法来获取storage中的信息，并返回对应的session_key来查看信息，js界面调用wx.request方法，用getStorageSync同步获取小程序的sessionid，成功之后会调用一个带有参数的callbackFun函数来获取用户个人信息userInfo，否则就显示图标为加载的提示框wx.showToast，代码为：

wx.request({

data:{

Session_Id:

wx.getStorageSync('sessionid'),

}

success:

function(res) {

app.callbackFun(res);

if(res.data.status ==

1000000){

that.setData({

userInfo:res.data,

})

}else{

wx.showToast({

title:res.data.message,

icon:'loading',

})   }

}

})