云开发1天极速开店!1人搞定全流程

说明

零售电商前后台通用模版包含:前端电商小程序,和电商管理后台,可以快速实现商品录入,上下架,订单发货等功能;

小程序端是基于云开发电商小程序二次开发,并通过微搭实现后台管理;

点击"安装模板",快速下载

视频教程

方便大家使用,录制了视频教程,后期会不定期更新

在线案例

业务背景

用于搭建零售电商小程序前端和管理后台,可以快速实现商品录入,上下架,订单发货,微信支付等功能。

功能列表

小程序端

小程序端

后台

快速上手

【重要】检查云存储是否为公有读写,非公有读写会导致模版页面预览看不到云存储的图片/文件内容。如您的环境是免费环境,此处需要切换为付费才能将云存储设置为公有读。

后台安装

1.模版安装

进入模版中心,选择对应模版;如果可视化开发出现应用,说明安装成功;

安装成功

2.配置管理员

进入云后台管理-头像,可以修改登录密码;

pAWd4Rf.png

配置管理员

修改登录信息

3.后台发布

进入应用编辑,选择右上角的应用。发布成功后 即可通过账号密码登录后台管理订单商品;

发布应用

后台登录

小程序安装

1.下载小程序代码

打开网站 ,有开发能力的可以选择git(推荐),不擅长git可以直接下载压缩包并且解压;

下载小程序代码

2.导入项目

打开微信开发工具,选择刚才解压目录里面的tcb-shop-enhance-master文件夹(例如:D:\tcb-shop-enhance-master\tcb-shop-enhance-master),注意目录里面一定是有app.js的文件,填入小程序ID,选择云开发-云开发电商模版,注意小程序必须认证过,否则无法创建环境;

导入微信开发者工具

选择模板

如果第一次使用会引导创建云开发环境,按照一步步操作即可;

注意:创建云开发环境的同时,会生成一个腾讯云账号,这个账号只能通过小程序登录。和之前通过手机或者微信注册的账号是不同的;

3.配置环境参数

3.1 配置环境

app.js 中,填入云开发环境 id,保存文件

配置环境

3.2 构建项目

选择npm-构建项目

构建完成选择编译,如果正常小程序可以预览;

编译

3.3 配置支付

前往小程序微信支付模版 ,填入该模版所需参数。若未填入,将无法使用支付功能,其他功能可正常体验

配置支付功能

获取云环境id

4.云函数安装

云函数需要手动安装,项目所需的云函数都在func文件夹里面,必须安装的云函数有3个:get_wxuser_id,update_user,shop_pay;

安装云函数

安装方法:

4.1命令行安装(推荐)

1.安装node,cli工具,具体参见: 。

2.命令行到func目录下,tcb登录后,执行如下代码:

bash 复制代码
tcb fn deploy 函数名称 -e 环境id

如果不是新建,运行的时候提示是否覆盖,选择y,如果出现以下报错直接忽略,这时已经发布成功;

4.2打包压缩上传安装
  • 将对应函数名字的文件夹zip压缩;
  • 上传到云函数这里

注意:打包上传的方法,经常失败,还是推荐cli;

5.小程序客服

项目集成了小程序客服功能,需要管理者在后台添加客服微信才能使用;

6.小程序发布

小程序发布时需要删除这两个文件夹,否则会导致体积太大;

后台使用

注意:一定要注意环境,体验环境的数据在小程序端是出不来的;

创建属性名和属性值;

这两个概念参考图片示意,是必须创建的和配置的,否则商品出不来;

通过后台属性名管理和属性值管理可以方便的创建维护;一个属性名对应多个属性值;注意不要轻易删除,否则导致商品无法显示;

2.设置商品分类

不设置商品分类无法在分类页显示;一二级分类关系如图;可以通过商品分类页面设置;

3.商品管理

通过商品管理可以创建商品,以及上下架等操作;

商品编辑新建

新建商品的时候,注意整体传图片不要太大,特别是富文本;

优先级数字你越大,首页显示位置越靠前;

注意商品没有删除操作,是因为避免历史订单出错,不想显示下架即可

sku编辑新建

按图中点击可以添加商品SKU

sku图片会自动带入商品图片,如需调整自行修改;属性值可以选多个,但是同一类别只能选一个,比如一个sku不能同时选薄和厚,可以选薄和1个;

4.订单管理

对于待发货或待收货订单可以选择快递公司和单号;

注意: 1.本系统不能自动下单,需要将收货方人,电话,地址复制到第三方系统如菜鸟,生成运单号,再回填点发货; 2.退货退款等操作可以通过线下完成,如需系统实现请联系作者; 3.如需要实现微信结算对接,有需求请单独联系作者;

点击云模版链接,快速安装

官网: tcb.cloud.tencent.com/

github: Tencent CloudBase

相关推荐: 手把手教你用CloudBase完成电商小程序全栈开发开发者Luke用AI工具链(Claude Code+CloudBas)

相关推荐
小蠢驴打代码25 分钟前
记忆库能通过测试,不等于回答值得信:Coding Agent Memory 的两层评估设计
github·ai编程
喂你一颗橘子糖27 分钟前
我用 Codex 跑长任务:快照、Loop 和单线写入,解决三个失控问题
ai编程
李剑一1 小时前
瑞幸也AI上了?我用AI命令行帮我点了一杯咖啡,但是我花了不止一杯咖啡钱
aigc·openai·ai编程
leoZ2311 小时前
记忆系统与 Agent 定制完全指南(六):Agent 编排与调度
ai编程
Ai拆代码的曹操2 小时前
opencode CLI 源码拆解:yargs + effectCmd 双层架构如何管理 20+ 子命令
架构·ai编程·opencode·源码拆解
AINative软件工程2 小时前
LLM 应用的熔断降级工程实践:Circuit Breaker 不只是重试的升级版
后端·llm·ai编程
倔强的石头_10 小时前
不想每次都从头解释:我用 Doubao-Seed-Evolving 做了一个「稿件接力站」
ai编程
大模型码小白13 小时前
【Python零基础教程】继承、多态与魔法函数:面向对象编程三大核心特性详解
java·大数据·开发语言·人工智能·python·ai编程
-XWB-14 小时前
【LLM】Agent Planning 完全指南:8 种纯 LLM 范式 + 8 种混合规划模式详解(二)
人工智能·经验分享·aigc·学习方法·ai编程
沉默王二14 小时前
腾讯一面,我霸气反问:“你说你们在做Agent项目,说说 SubAgent、Plan 模式、Skill 调用这些你们都是怎么做的?”面试官一直在擦汗。。
面试·agent·ai编程