AiPhoto小程序是我开发的第N个小程序了,这次不同的是使用了thinkphp6.0做为后端框架开发,前端使用uniapp生成微信端与字节跳动(抖音)端代码,先看看演示与效果图

双端演示

微信前端截图展示

字节跳动截图

后端截图

前后端功能都很完善,充值、任务、VIP与积分系统全部完成,流量主广告也可控到每个位置。

首先下载完整安装包,已安装过请下载更新包

开始前请准备好你的服务器和域名,安装好宝塔,如果你完全不会安装请联系我的QQ:27658525 代安装

一、宝塔上创建新的站点,安装网站后台

图片[28]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

二、将【后台.zip】解压上传到根目录

图片[29]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

三、点开宝塔站点的设置,配置好SSL和伪静态选择thinkphp

图片[30]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

四、网站运行目录选择【public】文件夹

图片[31]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

五、访问你的域名,填写数据库信息等,没特殊情况不要修改数据表前缀与后台地址

图片[32]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

提示安装成功后访问你的后台地址https://你的域名/admin/login/index.html

图片[33]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

然后配置好你的后台信息,特别是微信与抖音端的appid等

图片[34]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

一些图片素材都在【图片素材.zip】里

后台配置一些注意的点

1、百度智能云添加应用时选择

图片[35]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享
图片[36]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享
图片[37]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

选择完创建应用,建议企业实名认证领取免费次数,并开通按量计费模式

火山引擎申请地址 https://www.volcengine.com/

图片[38]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享
图片[39]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

然后实名认证,创建应用,第一次选择

图片[40]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

再次点接入能力

图片[41]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享
图片[42]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

多接入功能没关系,然后点击详情开通相关接口

图片[43]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

进入密钥管理

图片[44]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享
图片[45]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

将获取的ak与sk填入后台接口配置即可

2、后台图片配置好云存储再上传即可,不配置云存储后期可能会因为大量用户处理图片造成大量服务器资源占用,自行斟酌

3、后台打开工具配置,每个工具都要重新编辑上传演示图才能正常显示

微信前端配置

确保你的后台已配置好appid等基本配置,开始安装前端

图片[46]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

小程序开发者工具导入前端文件夹,并填写后端对应的appid

图片[47]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

Common文件夹的vendor.js的第2103行改成你的域名,刷新即可正常使用上线

抖音前端配置

首先确保你字节端后台的appid与AppSecret已经配置,并且将本站域名与云存储域名加到了安全域名中

图片[48]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

前端导入,填写与后台对应的appid

图片[49]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

common/vendor.js中第2592行域名改成你自己的

图片[50]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

这里需要注意,如果后台设置抖音端跳转小程序,你需要将其他小程序的appid配置到前端的app.json中navigateToMiniProgramAppIdList字段中,按图中格式添加即可,否则将无法跳转

图片[51]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

配置完基本就能上传了,这里注意,如果你后台配置了字节端流量主,插屏广告与激励广告在开发者工具中是无法显示测试的,包括图片上传功能也会有问题,所以预览的话请在手机端进行完整体验。

五、关于抖音端审核

审核前,需关闭字节端后台的总支付功能(娱乐类小程序好像不允许支付功能),隐藏工具中字节端的图片去水印工具的(工具越少越好),自己截三张小程序页面截图,提交审核可选择全端

图片[52]-【独家】AiPhoto微信/抖音双端小程序系统安装教程,附安装包,更新火山引擎功能-极客分享

页面路径

首页pages/index/index菜单页
人脸趣玩页pages/face/index菜单页
更多工具pages/wxapp/wxapp菜单页
个人中心pages/my/my菜单页
工具页pages/tool/aitool?id={工具id}工具id在后台工具配置获取普通页
充值(vip)页pages/my/pay普通页
签到任务页pages/my/task普通页
用户使用记录页pages/my/log普通页

如果您对我还不够信任,也可以在我的淘宝店铺进行担保交易:https://wxshares.taobao.com/

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
评论 共6条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    请登录后查看评论内容