H5盲盒商城源码搭建教程(开源+微信登录+支付对接+短信接口)

盲盒经济席卷了一场空前的商城盛宴,商城系统由之前的B2C、B2B到多玩法,多模式的系统,已经开辟了一条适合广大消费者消费,迎合广大消费者心理需求和时代发展的道路。从去年开始,一个全新的盲盒模式商城横空出世,得到了广大网友的欢迎。

而对于盲盒商城来讲,是适用于各类大中小型商家、企业的,也便于建立自己的私域流量圈,那么一套完整的盲盒代码是很有必要的。它不仅仅能满足基本的盲盒商城功能,而且必须要开源便于二次开发,要能实现如今必备的微信登录,在线支付付款和短信通知等功能。小编今天推荐的这套便是满足以上所有需求,而且带有微信公众号无限回调代码,也就是说如果你要搭建多套、多个盲盒商城,不用死板地按照一个公众号3个授权域名来使用。接下来给大家具体讲解本套源码的具体搭建流程。超详细的图文教程哦。


环境配置

php7.1以上,一定要linux cenost7安装宝塔Nginx,php管理那里删除掉禁用函数putenv,安装Redis扩展,然后重启php服务!

创建网站,上传后端压缩包源码到目录解压,设置运行目录,伪静态:伪静态设置为thinkphp(不配置伪静态会h5页面没有数据),将数据库.sql文件导入数据库,修改数据库连接信息文件.env。

 后台地址:网址/mhsc.php 用户admin 密码123456

注意盲盒3.0不要搞HTTPS证书了,有炮灰功能会冲突,要搞只能搞炮灰的https,二维码主站不要搞。

前端配置方式

前端打包配置:

下载hbuilder软件,https://www.dcloud.io/,导入解压好的前端文件夹,搜索盲盒商城改成你的网站名称,修改manifest.json、修改main.js网址,重新获取appid,然后发行至PC或H5将H5里面的文件上传网站/public/H5/目录进行替换。

前端配置方式.png

后台设置

后台默认地址:网址/mhsc.php 用户admin 密码123456

后台插件中心是后台FastAdmin开源框架自带的,不代表网站,大部分为半成品无对接,请勿自行购买安装。短信、支付、登录安装配置请参考下面教程为准。炮灰域名设置:在宝塔网站管理那里增加一个炮灰域名的绑定。

 后台设置.png

后台设置域名

 后台域名.png

http://你的二维码主站.cn/h5/#/pages/index/redirect  这个链接在草料二维码平台上生成一个你的二维码,以后就用这个二维码发给用户或者代理,就会跳转到炮灰,二维码主站域名和网址不要发给别人,避免被封。如果炮灰被封了后只需要替换后台的炮灰域名,增加宝塔网站的炮灰绑定。

短信接口

短信宝注册申请地址http://www.smsbao.com/

个人实名认证后申请VIP报备 填自己的项目名称,模板:你的短信验证码是:{code},申请后联系短信宝客服审核。在后台配置短信宝:/addons/smsbao/Smsbao.php这里一定要修改成:你的短信验证码是:{$params['code']}

短信.png

支付接口

第三方支付接口:/addons/eepay/  对接易支付和码支付 只要是易支付系统平台的都可以对接,百度:易支付 或者码支付 基本上都可以用,万能接口

这两个码支付我测试过可以用:龙腾码支付https://mzf.fateqqq.com/login?tg=20578  套餐便宜,但是要扣点 最低1%;码支付https://www.codepay.net/。选择一个靠谱的,先联系人家客服能不能用,可以就申请账号对接。 

 支付.png

自己通过易支付系统配置微信官方支付的,需要注意:

1、源码h5里面默认只开启支付宝付款按钮,需要你用HB软件修改一下将微信付款按钮弄出来:去掉那两个注释符号,然后保存编译,发行导出,上传h5目录替换。

2、微信无限回调登录在/application/common/controller/Wechat.php ,去淘宝或者闲鱼购买 无限回调,如果想要关闭微信登录,在HB软件里面如图添加注释代码,编译替换h5。

设置调出插件管理菜单

 阿里云oss配置地址 /application/admin/controller/Ajax.php 

本地上传和阿里云oss都要关闭插件那里七牛云那个按钮,否则不成功。

网站默认阿里云上传(使用本地上传接口时,先将”Ajax.php”重命名为”Ajax_阿里云.php”将“Ajax_本地.php”上传到/application/admin/controller/,重命名为”Ajax.php”,),Ajax_本地.php下载链接: https://pan.baidu.com/s/1lBZ94V6jUQD_Q6pwzxiwTw 提取码: a81u。

注意事项:

1.如果要配置CDN加速/application/config.php 第273行设置false,不然后台会登录不上。

2、VUE的H5项目是存在缓存的,会出现H5界面没有及时更新。

3、h5项目(特别是vue)缓存严重的解决方案,配合nginx,宝塔管理nginx上设置。

 ng.png

默认情况下使用nginx作为h5静态资源的服务器时,这些资源在浏览器端是会有缓存的,特别是微信浏览器中,缓存非常严重。

所以项目开始部署阶段就需要配置好nginx禁止这些资源的缓存,nginx需要做如下配置:

代码:

location / {

    root   html;

    index  index.html;

    add_header Cache-Control no-cache;

}

如上配置之后,每次发布只要文件经过修改了(无视文件名),那么都会从服务端拉取最新的资源,保证项目及时更正!

非必要修改

如果要修改至尊,稀有,普通,在前端代码修改,文档教程里会有图文介绍:(这个百分百仅为展示作用,具体以商品概率为准)。

现在目前盲盒程序用的是阿里云oss储存,为了不影响你的使用建议您更换成你自己的储存。

储存默认的是阿里云路径:application\admin\controller\Ajax.php。


博主交流【微信:web9918】
分享到:更多

相关推荐

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)