萤火商城test
萤火商城test
介绍
特别感谢萤火科技提供的开源项目！
涉及端：电脑PC端、app端、H5应用端、小程序端
代码仓库:https://gitee.com/wen-junyu/firefly-mall-test
前端环境搭建
一、安装HBuilderX
访问https://www.dcloud.io/hbuilderx.html，根据你的操作系统，下载对应的版本。
这里以windows举例：
下载好后，将其解压即可。为了方便演示，我新建了一个文件夹APPtest。
tips：最好使用英文目录!
二、运行demo代码
解压完毕后，打开HBuilderX，选择打开目录，打开app-shizhan--code--01-demo--yoshop2.0-uniapp文件夹。
打开文件夹后，HBuilderX左侧会展示项目列表，此时，点击项目选中它，然后运行到谷歌Chrome浏览器。
tips：需要选中该项目，再点击运行到浏览器。否则会报无法运行的错误。
在运行的过程中，会报插件缺失的错误：
此时，你只需点击报错提示的链接，按图示方法安装缺失的插件。
tips：安装插件需要注册账号。
注册账号+验证邮箱+社区身份验证参考链接：
https://ask.dcloud.net.cn/account/setting/profile/
插件安装成功后，点击小三角运行按钮，重新运行它。
运行成功后，浏览器会自动打开前端页面。
三、解决跨域问题
此时，虽然打开了页面，但是因为跨域问题，我们拿不到商城的数据，会提示网络请求出错。
我们需要安装一个谷歌插件来解决此问题。
01 在浏览器地址栏输入：chrome://extensions/ 打开谷歌浏览器拓展程序坞。
02 打开app-shizhan文件夹，将allow-cors-access-control.crx文件拖拽进刚刚访问的谷歌浏览器拓展程序坞。
03 安装成功，如图操作，点击浏览器右上角的图标，将插件固定在浏览器上。
04 点击插件，并点击Toggle ON按钮，使插件变为橙色，完成安装。
四、使用程序
至此，demo演示程序安装完毕。
刷新页面，数据、图片、文案等，都能正常展示了。你可以上手实操，使用它的各个功能。
但是，因为是demo代码，请求的接口是商城作者提供的，你无法修改商城的数据，比如添加、删除商品，增加商品分类，随意注册账号等操作。
如果想任意修改，自由操作，还需要搭建一套本地服务。
后端环境
一、安装phpstudy
访问链接：https://www.xp.cn/download.html，根据你的操作系统，下载对应的phpstudy软件。
下载后直接安装并打开软件，然后依次启动Mysql和Apache：
tips：如果你的电脑上已运行Mysql，请打开cmd窗口，输入services.msc，把本机的Mysql服务停掉，再启动phpstudy中的Mysql。
二、配置数据库
01 切换到数据库，创建一个yoshop库，用户名和密码设置为yoshop。
tips：数据库、账号和密码不要自行命名！！！
因为我修改过后端的代码和配置文件。如果你自行命名，会导致数据库连接异常。
02 给yoshop库导入数据
依次导入app-shizhan文件夹下面的这两个sql文件：
app-shizhan\code\02-local\yoshop2.0-admin\public\install\data\install_struct.sql
app-shizhan\code\02-local\yoshop2.0-admin\public\install\data\install_data.sql
tips：导入会耗费一些时间，请耐心等待。
三、配置网站
切换到网站并创建网站：
- 域名设置为www.yoshop.com
- 根目录选择app-shizhan\code\02-local\yoshop2.0-admin\public
- 其他保持默认
四、使用admin后台
在浏览器中输入http://www.yoshop.com/admin便可访问后台。
tips：注意是http，不是https！
用户名：admin，密码：yinghuo
登录后，admin的各项配置，不用动，点击这里，直接进入商城。
tips：商城的用户名和密码同admin一样，为：admin+yinghuo。
在商城，你便可以随便操作，肆意妄为了。
比如，我先添加了一个叫辣条的商品。
五、使用本地uni-app
后台服务搭建好后，前端环境，也需要对应修改。
01 再次打开HBuilderX，移除上期用到的demo项目。
02 重新选择app-shizhan文件夹下02-local内的yoshop2.0-uniapp文件夹。
03 选中后，运行到谷歌Chrome浏览器，搜索商品“辣条”，就能查到上一步在后台添加的商品了。
04 你也可以使用任意的手机号+任意的6位验证码，登录会员：
tips：我改了后端代码，无须获取短验即可登录。否则，你需要去配置付费的短信业务，很麻烦。
至此，本地local的前端、后端服务已经打通，去试试各个功能吧，完成你的初体验~
打包app
一、打包
打开HBuilderX，在目录末尾找到manifest.json文件，编辑它。
01 重新获取AppID
获取的时候，需要输入HBuilder用户名和密码，这个账户，便是我们项目02：前端环境中，创建的账户。
不过，想要获取AppID，你需要认证账号，这里按照提示一步步操作就行，没什么要讲的。
注册账号+验证邮箱+社区身份验证参考链接：
https://ask.dcloud.net.cn/account/setting/profile/
至于manifest.json下方的应用名称和应用描述，你可以随意输入。比如：你“做”的是面向xx连锁超市的项目，那么可以取名xx超市商城；再比如，你“做”的是面向xx贫困地区的项目，你可以取名xx扶贫商城。
02 选择发行方式
对于新人来说，本地打包特麻烦，因此我建议你直接选择HBuilderX提供的云打包服务。
按照如下配置，最后点击打包按钮。
03 打包
如果是在工作日，打包的等待时间较长（通常在20min-60min）。因为我是在周末给大家做教程演示，没等一会儿就打包成功了。此时，HBuilderX会提供一个apk的临时下载链接，点击链接即可下载apk包。
二、安装apk到安卓手机
将下载好的apk文件传输到手机上并安装。
但是，打开软件后，我们并不能访问后端服务：
这很正常。
因为商城的本地服务是在电脑上运行的，而手机无法直接访问到电脑的服务。
三、配置代理
01 Fiddler工具配置
Fiddler的配置方法，参照这篇文章依次操作即可（https://www.cnblogs.com/wushuaishuai/p/9300262.html）。
tips：使用Fiddler应该是软件测人的基操，我就不重复讲了。
配置完成后，重新打开手机app，就能访问到电脑上的后台服务了。
当然，你也可以在电脑上下载手机模拟器（需要设置模拟器内wifi代理），安装并使用刚刚打包的apk。
tips：本次打包的apk，部分icon图标无法正常显示，只能将就使用，毕竟我们使用的是云打包，靠的是别人赏饭吃。
打小程序包
01 注册账号
首先，注册一个小程序账号，访问如下链接。
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
直接拉到最下面，点【前往注册】。因小程序注册较麻烦，你可以使用测试号：
这样，直接就能拿到一个AppID：
02 发行打包
拿到AppID后，打开HBuilderX -> 选择yoshop2.0-uniapp项目 -> 顶部菜单栏 -> 发行 -> 小程序-微信。
发布成功后，HBuilderX 会提供打包后的文件路径，如：/unpackage/dist/build/mp-weixin
03 编译调试
下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装后，打开微信开发者工具，导入刚刚打包的项目/unpackage/dist/build/mp-weixin文件夹。
在微信开发者工具内编译调试即可：
预览：会提供给你一个二维码，使用扫一扫，可以进入小程序
真机调试：手机和wifi处于相同网络下，可以在手机上直接唤起小程序，如下图所示。
但是，因为涉及到在手机上使用，同样需要使用Fiddler做代理。
打H5页面
同上，此处仅提供操作步骤：
-
打开HBuilderX -> 顶部菜单栏 -> 发行 -> 网站-PC Web或手机H5
-
发布成功后，HBuilderX 会提供打包后的文件路径，如：/unpackage/dist/build/h5
-
打开phpstudy，新建一个网页，根目录选择刚刚打包好的文件夹。
此时，在浏览器中输入http://www.yoshop-h5.com便可访问到h5页面。
tips：注意是http，不是https！
关于IOS-APP
打包苹果手机的安装包，需要iOS证书(.p12)和描述文件(.mobileprovision)，因为我没有苹果环境，故无法操作，感兴趣的读者可以根据HBuilderX的教程自行研究。
