# 萤火商城test **Repository Path**: qian_u/firefly-mall-test ## Basic Information - **Project Name**: 萤火商城test - **Description**: 涉及端：电脑PC端、app端、H5应用端、小程序端 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2022-08-29 - **Last Updated**: 2022-08-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 萤火商城test ## 介绍 特别感谢萤火科技提供的开源项目！ 涉及端：电脑PC端、app端、H5应用端、小程序端 ## 前端环境搭建 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120009_cf777c9d_8576777.png "屏幕截图.png") ### 一、安装HBuilderX 访问https://www.dcloud.io/hbuilderx.html，根据你的操作系统，下载对应的版本。 这里以windows举例： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120128_bc2c4b96_8576777.png "屏幕截图.png") 下载好后，将其解压即可。为了方便演示，我新建了一个文件夹APPtest。 > tips：最好使用英文目录! ![](https://images.gitee.com/uploads/images/2022/0612/120218_772fb475_8576777.png "屏幕截图.png") ### 二、运行demo代码 解压完毕后，打开HBuilderX，选择打开目录，打开app-shizhan--code--01-demo--yoshop2.0-uniapp文件夹。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120323_cd8ccb5d_8576777.png "屏幕截图.png") 打开文件夹后，HBuilderX左侧会展示项目列表，此时，点击项目选中它，然后运行到谷歌Chrome浏览器。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120352_fb964404_8576777.png "屏幕截图.png") > tips：需要选中该项目，再点击运行到浏览器。否则会报无法运行的错误。 > ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120421_ce2b3329_8576777.png "屏幕截图.png") 在运行的过程中，会报插件缺失的错误： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120459_e13cf88b_8576777.png "屏幕截图.png") 此时，你只需点击报错提示的链接，按图示方法安装缺失的插件。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120536_40ecd2a6_8576777.png "屏幕截图.png") tips：安装插件需要注册账号。 注册账号+验证邮箱+社区身份验证参考链接： https://dev.dcloud.net.cn/ https://ask.dcloud.net.cn/account/setting/profile/ 插件安装成功后，点击小三角运行按钮，重新运行它。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120613_0b1e03e6_8576777.png "屏幕截图.png") 运行成功后，浏览器会自动打开前端页面。 ### 三、解决跨域问题 此时，虽然打开了页面，但是因为跨域问题，我们拿不到商城的数据，会提示网络请求出错。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120659_ccf86f7e_8576777.png "屏幕截图.png") 我们需要安装一个谷歌插件来解决此问题。 01 在浏览器地址栏输入：chrome://extensions/ 打开谷歌浏览器拓展程序坞。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120726_25c8578a_8576777.png "屏幕截图.png") 02 打开app-shizhan文件夹，将allow-cors-access-control.crx文件拖拽进刚刚访问的谷歌浏览器拓展程序坞。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120751_a6522c17_8576777.png "屏幕截图.png") 03 安装成功，如图操作，点击浏览器右上角的图标，将插件固定在浏览器上。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120822_479ea9ca_8576777.png "屏幕截图.png") 04 点击插件，并点击Toggle ON按钮，使插件变为橙色，完成安装。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120846_ca5dcd67_8576777.png "屏幕截图.png") ### 四、使用程序 至此，demo演示程序安装完毕。 刷新页面，数据、图片、文案等，都能正常展示了。你可以上手实操，使用它的各个功能。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/120912_cd1fe646_8576777.png "屏幕截图.png") 但是，因为是demo代码，请求的接口是商城作者提供的，你无法修改商城的数据，比如添加、删除商品，增加商品分类，随意注册账号等操作。 如果想任意修改，自由操作，还需要搭建一套本地服务。 ## 后端环境 ### 一、安装phpstudy 访问链接：https://www.xp.cn/download.html，根据你的操作系统，下载对应的phpstudy软件。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/121622_8fdf50c9_8576777.png "屏幕截图.png") 下载后直接安装并打开软件，然后依次启动Mysql和Apache： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/121659_eb4b4874_8576777.png "屏幕截图.png") > tips：如果你的电脑上已运行Mysql，请打开cmd窗口，输入services.msc，把本机的Mysql服务停掉，再启动phpstudy中的Mysql。 ### 二、配置数据库 01 切换到数据库，创建一个yoshop库，用户名和密码设置为yoshop。 > tips：数据库、账号和密码不要自行命名！！！ > > 因为我修改过后端的代码和配置文件。如果你自行命名，会导致数据库连接异常。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/121808_e5e31980_8576777.png "屏幕截图.png") 02 给yoshop库导入数据 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/121829_a553db6f_8576777.png "屏幕截图.png") 依次导入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：导入会耗费一些时间，请耐心等待。 ### 三、配置网站 切换到网站并创建网站： 1. 域名设置为www.yoshop.com 2. 根目录选择app-shizhan\code\02-local\yoshop2.0-admin\public 3. 其他保持默认 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122100_221f0726_8576777.png "屏幕截图.png") ### 四、使用admin后台 在浏览器中输入http://www.yoshop.com/admin便可访问后台。 tips：注意是http，不是https！ 用户名：admin，密码：yinghuo ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122138_6757da30_8576777.png "屏幕截图.png") 登录后，admin的各项配置，不用动，点击这里，直接进入商城。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122218_4db0f14a_8576777.png "屏幕截图.png") > tips：商城的用户名和密码同admin一样，为：admin+yinghuo。 在商城，你便可以随便操作，肆意妄为了。 比如，我先添加了一个叫辣条的商品。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122250_321e2924_8576777.png "屏幕截图.png") ### 五、使用本地uni-app 后台服务搭建好后，前端环境，也需要对应修改。 01 再次打开HBuilderX，移除上期用到的demo项目。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122314_dd3dc648_8576777.png "屏幕截图.png") 02 重新选择app-shizhan文件夹下02-local内的yoshop2.0-uniapp文件夹。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122338_f8eba788_8576777.png "屏幕截图.png") 03 选中后，运行到谷歌Chrome浏览器，搜索商品“辣条”，就能查到上一步在后台添加的商品了。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122401_bc923b12_8576777.png "屏幕截图.png") 04 你也可以使用任意的手机号+任意的6位验证码，登录会员： > tips：我改了后端代码，无须获取短验即可登录。否则，你需要去配置付费的短信业务，很麻烦。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122432_ab4e5395_8576777.png "屏幕截图.png") 至此，本地local的前端、后端服务已经打通，去试试各个功能吧，完成你的初体验~ ## 打包app ### 一、打包 打开HBuilderX，在目录末尾找到manifest.json文件，编辑它。 01 重新获取AppID ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122629_56d0c535_8576777.png "屏幕截图.png") 获取的时候，需要输入HBuilder用户名和密码，这个账户，便是我们项目02：前端环境中，创建的账户。 不过，想要获取AppID，你需要认证账号，这里按照提示一步步操作就行，没什么要讲的。 > 注册账号+验证邮箱+社区身份验证参考链接： > > https://dev.dcloud.net.cn/ > > https://ask.dcloud.net.cn/account/setting/profile/ 至于manifest.json下方的应用名称和应用描述，你可以随意输入。比如：你“做”的是面向xx连锁超市的项目，那么可以取名xx超市商城；再比如，你“做”的是面向xx贫困地区的项目，你可以取名xx扶贫商城。 02 选择发行方式 对于新人来说，本地打包特麻烦，因此我建议你直接选择HBuilderX提供的云打包服务。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122755_83937af1_8576777.png "屏幕截图.png") 按照如下配置，最后点击打包按钮。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/122817_1beb182e_8576777.png "屏幕截图.png") 03 打包 如果是在工作日，打包的等待时间较长（通常在20min-60min）。因为我是在周末给大家做教程演示，没等一会儿就打包成功了。此时，HBuilderX会提供一个apk的临时下载链接，点击链接即可下载apk包。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130322_afc7fb1c_8576777.png "屏幕截图.png") ### 二、安装apk到安卓手机 将下载好的apk文件传输到手机上并安装。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130335_7c6e9720_8576777.png "屏幕截图.png") 但是，打开软件后，我们并不能访问后端服务： 这很正常。 因为商城的本地服务是在电脑上运行的，而手机无法直接访问到电脑的服务。 ### 三、配置代理 01 Fiddler工具配置 Fiddler的配置方法，参照这篇文章依次操作即可（https://www.cnblogs.com/wushuaishuai/p/9300262.html）。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130304_6f19881e_8576777.png "屏幕截图.png") > tips：使用Fiddler应该是软件测人的基操，我就不重复讲了。 > 配置完成后，重新打开手机app，就能访问到电脑上的后台服务了。 当然，你也可以在电脑上下载手机模拟器（需要设置模拟器内wifi代理），安装并使用刚刚打包的apk。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130406_6abc5a6b_8576777.png "屏幕截图.png") > tips：本次打包的apk，部分icon图标无法正常显示，只能将就使用，毕竟我们使用的是云打包，靠的是别人赏饭吃。 **打小程序包** 01 注册账号 首先，注册一个小程序账号，访问如下链接。 https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN 直接拉到最下面，点【前往注册】。因小程序注册较麻烦，你可以使用测试号： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130507_f38c4554_8576777.png "屏幕截图.png") 这样，直接就能拿到一个AppID： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130530_8d90f059_8576777.png "屏幕截图.png") 02 发行打包 拿到AppID后，打开HBuilderX -> 选择yoshop2.0-uniapp项目 -> 顶部菜单栏 -> 发行 -> 小程序-微信。 发布成功后，HBuilderX 会提供打包后的文件路径，如：/unpackage/dist/build/mp-weixin ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130603_2e7f115d_8576777.png "屏幕截图.png") 03 编译调试 下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装后，打开微信开发者工具，导入刚刚打包的项目/unpackage/dist/build/mp-weixin文件夹。 在微信开发者工具内编译调试即可： ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130629_b2eca73a_8576777.png "屏幕截图.png") 预览：会提供给你一个二维码，使用扫一扫，可以进入小程序 真机调试：手机和wifi处于相同网络下，可以在手机上直接唤起小程序，如下图所示。 但是，因为涉及到在手机上使用，同样需要使用Fiddler做代理。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130657_d294d78e_8576777.png "屏幕截图.png") 打H5页面 同上，此处仅提供操作步骤： 1. 打开HBuilderX -> 顶部菜单栏 -> 发行 -> 网站-PC Web或手机H5 2. 发布成功后，HBuilderX 会提供打包后的文件路径，如：/unpackage/dist/build/h5 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130734_11a19650_8576777.png "屏幕截图.png") 3. 打开phpstudy，新建一个网页，根目录选择刚刚打包好的文件夹。 ![输入图片说明](https://images.gitee.com/uploads/images/2022/0612/130810_e9424e6e_8576777.png "屏幕截图.png") 此时，在浏览器中输入http://www.yoshop-h5.com便可访问到h5页面。 > tips：注意是http，不是https！ 关于IOS-APP 打包苹果手机的安装包，需要iOS证书(.p12)和描述文件(.mobileprovision)，因为我没有苹果环境，故无法操作，感兴趣的读者可以根据HBuilderX的教程自行研究。