刚才啊,咱们是讲了一下我们这个 http client 这个小的工具包它的使用方式,那接下来呢,咱们来看下一个小节,也就是我们这个微信小程序开发。 那么在微信小程序开发这个章节当中呢,咱们会通过下边这三个部分来讲,第一个呢就是介绍,对吧?那也就是先整体介绍一下我们这个微信小程序,然后接下来呢我们会做一些开发的准备工作, 比如说呢我们需要把我们这个微信小程序开发专门的一个开发工具,把它下载并且安装好,然后呢相应的设置设置好,那这些准备工作做完之后呢,咱们就会通过一个入门案例这种方式啊,来学习一下小程序开发它整体的一个过程。 好,那接下来呢咱们先看第一部分,也就是我们这个微信小程序开发的介绍,那这个图呢实际上是微信官方给我们 提供的,他在这呢是解释了一下这个小程序,对吧?那么小程序呢,它是一种新的开放能力,可以在微信内被便捷的获取和传播,同时呢具有出色的使用体验。 那在这个地方呢有这么一个网址,这个呢其实就是微信公众平台,那在这个页面上呢,他是对小程序呢做了一个整体的介绍,对吧? 那么这个小程序呢,它主要就是运行在我们微信内部的,对吧?大家呢可以在这个网站上呢来整体了解一下微信小程序的开发。 那接下来呢,咱们回到我们这个课件当中来,那么我们要使用这个小程序呢,首先呢就需要先去注册一个小程序, 而我们注册的话呢,它实际上又分成了不同的注册的主体,咱们呢可以来看一下,你看这是开放注册范围,也就是说我们可以以个人的身份来注册一个小程序, 当然也可以以企业、政府、媒体或者其他组织的方式啊来注册小程序。那么不同的主体注册的小程序呢,那么最终我们开放的权限其实是不一样的, 那比如说我们是以个人的身份啊来注册小程序,那这个时候呢,他其实是无法开通支付权限的, 所以说呢,要想在我们小程序里边能够提供支付功能,那必须呢是这种企业或者政府或者是其他的一些身份,而个人身份呢是没有这个权限的,所以说呢,不同的主体注册完这个小程序之后啊,我们能开发的这些功能呢,实际上是不一样的。 好,这是我们这个注册范围可以有这么多的主体,对吧?然后接下来呢,咱们继续来看,也就是这个微信小程序,他给我们提供的一些开发的支持,实际上微信的官方呢, 是提供了一系列的工具,来帮助咱们开发者快速的接入,并且完成小程序的开发,那他提供了完善的这种开发文档,然后呢还专门提供了一个开发者工具,一会呢我们就需要来安装这个工具,还提供了相应的设计指南,对吧?还有相应的一些小程序体验的 demo, 通过这些例子程序呢,就可以快速的来体验一下我们小程序啊,它能够做到哪些功能,对吧?那么它的效果,这个呢我们简单了解一下就可以了, 然后接下来呢这个就是我们要开发一个小程序,并且最终呢要想上线,对吧?那么他接入的一个流程是什么样子的?首先第一步呢就是注册,微信官方呢是给我们专门提供了这个注册页面,一会呢我们就可以来看一下啊,所以第一步呢是需要先来注册一个小程序, 那么完成注册之后呢,我们就需要来完善小程序的信息,比如说你这个小程序叫什么名字,对吧?然后呢你的名称,你的头像,然后还有这个小程序他的介绍以及服务范围等等,那这就需要在小程序专门的一个平台,然后去完善这些信息。 好,那这些信息完善好之后呢,我们就可以在本地来开发这个小程序,那么开发好这个小程序之后呢,咱们就可以把这个小程序的代码呢来提交审核,那么如果审核通过之后呢,就可以发布上线, 那么一旦这个小程序发布成功之后呢,那么所有的微信用户呢,就都可以搜索到这个小程序,并且来使用这个小程序。好,这就是我们这个小程序它整体的一个接入的流程。 好,那么以上呢,咱们是对微信小程序啊做了一个简单的介绍,那么一会呢我们就需要来做一些具体的准备工作,为我们后续开发微信小程序呢做好准备。
粉丝5711获赞7693

刚才啊,咱们是通过一个入门案例的方式啊,给大家演示了一下我们应该如何来开发微信小程序,对吧?那么这里边呢其实主要编写的呢都是 g s 代码,也就是本质上呢它其实都属于前端的开发 好,那假设呢咱们这个小程序的代码都已经开发好了,那最后呢我们这个小程序应该如何发布上线呢?让所有的用户都能使用到这个小程序呢?那这个时候呢,大家来看,在我们这个开发工具右上角这个位置呢有一个上传按钮,那么我们点击这个上传按钮,然后呢点击确定, 然后呢在这呢来指定一个版本号,实际上呢就是将我们本地开发的这份代码把它上传到微信服务器,那么这个版本号呢,比如说我就来个二点一,好这么一个版本,然后点击上传按钮,好,你看 他现在提示我们上传成功,那是不是说我们这个代码上传到微信服务器,就表示我们这个小程序已经发布了呢?哎,其实并不是啊,当前我们这个小程序这个版本呢只是一个开发版本,咱们呢可以到我们这个微信公众平台上面来看, 你看啊,在这呢有这么一个菜单啊,叫做版本管理,对吧?那么我们点击这个菜单,这样的话呢就能打开这么一个版本管理页面,对吧?然后呢从下边这个地方大家能够看到有个开发版本,而具体这个版本号呢,就是我刚才指定的这个二点一, 这就是刚才咱们在这个地方点击上传按钮传上来的这个版本,对吧?那么你看他现在呢是开发版本,所以说呢,现在我们所有的微信用户呢,实际上在微信里面是搜索不到咱们这个小程序的,那么要想发布的话呢,我们需要来提交审核, 也就是点击这个按钮,然后呢你按照他这个向导去填一些资料,然后在审核过程当中呢,就会显示在这个位置,哎,你看在这个地方是不是有个审核版本,对吧?那假设我们这个审核版本通过之后呢,你就可以在这个地方点击一个发布按钮, 那么如果发布成功之后,那这个版本呢,就会显示在这个线上版本这个地方,那一旦成为线上版本呢,这就说明我们这个小程序呢就已经发布上线了,对吧?那这个时候呢,我们所有的微信用户啊, 就可以在微信里面去搜索到咱们这个小程序,最终呢来使用咱们这个小程序。好,这是咱们说了一下,我们如何来发布微信小程序。

