验证小程序功能 - 微信开发者工具调试
大家好，上节课呢，我们已经用 Quest 模式完成了底部导航栏的开发，并且已经在浏览器中看到了效果。
在开发后续的功能之前呢，我们需要先验证一下当前程序在小程序中运行的效果，以免后续功能较多的时候，再去验证出现一堆问题。
关于平台验证
APP 端呢通常不会有太大的问题，所以暂时呢，我们就只先验证小程序。
启动微信小程序
停止当前项目
我们先停止当前正在运行的项目。
查看启动脚本
然后打开资源管理器，打开客户端的目录，找到其中的 package.json。
打开之后呢，找到 scripts，下面有一个 dev:mp-weixin，这个脚本呢，就是用来启动微信小程序的。
我们来启动试一下。
启动小程序
点击”终端”，新建一个终端。
输入 cd 进入到当前的目录：
cd client进入到 client 目录下，然后执行：
pnpm dev:mp-weixin然后回车。
配置微信开发者工具
启动之后呢，我们来看一下下面的信息。
上面的提示我们忽略，从这里开始看：
正在打开微信小程序开发工具...
打开微信小程序开发者工具失败，
请确保微信小程序开发者工具服务端口已启用。
可以手动打开微信小程序开发者工具并导入项目。开启服务端口
打开开发者工具
我们先手动打开微信开发者工具试一下。
打开之后，提示我们微信扫码登录，我们来登录一下。
开启服务端口
登录之后，点击右上角的”设置”，然后点击”安全”。
打开”服务端口”啊，把这几项都打开。
重启项目
然后我们再重启一下项目。
按 Ctrl + C 关闭项目，把这几个终端都删掉，重新打开一个终端。
重新打开之后呢，还是提示打开微信开发者工具失败，那我们就手动打开一下。
导入项目
点击”导入”，然后直接复制这个地址，然后点击右下角的”选择文件夹”。
关于 AppID
我们看到这个地方，提示：
当前开发者未绑定此 AppID这个 AppID 是哪来的呢？我们先复制一下，然后到这里面全局搜索一下。
按键盘上的 Ctrl + Shift + F，然后在这里粘贴。
我们搜到了两个结果，点开看一下。
原来是这个 .env 文件中已经配置好了一个 AppID 啊，以及一个 uni-app 的 AppID 啊。
关于 AppID 配置
这两个 AppID 呢，我们在后面都要去修改。暂时我们可以不用去管它，等到后面我们去注册 uni-app 和微信小程序的时候呢，再去修改。
使用测试号
我们回到小程序的界面上，然后把它给清理掉，然后点击”使用测试号”。
点击”创建”，点击”信任并运行”。
现在我们的软件就在微信小程序里面运行起来了。
启动服务端并测试
我们启动一下服务端，然后来验证一下功能。
这里呢，我们只需要启动一个服务端就行了，所以选择”启动服务端”就行。
启动好之后，我们到这里来登录。
发现问题
我们发现微信小程序的这个统计首页不需要登录就打开了，那是因为我们之前在开发的时候，把统计页面设置成了不需要登录就能打开，然后后来忘了改了，后面我们再去修改。
所以我们打开任意其他的一个页面，应该都会跳到登录页面。
现在跳到登录页面之后呢，我们输入手机号码，然后打开右侧的控制台，点击这个 “Network” 网络。
我们点击”获取验证码”，发现这里的网络请求报错了。
修复网络请求问题
查看请求详情
我们点开这个 “Header”，先点击这个请求，然后点击 “Header” 看一下。
我们看到发起的请求，它的域名很奇怪，是一个 uk 开头的，正常来讲应该是 localhost。
全局搜索域名配置
那么这个域名是哪来的呢？复制一下，然后继续按住键盘上的 Ctrl + Shift + F 啊，在编辑器里面全局搜索一下。
搜到好几个结果，我们先看第一个。
这个显然不是用来定义我们的后端服务地址的，所以呢这个先不管。
找到配置文件
然后点到第二个，这里第二个文件，啊这是一个注释信息。
然后再看下面的，这里有一个第二个请求地址啊，当前的这个框架呢，应该是给我们定义了两个后端的地址。
我们把它都修改一下，都改成这个 localhost 的地址。
修改微信小程序配置
然后继续往下看，这三个呢，都是在当前的这个 utils 文件里面啊。
这里呢，它是把微信小程序里面分别设置了三个地址，这三个地址用的都是它。
我们看一下它怎么用的，它是在这个地方：
这段代码是什么意思呢？意思就是如果这个字段定义有值，那么就用它；如果说它是空的，那么就用它这个 baseURL。
baseURL 呢，就是我们前面的配置文件里面定义的地址 localhost。
清空配置
那么所以呢，我们把这三个地址给清空就行了。这样的话，这三个地址都为空，那么它就会默认使用 baseURL。
按一下 Ctrl + S 保存。
测试修复效果
保存之后呢，我们看一下会不会自动生效。
在这里面再点一下啊，先输入手机号码，然后再点击”获取验证码”。
仍然是发送失败。
重启项目
发送失败的话，我们就重启一下。
按 Ctrl + C，重新执行一下这个命令。
这里弹出来一个提示，应该又是自动把刚才的那个 AppID 给应用进去了，我们点击”确定”先。
验证登录功能
我们再重新试一下登录，随便点一个进来，然后输入手机号码。
先打开服务端的控制台，然后点击”获取验证码”。
我们看到左侧呢，已经正常输出了验证码 479965，点击”登录”。
修复成功！
看起来呢，现在已经运行成功了。
手机预览测试
我们还可以继续在手机上预览一下。
生成预览二维码
点击这里的”预览”，开发者工具呢会给我们编译出来一个二维码。
然后用当前登录微信开发者工具的这个微信去扫描一下这个二维码。
扫码之后呢，手机上就会自动打开这个小程序，它是一个预览的状态，并且只能当前登录微信开发者工具的这个微信预览。
测试登录功能
我们看一下，打开之后呢，默认是在统计的页面。
然后点击”记账”，点一下之后，跳到了登录页。
输入手机号码，我们再点击”获取验证码”，啊发现获取失败了。
分析失败原因
原因是因为当前的客户端请求的是 localhost，但是 localhost 指向的是我们本地。
那么运行在我们手机上的这个小程序呢，它的 localhost 指向的是我们手机端，但是我们手机端上并没有去部署对应的服务端，所以报错了。
这是正常现象
最终实际的生产环境，我们的服务端一定是指向一个域名，那样就可以正常发出请求了。
提交代码
小程序的功能验证完成之后呢，证明我们当前项目已经完成的功能代码没有什么太大的问题啊。
这里涉及到几个文件的修改，我们来提交一下。
遇到问题？
如果在验证小程序功能时遇到问题，可以扫描下方的微信二维码帮您看下（免费咨询）
下一步
小程序功能验证完成后，接下来我们需要：
