【膳逸】项目搭建（第九部分）小程序端前端搭建

13. 小程序端前端

13.1. 配置项目

打开manifest.json文件，配置你自己的微信小程序AppID。

插播一条紧急新闻：下面那个baseUrl的暂时先写成localhost吧。不然小程序好像没法登录。

修改完别忘记保存！

对了，注意看一下appid。

13.2. 初始化项目

在shanyi目录下，打开终端，执行命令。

cnpm install

注意事项：小程序项目和前端vue项目，都不要随便移动在硬盘上的位置。如果移动了位置，必须删除项目中的node_modules文件夹，然后重新初始化项目。另外项目最好不要放在中文目录下，否则容易导致项目无法启动。

警告先不用理会，没有报错就行。

13.3. 运行项目

尝试运行项目。注意，如果运行后控制台提示成功但是没有自动打开微信开发者工具，可能是因为之前就打开了微信开发者工具没重启过，只需要关掉，然后重新运行即可。

14. 手机与电脑处于相同网段

注意，我们已经将项目部署到腾讯云服务器上了，因此无需再进行以下配置，看看就好。

在手机上运行小程序，往往出现最多的问题是小程序无法连接电脑上的Java程序。这其中的原因很简单，你的手机和电脑处在不同的网段。比如说在公司环境中，电脑插的是网线，手机连接的是WIFI，恰好有线网络和WIFI网络是两个网段，从而导致手机上的小程序无法调用电脑上的JavaWeb方法。再有就是校园网环境中，即便你的电脑和手机都连接的是图书馆WIFI网络，但是校园网中设备是隔离的。你在电脑上ping不通手机的IP地址，所以手机的小程序也就无法访问电脑的Java程序了。

14.1. 360随身WiFi电脑版

它其实就是利用无线网卡创建WIFI局域网。你让手机连接这个局域网，手机和电脑就能在相同网段了。

这是官网地址，https://wifi.360.cn/easy/pc，没事，已经替大家试过水了，别害怕，没广告（有广告[好在不是弹窗广告，只是在界面里有一条广告，看着不顺眼叉掉就好]），没弹窗（有弹窗[在设置里关掉]），没捆绑，稍微设置一下就行。但是安装过程中甚至没法选择安装路径，这点不好，需要整改。

在学校我不清楚是不是要安装那个校园版的，或者在下面的设置里勾上开启校园网模式？先试试正常的能不能行吧，不行再试试校园版。

然后把main.js里的baseUrl地址改成他给你分配的ip地址就行。

14.2. 用手机热点创建局域网

如果上面的360随身WIF方案对你无效，你可以试试手机热点这种方案。把手机热点共享给笔记本电脑，电脑和手机就处在相同网段了。

也要把main.js里的baseUrl地址改成他给你分配的ip地址就行。

无论你用那种方案，都要查询电脑在新创建出来的局域网WIF环境下的IP地址，然后修改baseUrl变量的IP地址，这样小程序才能把Ajax请求发送到电脑上面。

使用Windows的同学，务必把系统防火墙关闭，否则会拦截小程序Ajax请求。