接下来呢,咱们继续来看微信小程序开发,那么刚才呢,咱们是简单了解了一下我们要开发的这个微信小程序,它整个这个项目,它的目录结构,对吧?那么它的目录结构是什么样子的呢? 首先呢它是有这么三个主体的文件,是在我们这个项目的根目录,对吧?一个呢就是这个 a p p 点 g s, 那这个文件里面呢,主要编写的是不是应该就是 g s 代码? 呃,然后还有一个呢,就是这个 a p p 点 jason, 那这个里边放的是什么呢?就是我们这个微信小程序它的配置文件,那这里边呢主要放的是一些配置项, 比如说呢,我们在这个地方可以看一下,你看他这个地方是不是有这么一个叫做 pages, 其实就是指定一下我们当前这个微信小程序他所有的页面都在哪?当前咱们这个小程序呢,只有这么一个页面,就是在这个 pages 下边是不是有个引 dex, 对吧?那么你看这是 pages, 那对应的就是他,对吧?然后呢在下边是不是有个 index, 那这就是我们这个页面,然后呢下边怎么还有个 index 呢?注意这个 index 其实代表的就是我们这个 index 点,微信 ml, 如果说我们还有其他的页面呢,只需要在这一个一个给他配置上就可以了。 然后下边呢是其他的一些配置项,比如说他这个地方配置了一个什么 title text, 然后呢这个值呢是微信,那这个主要体现在哪呢?他其实主要是指定我们这个微信小程序这个地方,这个 title 也就是这个标题, 咱们呢可以来给它修改一下啊,比如说呢,我把这儿改成一个 itcas 的,然后呢 ctrl s, 我保存一下,哎,大家来看,那么我保存之后呢,你看这个位置是不是就会发生了变化,哎,那也就是说啊,它是通过这个地方是不是来进行 配置的,哎,当然其他的呢,咱们就不用看了,那么你就知道这个 app 点 jason, 它呢,其实就是起到一个配置文件这么一个效果就可以了。然后呢还有这么一个文件叫做 app 点微信 ss, 那这个里边呢,是不是放的就是我们这个样式文件呀? 其实相当于就是一些 css 样式。好,那么我们简单看一下就可以了。呃,然后接下来呢,我们就需要来具体编码,咱们来看一下这个微信小程序开发它的特点是什么?那现在呢,我们只有这么一个 index 页面,对吧?那咱们呢就在这个页面上面呢来开发, 那么你看这一个页面呢,是不是由这四个文件来构成?那么刚才呢,我们其实也提到了,对吧?那么分别对应的是什么呢?一个是 gs 文件,还有一个呢是 js 文件,还有这个微信 mr 文件,还有微信 ss 文件。那现在呢,大家看, 在我们这个地方呢,是不是展示了这么一个微信这么一个文字啊?那这个文字是从哪来的呢?它其实就来自于我们这个微信 ml 这个文件,你看在这个地方写的,而这个微信 ml 这种文件呢,其实就类似于咱们的 atml。 好,那现在呢,我在这给他改一下,大家来看,我改成 it 黑马,然后呢我保存一下,哎,你看这边是不是也就跟着变了?哎,那就说明啊,他展示的确实是我们这个文件他的内容,对吧? 那现在呢,我们展示的是一个固定的这么一个字符串,对吧?那现在呢,我希望动态的来展示一个信息,行不行呢?哎,其实也是可以的啊, 那么我们在这呢,先给它删掉,然后呢保存一下,你看现在就没有了,对吧?那么我们现在要展示动态的信息,咱们的这些信息呢,一般都会展示在一个 view 标签里边, 而这个 view 标签呢,其实就类似于什么呢?就类似于我们 h l 里边的 div 标签。好,那现在呢,我们在这个地方呢,会通过这么一种叫做差值表达式,你看它的语法是不是跟咱们前面讲的 voe 是非常类似的,对吧?就是两层划括号,然后在这呢,我来一个 message, 好,那就说明他是不是要动态来输出这个值,但是现在你看我保存之后,他是不是依然没有输出?因为我们是不是还没有去声明这个变量啊?对吧?所以说呢,接下来我们就需要去声明这个变量,然后在这个地方呢,通过插值表达,是这种语法是不来获取这个变量他的值,然后呢展示在我们这个页面上,对吧? 那我们应该在哪去声明这个变量呢?那很明显,咱们是不是应该在我们这个 g s 文件里面,咱们主要的逻辑呢?其实是写在这个文件里面,那我们打开它,你看这里边呢,它是不是 有一个配置啊?那么我们主要的代码呢,都是写在这个配置里边,那接下来呢,我们会通过这么一个叫做 data, data 是不是代表的就是数据啊?也就是定义一下我们当前这个页面上使用到的一些数据,好,那么你看一个冒号,然后后边是不是跟上这个花括号, 那也就是这个 data, 它其实对应的是一个 jason 对象,对吧?然后呢我们在这个 jason 对象里面来定义什么呢?这个 message, 哎,也就是在这个位置来定义,比如说我在这来一个什么呢? hello world 啊,随便定义一个,然后呢 ctrl s 保存一下,哎,然后你看这边呢,他是不是就已经出现了这个 hello word, 那这个海螺窝的怎么来的呢?实际上就是因为我们在这个地方是不是定义了这么一个 message, 然后在我们这边呢,是不是来动态获取它的值,对吧?好,那么你看啊,相对来说呢,使用起来还是比较简单的,并且它这个编码的风格呢是, 是不是跟咱们的 voe 是非常类似的,对吧?好,那现在呢,这是动态的,是不是就获取到我们这个字符串了,对吧?那接下来呢,我们再来编写一个效果,那其实什么呢?大家来想,我们是不是在小程序里边呢,经常需要获取到当前这个微信用户他的头像啊,还有他的昵称啊等等,对吧? 那现在呢,我们就需要来获取一下,那么我们可以在这啊,先来编写一个 view, 重新来一个 view 啊, 然后呢在这里边呢,我们来一个 button, button 是不是代表的就是按钮啊?对吧?那也就是当我点击这个按钮的时候呢,就会执行一个方法,然后呢来获取用户的头像还有昵称, 那这个按钮叫什么名字呢?哎,咱们呢在这来随便写一个就行了,比如说就叫获取用户信息,这其实就是一个普通字符串啊,写什么都可以,然后呢我们保存一下,哎,你看这边是不是就出现了这么一 一个按钮,但现在这个按钮的效果呢?其实并不是很好看,对吧?那么我们需要来指定一下它的 type, 也就是它的类型,那它这个类型呢,主要有这么三种,一个是 default, 也就是默认的效果,还一个是 primary, 对吧?主要的效果还有一个呢就是 one, 哎,这个是警告按钮。 好,那接下来呢,咱们先来看第一个,就是默认按钮效果,然后保存一下,哎,你看就是这么一个效果,那么你看这个按钮,它的背景呢,就是灰色的,然后呢文字呢?是绿色的,对吧? 那么我们给它换一个,比如换成第二种 primary 这种,然后呢 ctrl s 保存一下,哎,那你看这个按钮的效果是不是就发生了变化? 呃,然后呢,我们再来看第三个,就是这个 one, 对吧?这种呢叫做警告按钮,对吧?然后呢我们保存一下,哎,你看这个文字是不是就变成红色了,对吧?那咱们这样呢,就使用这种 primary 就可以了啊,然后保存一下啊,那这种 按钮呢,看起来效果是不是会更好看一点啊?那么我们就使用这种,当然现在呢,他只是一个普通按钮,你看我点上去之后是不是没有任何效果呀?他是不是并没有去获取我用户的头像还有昵称啊?那么我们现在呢,就需要为这个按钮呢来绑定一个事件, 哎,那么怎么绑定事件呢?就是通过这么一项啊,叫做 band tap, 然后在这个双引号里边写什么呢?其实应该写的是一个函数名称,或者叫做一个方法名称,那这个方法名呢?我们就叫 get user infer, 当然这个方法名你起什么名字都可以。那现在我们有这个方法吗?是不是还没有啊?所以我们是不是就需要去定义这个方法,对吧?好,那现在呢,我 ctrl c 复制一下,那么我们应该在哪去定义这个方法呀?那很明显是不是应该在这个 gs 文件里面,对吧?咱们在这呢来定义方法, 注意啊,你看这个 data 这里边呢,主要是我们这个页面用到的数据,然后这个数据完之后呢,我们在这需要加一个逗号,然后再往下呢就是定义方法了,然后这个方法名呢,直接 ctrl v 粘贴在这, 然后呢,我们在这是不是通过这种语法,你看跟咱们扎化代码是不是非常类似,对吧?那么这就是我们定义了一个 gs 方法,然后呢,在这呢也可以写注视,也是两个斜线,你看这是注视啊,来获取我们这个微信用户的这个什么呢?呃,头像和昵称吧。好, 那具体怎么写呢?注意,咱们这个地方呢,会使用到微信小程序给我们提供的一个内置对象,那这个对象呢?是固定的,名字就叫微信,你看就是 w x, 对吧?代表的就是微信。然后呢,我们调用这个对象的这么一个方法叫做 get user profile, 注意,这是它内 制的方法啊,这个方法名不要写错了,是固定的,就是这个微信这个对象他的这么一个方法,那这个方法的作用是什么呢?就是获取一下我们当前微信用户他的信息。 好,那么这个 description 呢,咱们就简单描述一下,其实就是一个普通字符串,写什么都可以啊,比如说就叫获取用户信息,那关键呢,它这里边有这么一个属性啊,叫做 success, success 其实代表的就是成功,对不对?那么它对应的是一个回调函数,那么我们在这呢就叫 i e s, 然后呢通过等号,然后监括号,这是不是类似于我们这个拉木的表达式啊?对不对?就类似于我们 j d k 里边的拉木的表达式,也就是当我们获取成功之后呢,他就会执行这段逻辑。 呃,然后呢我们看这个 i e s 是什么呢?它其实代表的就是返回来的数据,说白了就是我们获取到的当前微信用 用户的数据。好,那么我们在这呢可以先简单打印一下,那怎么打印呢?我们会通过这么一个内置对象叫做 cancel, 哎,你看这个叫做控制台,对吧?然后呢他会把这个日志啊输出在我们这个控制台,注意这个控制台指的是我们这个调试器, 你看我们把这个调试器调出来,他的这个 ctrl 控制台在这个位置来进行输出。好,那么咱们可以在这呢来输出一下 cancer, 点 vlog 就可以了。然后输出什么呢? r e s 点儿 user 音符,但这个呢其实是一个 jason 对象,里边呢包含很多像啊,咱们呢可以来看一下。 好,那么我们写了这些代码之后呢,最好编译一下,要不然的话,他有可能运行的还是我们原先的代码,所以说呢,我们最好呢是点一下这个编译按钮,确认执行的是最新的代码。那么编译完之后呢,咱们把这个控制台来清 一下,首先就是这个按钮,你看我点一下就会把控制台清空,对吧?这样便于我们观察。然后呢我们点击一下获取用户信息这个按钮,大家来看。 好,你看我点完这个按钮之后呢,是不是现在他这个效果就不一样了,他现在是不是弹了这么一个窗口啊?对不对?那这个窗口是怎么来的呢?就是因为我们调用了这么一个方法,叫做 get user profile 这个方法,那这个时候呢,他就会弹这个窗口,他想获取我当前这个微信用户的昵称还有头像。 那这个地方呢,大家可能会比较奇怪啊,他怎么知道我当前这个微信用户是谁啊?大家还记得吧?我们当时进入这个微信开发者工具的时候啊,是不是用我们这个微信扫码了, 并且在这个地方,你看是不是能够看到当前我是谁,对吧?也就是我这个微信账号,所以现在呢,他其实就是还想申请我这个微信账号, 它的昵称还有头像。好,那现在呢,我就点击允许大家来看控制台输出,哎,你看控制台是不是输出了这么一段文字,那么你会发现它其实是一个 jason, 对吧?那这里边包含什么呢?包含有这个呃, what are 什么 u r l, 还有什么 city 啊,还有什么 nickname 啊等等一系列的。 那么实际上这个对应的是什么呢?就是我们这个 use 音符,而这里边呢,是不是就含有我们的这个昵称?比如说,那还有头像呢?注意这个头像呢,他其实是这么一个链接地址,那么通过这个地址呢,是可以访问到一张图片的,而这个图片呢就是我们那个头像, 好,那现在呢,我们只是在控制台是不是输出了一下,那现在呢,我希望把它输出在我们这个小程序这个位置,那这个我们应该如何做到呢?哎,那现在呢,我们可以在这来写一下啊,大家来看,那么我们在这个地方呢,先来一个 昵称,然后呢,我们后边是不是用这种差值表达式,然后呢我们这个就叫尼克内蒙吧,尼克内蒙,对吧?然后呢我们在这是不是就需要来声明一下,对吧?声明在这个位置, 好,那具体它的值是什么呢?那现在我们在这个 user in for 这个 jason 对象里边是不是就含有这个 nickname, 那也就是说我们现在需要做什么事啊?是不是需要动态的为这个 nickname 来复值?复什么值呢?是不是就是我们动态获取到的这个昵称啊?对吧?好,那接下来呢,我们就需要为我们这个数据来复值,对不对?来复值, 好,那么怎么复制呢?哎,这个呢,又是他的一个内置方法,直接类似点什么呢?叫做 set data, 这是不是就叫做设置数据啊?对吧?然后呢,我们在这里边,你看啊,他这个参数呢,是一个 jason 对 像,然后呢这里边指定什么呢?就是指定我们这个数据的名称叫尼克内蒙,然后具体的值是什么呢?具体的值咱们是不是通过这个 i e s 点儿由子引发?点什么呢?是不是应该叫做尼克内蒙?你看这里边是不是叫尼克内蒙? 这个千万不要写错了啊,一定要跟他这个属性保持一致,这样的话呢,我们就可以动态来获取到他的值,对吧?然后呢付给我们这个尼克内蒙,而这个地方,这个尼克内蒙是什么呢?是不是就是我们在这定义的,而在我们这边呢,是不是就动态来获取这个值?好,那现在呢,我们保存一下,然后呢重新编译一下, 然后呢我们再来点获取用户信息,然后呢点允许,哎,你看现在呢,他在这个地方是不是就可以动态输出出来了,对吧?这就是我这个微信用户的昵称。好,那还有一个头像呢,对吧? 那这个头像的话呢,我们可以通过这么一个一个 image 标签,然后呢在这来指定一个 src, 然后呢我们还是使用这种差值表达式,对吧?然后呢在这来一个叫做 url 吧, 好,那这个 u l 呢?我们是不是需要在这边来声明一下,对吧?注意这来加一个逗号啊,这个语法不要弄错了。好,那也就是说我们在这个地方是不是还需要为这个 u l 来进行复值,那复什么值呢? 那是不是跟上面这个 nickname 是非常类似的,那么 i e s 点什么呢? you the 音 for, 点儿,注意它,这个叫什么呢? 刚才我们看啊,他这个是不是应该叫做,呃, what a u l? 哎,这个属性名不要写错了,叫做 a what a u l? 好,那这样的话呢,就会动态的输给我们这个 u l, 对吧?然后呢我们这边是不是就可以去 展示这张图片了,对吧?他其实就是一个链接地址,你看就是这么一个非常长的这么一个链接地址。好,那现在呢,我们直接保存,并且重新编译一下这个程序。 好,那么编译完之后呢,咱们点击获取用户信息。好,右弹这个点击允许。哎,你看现在呢,他是不是就把我们这个头像给展示在这个位置了,对吧? 但是现在这个头像呢,是不是很大呀?不太好看,对吧?那么我们把这个图片呢给他来稍微调整一下,调整一下他的样式啊,来一个 style 吧, 然后呢来指定一下宽度,还有高度。呃,宽度呢?来一百像素就可以了。呃,然后呢再来一个高度,高度呢也来个一百像素。好,然后保存。哎,你看我保存之后呢,那这个图片是不是就变小了?这是咱们简单演示了一下如何来获取我们这个用户的头像,还有昵称。

