云开发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)

相关推荐
腾讯云云开发5 小时前
预约+会员+营销全功能覆盖,1 小时上架美业小程序
低代码·微信小程序·小程序·云开发
腾讯云云开发5 小时前
云开发模板建站,1小时速建官网,企业品牌即刻上线
微信小程序·ai编程·小程序·云开发
腾讯云云开发5 小时前
CodeBuddy+CloudBase 1小时开发微信小游戏
ai编程·小程序·云开发·codebuddy
腾讯云云开发5 小时前
手把手教你用CloudBase完成电商小程序全栈开发
微信小程序·ai编程·小程序·云开发
景彬6 小时前
小红书小组件开发 最早踩坑版
前端·微信小程序
Jartto10 小时前
AI Coding 新范式:基于 Spec Coding 的新玩法
ai编程
AI炼金师10 小时前
Claude Code - AWS Skills
云计算·ai编程·aws·极限编程·vibecoding
周末程序猿10 小时前
谈谈 `Claude Skills`
人工智能·ai编程
狂团商城小师妹11 小时前
JAVA无人共享台球杆台球柜系统球杆柜租赁系统源码支持微信小程序
java·开发语言·微信小程序·小程序