接下来呢咱们就重点来看一下跟我们这个微信支付相关的功能,相关的一些内容。 比如说我们要实现微信支付,那这个程序执行的流程是什么样子的呢?哎,咱们来看一下就是我们这个微信小程序支付的实习图。那在这呢我们需要来强调一下,就是你看微信支付他是不是给我们提供了多种支付的形式啊?包括有这个付款码支付, 还有扫码支付,还有就是我们这个微信小程序支付,还有刷脸支付等等。因为咱们这个项目当中啊,使用的是小程序支付这种支付方式,所以说呢,我们重点呢就来介绍一下微信小程序支付的时候的这个实序图。那什么叫实序图呢? 其实简单来说呀,就是我们这个程序他执行的一个顺序,咱们呢可以具体来看一下这个地方,你看叫做微信用 户,你看他是不是画的这个图标就是一个小人啊,对吧?那其实代表的就是我们微信的使用者这个用户,然后第二个呢,这个叫做微信小程序。哎,比如说就拿我们这个苍穹外卖来举例,对吧?那这是不是就是我们手机微信里边这个苍穹外卖这个小程序啊? 然后第三个呢叫做商户系统,那这个商户系统呢,其实就相当于是我们当前苍穹外卖这个后端系统。然后第四个呢就是微信后台,这个呢其实就是由微信官方给我们提供的一些服务,咱们要实现微信支付呢,就需要来调用他后台提供的一些接口。 好,那么我们来看一下咱们这个微信小程序,他支付的时候,这个程序具体是怎么执行的,对吧?也就是这个实序图。那么首先第一步呢,微信用户需要先进入我们这个小程序,对吧?然后呢他点商品,然后下单,那下单的时候呢, 是不是小程序这一端就会发送一个请求,来调用我们这个后端服务的某个接口啊?对吧?那前面呢,咱们刚刚已经实现了就是用户下单这个接口,所以说呢,在小程序这一端呢,就需要来调用我们这个下单这块咱们其实已经完成了, 那么完成之后呢,咱们这个后端是不是会给小程序来返回一些数据,其中就包括这个订单号啊? 我们是不是一共给他返回了四个数据啊?一个呢就是我们这个订单的 id, 对吧?还有下单时间,还有总的订单金额,还有呢就是这个订单号。 好,那么有了这些数据之后呢,小程序这一端就可以申请微信支付。哎,说白了就是他会发起一次请求,注意他请求的是谁呢?他请求的是我们的商户系统,说白了就是我们这个外卖系统的后端这个服务,那这个时候呢就是非常重要的一个环节了, 就是我们这个后端服务就会去调用微信后台的一个接口,那具体是什么接口呢?其实就是微信的一个下单接口,那具体这个接口长得就是这个样子, 那么你看他的请求方式是 pose 的,然后呢请求 url 就是这个地址,注意这个地址呢就是微信官方给我们提供的这么一个接口地址, 那么我们就需要去请求这个地址,当然请求的时候呢需要提交一些参数,并且呢这个参数是非常复杂的,咱们呢可以具体来看一下这些参数,你看第一个 m、 c、 h i d, 那这个是什么呢?哎,这个其实就是我们这个商户号, 咱们前面呢其实已经介绍过了,那么我们要开通微信支付啊,首先我们是不是就需要使用企业资质,然后去注册一个商户号啊?那么我们通过这个商户号呢就可以完成支付功能,比如说收款呢,付款呢 等等都可以,那么这个地方对应的就是我们这个商户号,哎,然后还有第二个呢, alt trade number, 这个其实代表的就是一个订单号,一般呢就使用我们业务系统里面这个订单号,比如说我们这个项目当中,咱们是不是使用的是系统的那个时间戳作为订单号啊?对吧?那么这就是我们这个订单号, 然后第三个呢 a p p id, 哎,这个呢其实代表的就是我们这个应用的 id, 比如说咱们这个苍穹外卖这个小程序,它是不是也有对应的一个 a p p id 啊? 并且呢我们前面也强调了,要实现这个支付功能啊,我们是不是需要让这个 a p p i d 跟我们这个商户号进行绑定啊? 那具体怎么绑定啊?哎,实际上是在我们这个商户平台去完成绑定的好,那么绑定之后呢,我们在这呢就可以使用这个 a p p id 了,然后还有 description, 这个其实就是一个描述,对吧?还有 notify u l 这个呢,其实是一个 回掉地址,实际上就是当用户通过微信支付付款成功之后呢,这个微信后台会调用这个地址,通过这个地址呢来通知我们的程序。所以说呢,一般这个地址呢,应该就是我们这个商户系统的一个访问地址, 然后这个 mont 其实代表的就是金额,对吧?然后它这里面包括这么两项啊,一个呢就是这个 toto, 还一个是 concurrency, 而这个 toto 呢代表的其实就是具体的这个金额这个数字,然后后边这个呢代表的是币种,比如说人民币啊,或者美元呐等等这些。 然后后边这个 pair 这个呢其实就是支付者,你看这个 open id 其实对应的是谁呢?就是我们当前付款的那个微信用户他的 open id。 那么关于 open id 呢,咱们前面其实都讲过了,对吧?比如说我们这个微信登录的时候,当时我们是不是就获取到了微信用户的 open id 啊?那这个时候呢,其实就是 由这个微信用户去进行付款,然后呢付多少钱呢?是不是就是头头这个地方决定的,那付给谁呢?哎,实际上就是付给我们这个商户,对吧?那么通过这个商户号就可以唯一锁定这个商户,然后呢这个钱就会付到我们对应的这个商户那个银行账户里面去。 那么这个地方呢,我们需要说明一下,是不是我们一定要用这个接口,那么就完成了付款呢?哎,其实还没有啊, 其实我们调用这个接口呢,是生成一个预支付交易单,并没有真的去完成支付,就是我们提前通知微信,对吧?那么我们希望有这么一份交易,那么你先记录一下, 那么一会呢,微信用户呢会通过小程序来完成这份交易,哎,所以说这个叫做预支付交易单,相当于就是先在微信这边是不是去进行一个备案呢?然后呢我们调用完这个接口之后,微信呢会给我们返回一个 字符串,叫做预支付交易标识,哎,其实就是很长的一个字符串,然后呢我们拿到这个字符串之后呢,我们还需要进行一系列的数据处理,那么我们把这些数据啊进行处理,并且签名, 那么我们签名呢,其实就是为了安全啊,那么因为我们这个数据在网络上传输,有可能会被别人截获,对不对?所以说呢,我们会对这些数据啊进行签名,保证我们这个数据的安全。好,那么这些数据准备好之后呢,我们这个后端系统呢,就会把这些数据给他响应到我们这个小程序这一端, 哎,因为你看啊,他是先是小程序是不是请求的我们这个商户系统啊,对吧?然后呢我们进行一系列的处理之后,然后呢会给他封装这些参数,然后呢返回给小程序,然后返回给小程序之后呢用户呢就需要来确认支付。注意这个时候 呢他会调用这么一句代码,大家来看就是叫做微信点 request payment, 这其实是我们小程序端的一个方法,那么他只要一调这个方法,那么他的手机上就会看到这种效果,哎,大家看就会弹出来这么一个框, 那这个框呢咱们应该经常见,对吧?这其实就是吊起了微信支付执行这个方法的时候,你看他是不是需要有这么多的参数,而这些参数是怎么来的呢? 哎,实际上就是我们刚才这个后端,你看在这个地方在组装这些数据,然后呢把这些数据进行处理,最终返回给我们这个小程序,然后我们这个小程序呢直接使用这些数据, 那么我们看到的这些数据呢,其实全都是我们后端返回给小程序的,然后呢小程序把它作为参数来调用这个方法,哎,就是这个 request payment, 那么一调这个方法呢,他这个手机上就会弹出来这么一个框,然后 在这个地方呢我们就能看到这个订单的金额,对吧?然后接下来他是不是就可以点击这个确认支付,然后一点确认支付呢?是不是就会弹一个窗口出来让他输入密码,对吧?那么一旦他这个密码输入完成之后,并且点确定之后呢,他其实就会发起一个请求,请求我们这个微信后台,然后微信后台呢就会进行真正的付款操作, 那么付款成功之后呢就会给这个小程序返回支付结果,那么在小程序这一端呢会显示这个支付结果, 那么到这的话,实际上用户呢就已经完成了付款,这个时候呢就已经把这个钱打到我们这个商户那个银行卡里面去了, 那么到这的话呢,实际上还没有完,因为什么呢?因为我们刚才是通过微信小程序支付,直接跟我们这个微信后台是不是来进行交互来完成付款呢?那这个过程我们这个商户系统知道吗?哎,其实根本就不知道。 至于你刚才这个微信用户有没有真的付款,是付款成功了还是失败了,我们这个商户系统根本就不知道。 实际上在真正完成付款之后呢,还有两个流程,哎,你看就是我们这个微信后台呢,会推送支付结果,然后推送给我们这个商户系统, 那具体怎么推送呢?大家刚才看到了,是不是有一个 notifi ul, 其实就是我们这个回调地址,对不对?微信后台呢就会调用这个地址,而那个地址呢恰好是咱们这个商户系统的一个服务地址,那这样的话呢,是不是就能调用到我们这个商户系统? 那么我们这个商务系统接收到通知之后呢,是不是就可以去更新我们这个订单的状态啊?咱们呢可以结合我们当前这个苍穹外卖这个项目来讲一下,你看咱们前面是不是已经完成了用户下单呢?下单成功之后呢?当时我们是不是设置的那个订单,他的支付状态是 未支付,对不对?而现在呢,人家用户是不是已经完成了付款呢?那这个时候我是不是需要去修改那个支付状态,对吧?所以说呢,在这个地方我们就需要来更新这个订单的支付状态。好,那么这就是咱们这个微信小程序支付的这个实序图,那么这个流程其实是非常非常重要的。 好,那接下来呢,咱们就需要再来强调一下,就是我们整个这个支付的流程当中比较关键的这么几个步骤,哎,咱们一起来看一下,应该是哪几个步骤,应该是比较关键的呀? 首先第一个呢,其实就是这个,就是在我们这个商户系统哎,也就是我们这个后端服务当中来调用微信的这个接口,哎,其实就是预下单的这么一个接口,从而呢生成一个预支付交易单,这个呢应该就是非常非常关键的这么一个步骤。然后第二个步骤是什么呢? 其实就是我们小程序这一端,然后呢吊起微信支付,那这个过程呢,实际上是我们这个微信小程序跟微信后台的一个交互,通过这个过程啊,其实就真正完成了付款。 然后还有一个关键步骤啊,就是什么呢?实现这个支付结果的推送,也就是我们这个微信后台呢,会调用我们这个商户系统的某一个地址, 从而呢把这个结果呢通知给商户系统,然后我们商户系统是不是再去更新这个订单的支付状态,所以说你看啊,整个这个支付流程当中啊,比较关键的应该就是这么三个步骤。

前面呢咱们是已经完成了微信登录这个业务功能的开发,那接下来呢,来看一下咱们今天最后一部分内容,就是导入商品浏览功能代码。 那么在这个章节当中呢,咱们还是通过下边这三个部分来讲。首先第一个呢就是先做一个需求分析,还有接口的设计, 那这个接口设计好之后呢,咱们就直接把我们提供好的现成的代码呢,直接导入到我们项目当中来,最后我们把这个项目跑起来来做一个功能测试就可以了。好,那接下来呢,咱们先来看第一部分,先来做一个需求分析,还有接口的设计, 咱们呢还是先通过这个产品原型啊,来了解一下咱们这块的需求。那用户呢,在进入咱们这个苍穹外卖这个小程序的时候啊,首先呢是不是需要先进行微 微信登录,对吧?那么登录进来之后呢,他就会进入到这么一个页面,大家可以看到在这个页面上其实展示的就是我们商品相关的一些数据,那么你看左侧这一排其实展示的是什么呢?是不应该是咱们的分类数据啊? 你像我们的菜品分类啊,还有套餐分类啊,是不是都会展示在这一列?然后呢右侧这一部分是不是展示的就是具体的一些菜品, 或者是一些套餐,对吧?那比如说我们当前这个产品原型啊,他这展示的是什么呢?是不应该展示的就是我们的菜品数据,对吧?那么我们仔细来观察呢,你会发现啊,每一个菜品后面是不是都会有按钮,但是呢这个按钮还不一样,对吧? 你像上面这个菜品,他是展示成了这么一个叫做选择规格这么一个按钮,而下边这个菜品 呢,他是展示成了一个加号这么一个按钮,那同样都是菜品,为什么展示的这个效果还不一样呢?那这个地方呢,咱们需要来说明一下, 如果说这个菜品呢,我们设置了相应的口味数据,那这个时候呢,这个地方就会展示成这么一个选择规格按钮,那如果说这个菜品呢,我们没有设置口味数据,那对应的这个地方就会展示成一个加号, 那么对于这种选择规格这个按钮呢,我们可以去点击它,一旦点击这个按钮之后呢,就会弹出来这么一个小的窗口,那在这里面展示的这是什么呀? 是不是应该就是我们当前这个菜品所对应的口味数据啊?对吧?你像这个地方是不是设置了这么一个口味叫做忌口,然后具体的值呢?是不是就是这么三个值,分别就是不要葱,不要蒜,还有什么 不要香菜,对吧?这是咱们说了一下,如果这个商品是菜品这种情况,那有可能这个商品呢它还是一个套餐,那如果是套餐呢,将会是这么一个效果,咱们来看一下。 那首先呢,咱们是不是需要来点击左侧这么一个分类,你看叫做人气套餐,对吧?那说明他就是一个套餐的分类,那对应的在右边这个地方呢,是不是就需要给我们展示出来当前这个分类下边具体的套餐一个一个展示在这个位置, 那具体咱们这个套餐都包含什么样的菜品呢?因为前面咱们也都讲过套餐,对吧?那么套餐呢?其实就是菜品的集合,对吧?那当前你这个套餐具体都包含几个菜品呢? 对吧?然后有几份啊?那这些数据我们是不是也需要能够知道?所以这个时候呢,我们就可以去点击这个套餐的这个 图片,那么一点击它,它就会弹出来这么一个窗口,然后在这里面来展示什么呢?其实展示的就是我们当前这个套餐下边所包含的具体的菜品信息, 包括什么呢?有菜品的名称,比如说这个菜品名称是鸡蛋汤,对吧?然后后边乘以一,这说明什么呢?是不是表示这个菜品有一份啊? 因为我这个套餐里面包含的这个菜品是不是可能有多份啊?那乘以一就说明有一个鸡蛋汤,然后下边这个文字代表的是什么呢?其实就是我们当前这个鸡蛋汤这个菜品他具体的一些说明,然后呢你会看到这个地方是不是还有图片呢?对吧?那也就是我们当前这个菜品他所对应的这张图片。 好,那么这是咱们通过这个产品原型啊,来梳理一下我们这块的业务需求,那接下来呢,咱们就需要对着咱们这个产 产品原型来进行一个什么接口的设计,对吧?那么首先呢我们先来分析一下,要想实现这些业务功能,那么我们这个地方应该会涉及到几个接口啊? 那首先呢,我们最容易想到的就是左侧这一列数据,也就是我们这个分类数据,对吧?那这个分类数据是不是需要查?那要查的话呢,对应的是不是就是一个查询分类的接口,对吧?好,这是一个接口, 然后呢就是这右边如果是菜品的话,我是不是需要去查?那根据什么来查这些菜品呢?咱们是不是只需要查询我们当前选中的这个分类,他下边的菜品呢?是不是应该是根据我们某个菜品的分类 id 来查询对应的菜品? 这是不是第二个接口?那然后第三个接口呢?那是不是就是去查咱们这个套餐的数据啊?同样, 那也是根据分类 id 是不是来查套餐?好,那这是第三个接口,那这个套餐具体都包含哪些菜品呢?所以说我们是不是还需要第四个接口,也就是根据这个套餐的 id 来查询它具体包含哪些菜品,对吧?所以说呢,一共是这么四个接口, 但是说到这的话呢,可能有的同学呢会有点疑问啊,就是什么呢?那我这个菜品这个地方还有相应的口味呢,对吧?那我这个口味要不要去查呀? 其实这个地方呢,这个口味呢,我们不需要单独一个接口去查询,当我们查询这个菜品的时候,是不是就可以关联的把这个口味数据给他查上来, 那所以说呢,在咱们这个商品浏览这块呢,一共呢是涉及到了这么四个接口,咱们再来确认一下啊,首先第一个呢,是不是就是这个查询分类这个接口,对吧? 然后第二个接口呢,是不是就是根据我们这个分类 id 来查询菜品?那么再来强调一下,就是我们在查菜品的时候呢,是不是需要把关联的口味数据也一块给他查上来,对吧?然后第三个接口呢,是不是就是根据分类的 id 来查询套餐? 那么最后一个呢,就是根据套餐的 id 来查询包含的菜品,对吧?那接下来呢,咱们是不是就需要具体来看一下,那每一个接口具体应该是怎么设计呢? 首先第一个呢,就是我们这个查询分类这个接口,然后这个请求的路径咱们可以怎么写啊?咱们这个请求路径是不是可以这样? 那么首先呢是杠 user 表示是我们这个用户端发起的请求,对吧?然后呢分类是不是叫做 category 啊?对吧?然后后边呢,我再来一个类似的,然后呢它是一个 get 方式请求 哦,那么我们这个接口需不需要给个参数呢?其实这个地方呢,我们可以传一个参数过去,就是这个太婆,如果太婆等于一,表示我们要查的是这个菜品的分类,如果太婆等于二呢,就表示我要查套餐的分类,如果我们不传过去呢,那是不是就查所有的分类,可以吧?那这样的话,这个接口呢,就非常灵活了, 那返回结果呢,那肯定就是一个数组对象了,对吧?而这里面具体的字段呢,是不是就是咱们这个分类相关的字段呢?对吧?好,那接下来呢,咱们就具体来看一下这个效果。 好来看一下我们这个查询分类,你看刚 user, 刚 category, 刚类似的,然后请求方式呢,就是这个 get 方式,对吧?然后呢我们传的参数呢,就是一个太法,但是呢,你看并不是必须的,对吧?那么如果传个一过来呢,表示我们要查菜品分类,那么如果传二过来呢,表示要查套餐 分类,那如果不传呢?那是不是就查所有的分类?好,这是咱们这个请求参数,对吧?然后这个返回结果呢,咱们重点就看 data 这一块就可以了,那么其他的像什么 code message 我们就不再过多强调了。 那么你看 data 这块,它是不是一个 object 的数组,而这里边这些字段呢?是不是对应的就是我们这个分类表相关的这些字段,对吧?像什么 id 啊, name 啊, status 啊等等这些?这是咱们第一个接口啊,也就是查询分类这个接口,对吧? 然后呢,咱们再来看第二个接口啊,根据咱们这个分类 id 查询菜品,那这个接口我们应该如何来设计啊? 那这块的话,我是不是请求方式还是 get 的?这个没什么好说的,然后呢,请求路径是不是杠 user 杠什么呢?呃,要查的是菜品,所以我们就叫 d, 是吧?然后后边呢,是不是来一个类似的,只根据分类 id 来查, 那么要传的参数呢?那很明显是不是应该就是咱们这个 category id 啊,对吧?然后等于什么什么值,然后给传过来就可以了? 好,那么返回结果应该是什么呀?是不是应该还是一个 object 的数组,然后这个数组里面放的是什么呢?是不是就是咱们这个菜品相关的一些数据?比如说有菜品的 id 啊,还有菜品的名称啊,还有菜品的价格呀,包括这个图片的路径啊等等。那么除了这些菜品基本信息之外,还应该有什么呀? 是不是还应该有这个菜品所包含的口味数据啊?而这个口味的话,是不可能有多个,对吧?好,那接下来呢,咱们就具体来看一下这个接口的设计。 好,你看就是我们当前这个根据分类 id 来查询这个菜品,那么你看请求路径呢?是 gun user, gun dish, gun list 的请求方式呢?还是 get 方式?然后呢,请 有参数,是不是就是这个 category id, 也就是分类的 id, 对吧?然后呢,我们返回来的这个数据呢?你看这个 data 它是不是一个 object 的数组,对吧?然后这里边有什么呢?有 id, 还有以 major, name, price 等等这些。那么除了这些普通的属性之外呢,你看还有个 flares, 是不是应该就是当前这个菜品所包含的口味数据啊?而这个口味呢,是不是可能有多个?所以你看它是不是又是一个 object 的数组?而这个口味具体的这些属性呢,是不是就是这几个,对吧? d 是 i d 啊, d 是啊,还有 name 啊,还有 value 啊等等,这其实就是来自于我们那个口味表,对不对? 好,这是关于咱们这个接口的设计。然后接下来呢,咱们再来看一下第三个接口,也就是根据分类 id 来查询套餐,对吧?那这个接口我们应该如何设计啊?首先呢,这个请求方式是 get 方式,然后 请求路径呢,是不是应该是杠 user, 杠什么呢?呃,应该叫做 set meal, 然后杠 list, 而这个请求参数呢,是不是就是分类 id, 也就是 category id, 对吧? 然后呢,把这个值传过去就可以了,而这个返回数据呢,是不是应该也是一个 object 数组,而这个数组里边放的是什么呢?是不应该就是我们一个一个的套餐相关的数据啊?包括套餐的 id 啊,名称啊,还有图片呢,价格啊等等这些信息。 好,那接下来呢,咱们就具体来看一下这个接口,就是这个接口,对吧?根据分类 id 来查询套餐这个接口,然后你看这个路径是 gun user, gun set meal, 杠 least 的, 然后呢请求方式 get 方式,然后参数呢就是开头块 id, 然后呢返回数据就是这块,这是个哦不,这个的数组,然后呢这里边放的呢,其实全都是我们这个 套餐相关的字段,这就是根据分类 id 来查询套餐这个接口。那接下来呢,咱们再来看一下最后一个接口,也就是根据套餐 id 来查询包含的菜品数据,对吧?那这块我们这个接口应该如何设计啊? 首先呢请求方式是 get, 对吧?都是查询操作,然后呢这个接口的路径呢,我们就叫杠 user, 杠什么呢? set meal, 然后杠什么呢?你看他是查询这个套餐下边包含的菜品数据,对吧?那么我们在这个地方呢,就可以再来个杠 dis, 哎,这就表示我要查询的是套餐下边的 dis, 也就是菜品数据,对吧?那根据什么查呢?我们是根据套餐 id, 对吧? 那这个套餐 id 呢,咱们呢是可以通过一个什么呢路径参数给它传过去,比如说这个套餐的 id 是十啊,那么我们这样来传 就可以了,通过路径参数来传这个 id, 这是请求参数,对吧?好,那这个返回结果应该是什么呀?是不是应该是当前这个套餐所包含的那些菜品信息啊, 而这一个套餐是不是可能会包含多个菜品,对吧?所以我们在这个地方呢,返回的很显然应该是一个数组对象,而这个数组里边包含什么呢?是不是应该包含我们这个菜品的名称,然后还应该包含什么呢?是不是应该是这个菜品的份数,对吧?有几份? 还有就是什么呢?还有就是当前这个菜品他的描述,最后呢就是这个菜品的图片路径,因为他要在那个小的窗口里边来展示我们这个图片呢,对吧? 好,那接下来呢,咱们就具体来看一下这个接口,大家来看一下,就是这个接口,对吧?就是根据套餐 id 来查询包含的菜品。 好,那么你看这个请求路径呢,就是这个样子的, gun user, gun set meal, gun dis, 然后后边呢是通过一个路径参数把这个套餐 id 是不是给传过去,那么这个接口路径呢,相对来说呢稍微复杂一点,然后呢我们这个请求方式呢是 get 方式,然后呢参数呢就是这么一个路径参数,对吧?传过去的就是一个套餐 id, 然后最后返回的呢,你看是一个 object 的数组,然后数组里边包含什么呢?就是这四项,对吧?一个是 copies, 这就是份数,还有呢 description, 就是我们这个菜品的描述,对吧?还有以 major, 其实就是我们这个菜品的图片路径, 然后最后一个呢就是这个内网,也就是菜品的名称。好,那么就是这么几个接口,咱们现在呢就是把这几个接口是不是设计好,那么一会呢?咱们就直接把我们对应的功能代码啊?把它导入到咱们项目当中来,直接来使用就可以了。

接下来咱们继续来看微信登录,刚才呢咱们是说了一下微信登录的流程,并且呢我们是通过 postman 是不是测试了一下微信接口服务,对吧? 最终呢我们是能够拿到微信用户的唯一标识,也就是那个 open id, 对吧?那接下来呢,咱们就需要来做一个需求分析还有设计。 首先呢我们还是先通过这个产品原型来了解一下我们这块的需求,那这块的需求呢,其实还是比较简单的,最终呢其实就是完成登录功能,对吧?能够让我们的后端知道当前这个用户是谁, 那具体他这个登录的方式呢,其实跟我们以前传统的用户名密码登录方式呢,还是有很大的不同的,那么用户名密码登录呢?很显然他是不是就需要去注册账号,并且设置密码,并且呢使用他注册的这个账号密 密码是不是来进行登录?而我们这个微信登录啊,还需要去注册吗?是不是就不用了,对吧?那么我们直接来获得这个微信用户他的唯一标识,能够知道当前这个微信用户是谁,是不是就可以了, 所以你看从界面上来看呢,也是完全不同的。那么首先我们进入到这个小程序的时候呢,他会先弹这么一个窗口,提示我们需要微信登录之后是不是才能点餐, 然后我们点击这个确定按钮之后呢,就会弹这么一个窗口,对吧?那这个时候呢,他其实就是来获得一下我们当前这个微信用户,他的昵称还有头像, 那我们点击允许,这样呢就能进入到这个小程序当中,一旦他进入到我们这个点餐页面之后啊,其实就说明已经完成了登录,那这个时候呢,我们其实就已经知道了当前这个微信用户是谁,对吧?所以你看我们这块这个业务规则 呢,就是什么呢?就是基于微信登录来实现小程序的登录功能。那么如果当前这个微信用户是一个新用户,比如说他是第一次用我们这个小程序来点餐,对吧?那对于咱们这个外卖系统来说呢,这是不是就是一个新用户?那这个时候呢,我们就需要把这个新的用户啊, 给他保存到我们的数据库当中,其实就是完成自动注册,对吧?那接下来呢,咱们是不是就需要来设计一下,要完成我们这个微信登录这个过程,那么需要设计一个什么样的接口,对吧? 那前面呢通过这个微信登录的流程呢?咱们其实已经知道了,要完成微信登录的话呢,我们其实最终就要获得这个微信用户的 open id, 对吧?那么要获得这个 openid 呢,咱们是不是就需要使用到他的一个临时的登录凭证,也就是那个扣的授权码,对不对? 所以说呢,这个接口应该是什么样子的?是不是需要小程序这一端给我们后端发送请求,并且把这个授权码是不是给我们提交过来,对吧?然后呢我们拿着这个授权码,是不是就可以去调微信的接口服务? 然后呢我们需要给他返回什么数据啊?咱们是不是需要给这个用户返回令牌啊?对吧?而这个令牌里边是不是就包含这个用户的唯一标识,对吧?好,那接下来呢,咱们就具体来看一下我们这个接口, 哎,你看,因为是一个登录的请求,所以说呢,这个请求方式呢,是 pose 的,然后呢,这个请求路径是什么呢?是 gun user, gun user, gun login。 哎,这个地方这个路径好像挺奇怪的啊,那么为什么有两个杠 u 字啊?注意,这两个杠 u 字其实它的含义是不一样的啊,那第一个杠 u 字呢,代表的是用户端发过来的请求,那前面我们是不是做了一个约定啊?就是咱们整个这个 项目是不是分成了两个端,那么一个是管理端,一个是我们这个用户端,对吧?而管理端统一是以杠的命,是不是作为前缀,而我们这个用户端呢,是不是就是杠 user 作为前缀?所以说呢,我们第一个这个 user 呢,代表的是某个端它的标识, 然后后边这个 u 字呢,代表的是用户模块,对吧?然后老根印呢,就是具体做什么事,对吧?就是登录,所以这块这个路径呢,看起来好像比较奇怪,对吧?但是呢,他还是整体符合我们这个规范的好,这是关于我们这个请求路径啊,为什么这样来设计。 然后接下来呢,就是我们需要把这个扣的是不是给提交过来,然后呢可以通过请求题你看,以 jason 的方式给我们提交过来就可以了。好,那么我们返回的数据是什么呢?主要就是这么几项啊,一个是 id, 这个呢就是用户的唯一标识,注意这个 id 呢,指的是当 前这个用户在我们的这个数据库里面那个主见值,而这个 open id 是什么呢?是我们这个微信用户在微信那个服务器里面他的唯一标识,对吧?然后最后这个呢就是一个头感,也就是我们这个 j w t 令牌, 好,那这就是我们这个具体的接口设计。那刚才我们在做这个需求分析的时候呢,其实也提到了,就是什么呢?如果当前这个微信用户是一个新用户,那这个时候呢,我们就需要把这个用户的信息,把它保存到我们自己的某张数据库表当中, 所以接下来呢,咱们就需要来看一下我们这个用户这张表,哎,你看我们这个地方呢,涉及到了一个 user 表,对吧?那这里面存储的是什么呢?就是我们这个用户端的这些微信用户的信息,那么你看有 id 对吧?这个呢就是一个主见值,还一个是 open id, 就是我们这 微信用户的唯一标识,还有 name 就是用户的姓名,还有 phone, 就是手机号对吧?还有 sex 性别,还有 id number, 身份证号对吧?呃, what? 这个是微信用户的头像对吧?还有这个 courage time, 就是这个微信用户的注册时间, 那这里边呢,最重要的一个字段是什么呢?那很明显是不是应该就是这个 open id, 对吧?因为它是微信用户的唯一标识。 那在这个地方呢,我们需要来说明一下,就是这个手机号这个字段呢,其实是比较特殊的。那前面呢,咱们其实也提到过了不同的小程序啊,我们能够使用到的权限其实是不一样的, 如果我们是以个人身份注册的这个小程序啊,其实是没有权限获取到这个微信用户的手机号的,如果是以企业的资质注册的这个小程序呢,实际上就能够拿到这个微信用户的手机号, 那这一点呢,大家需要注意一下。好,咱们这是整体做了一个需求分析,还有接口的设计,包括呢还有这个用户表他的这个结构。那么一会呢,咱们就通过代码的方式啊,把咱们这个微信登录功能把它实现出来。

前面呢,咱们已经完成了开发环境的搭建,接下来呢,咱们来看下一个章节,就是导入接口文档。 这个工作呢,是非常重要的,因为我们后边就要进入项目的业务开发了,对吧?而我们的开发方式呢,就是基于当前企业主流的前后端分离开发方式来开发。 那么前后端分离开发方式啊,就要求我们在开发之前呢,需要先将接口定义好, 然后呢,前后端开发人员才能并行开发。所以咱们这个章节呢,就是需要将我们这个项目的接口,把它导入到接口管理平台, 为我们后边的业务开发呢做好准备。这个地方呢,我们需要来说明一下,就是在真实的企业开发中啊,接口设计的过程其实是一个非常 漫长的过程,那么可能需要前后端开发人员多次开会讨论,然后调整,最终呢才能定下来。甚至啊,有可能在开发的过程当中,才发现某些接口定的有问题,还需要再次调整。那么这种情况呢,其实都是非常常见的。 但是呢,由于咱们这个课程时间的关系啊,咱们是没有那么多的时间专门来设计接口。所以说呢,咱们是选择一次性的导入所有的接口。那么后续啊,咱们在开发业务功能的过程当中呢,也会带着大家一起来分析一下对应的接口是怎么确定下来的。为什么要这样来定, 大家呢也可以试着自己来设计一下接口,有意识的来锻炼一下咱们的接口设计能力。那接下来呢,咱们就具体来看一下我们本章节的内容安排。 首先第一个部分呢,就是来确认一下咱们前后端分离开发方式的开发流程,能够认识到接口定义的重要性。第二部分呢,就是具体操作了,也就是将咱们这个项目的接口啊,把它导入到接口管理平台当中。咱们先来看第一个, 也就是确认一下前后端分离开发的流程。那么从这个图上呢,大家应该能够看到,我们在前后端分离开发的时候啊, 第一步呢,就是来定义接口对吧?那么这个接口啊,就确定了前端和后端的交互的过程, 包括请求的地址啊,请求的方式啊,前端提交给后端的数据格式啊,以及后端响应给前端的数据格式啊等等。那么接口定义好之后呢,前后端开发人员就可以根据接口定义来并行开发了, 并且呢,在开发过程当中呢,还可以自测对吧?那么如果前后端都开发好了,就可以进行连调,那么连调啊,主要就是来验证数据格式,比如说前端提交给后端的数据能否正确地接收到呢, 或者是后端响应给前端的数据能否正常展示呢等等。那么如果连条也没有问题了,就可以提测了,也就是交给专门的测试人员来进行测试。通过这个图呢,我们可以看到啊,接口定义呢是非常重要的一个工作对吧?那么只有接口定义好了,我们才能进入开发。 那下边呢,咱们就需要将我们整个项目的接口啊,导入到接口管理平台,为我们后边的业务开发呢做好准备。其实啊,接口管理平台有很多种对吧?那么咱们课上使用的是 y a p i 前面的课程当中啊,大家应该也都用到过了,咱们来看一下具体的操作步骤。咱们呢只需要将我们课程资料当中啊提供的这两个文件,那么大家可以看到是两个 jason 文件对吧?把它导入到我们 y a p i 当中就可以了。 那为什么是两个 jc 文件呢?大家可以看到一个是管理端的接口,还有一个呢是用户端的接口,也就是说我们对整个项目它的接口进行了分类,这样呢会更清晰一点对吧?那接下来呢,咱们就具体来操作一下。 那现在呢,我已经打开了 y a p i 这个平台的网址,那么我们登录一下这个地方呢,我是通过百度账号来登录的好,那么登录进来之后呢,大家可以看到这里边是不是一个项目都没有?在 y a p i 它这个接口管理平台当中啊, 是通过项目的方式来管理我们这些接口的,而我们这个地方呢,是不是应该创建两个项目,因为我们是不是提供了这么两个 jason 文件对吧?大家可以看到在我们资料当中啊,提供了这么两个 jason 文件。好,那接下来呢,我们就分别来创建出来这两个项目,然后把这两个端的接口把它导入进去。 好,那么我们在这个地方点击添加项目对吧?然后这个项目名称呢?咱们就叫苍穹外卖,然后一个是用户端,一个是管理端对吧?比如说我这个是管理端,然后呢我们点击创建, 这样的话呢,我们是不是就创建好了一个项目,呃,然后呢我们可以推出来,再把第二个项目呢,把它创建出来,这个呢就是我们这个苍穹外卖用户端的吧,就是这个好点击创建。那这样的话呢,咱们这两个项目是不是都创建好了。那创建好之后呢, 咱们就可以来通过导入功能把这些接口给他导进去。比如说呢,咱们先来导入管理端的接口吧,那么我们点击这个地方,他是不是进来,进来之后呢,这里边是不是有一个叫做数据管理对吧? 然后呢,我们可以通过这个导入功能来导入我们这个接口,但是这个地方呢,我们需要选择 jason 对吧? 然后呢,我们就可以点击这个区域来找到我们这个 js 文件,呃,咱们这个 js 文件呢,咱们可以来找一下,应该是在这个位置,在我们这个资料当中对吧?然后第一天然后用我们这个资料,然后有项目接口,咱们呢来选择这个就是管理端的这个接口就可以了。 那现在呢他正在上传这个 jc 文件,然后他让我们确认一下,现在是不是要进行数据同步对吧,也就是导入接口,那么我们点击这个确认按钮就可以了。 这是咱们整个这个管理端的接口啊,大家可以看到一共有四十七个,也说这个接口呢还是比较多的,所以它这个导入的时间呢也是比较长的,那么我们耐心等待一下。 好。那么到这的话呢,我们这个接口就已经导入完成了。导入完成之后呢,咱们可以点击接口这个菜单, 那么从这个地方呢就能看到我们这四十七个接口对吧?并且呢这些接口呢还进行了一个分类,大家可以看到我们是不是分到不同的类别,下边 那么有这个员工相关的接口,还有这个套餐相关的接口,还有这个什么工作台相关的接口等等。当然现在呢我们就不再一个一个去看了,后边我们开发到某个具体的业务功能的时候呢,咱们回头再来看这些接口,还需要分析这些接口 好,那么到这的话呢,咱们这个管理端的接口呢,就已经导入成功了对吧?然后呢,我们回到这边来,咱们是不是需要进入用户端这个接口,然后呢到这里边把我们这个用户端接口给他导入进来, 那么还是啊通过这个数据管理对吧。然后这个地方呢选择 jason 这种格式,然后呢点击这个地方找到我们这个用户端接口好,然后我们直接点打开,同样呢,还是先来上传这个 jason 文件对吧?那么上传完成之后呢,他就会提示我们是否同步数据 好,你看他是不是又弹出来这个。那么我们点击确认按钮,大家可以看到啊,我们用户端的接口呢,一共是有二十五个啊,好,那么到这的话呢,咱们这些接口呢就已经导完了,同样呢,我们还是点 点击接口这个菜单,咱们从这个地方呢能够看到全部的接口呢,是二十五个对吧?然后呢,这些接口呢,其实又放在了不同的接口分类下边,你看有这个什么有地址布的接口,还有什么呢? 还有这个什么套餐浏览的接口对吧,什么店铺的操作的接口,用户操作的接口等等。那么不同的接口全都放在不同的这个分类下边了。 好,那么到这的话呢,咱们整个项目啊用到的所有的接口就一次性的导入到我们这个平台上面来了。那么后续呢?我们就可以基于这些接口来开发咱们的业务功能。

呃,有同学问苍穹外卖可以做闭社项目吗?当然可以哈。那如果使用苍穹外卖这个项目来作为你的闭社项目呢?我建议啊,你可以把苍穹外卖项目呢稍微简化一下啊,把其中的订单的支付订单模块这一块业务以及图形报表都可以砍掉,要不然你的这个闭社项目呢,就会显得有些呃,模块太多了。 而且如果你使用这个项目来作为必设项目,那我就建议你要扎扎实实的把苍穹外卖当中所涉及到的一些业务,一些技术要搞清楚,这样你在做遍答辩的时候才能够游刃有余,轻松拿捏了。