应用实战｜微信小程序开发示例之在线商城

关注

原创 2022-11-15 16:01:42 2.8k 阅读 AI 写同款· GEO 优化 ›

微信商城小程序开发实战教程本文还有配套的精品资源，点击获取简介：商城小程序是一种便捷的移动端应用，特别在微信平台上广受欢迎。它允许用户无需下载即可使用类似原生应用的体验。本文介绍了开发商城小程序所需的关键文件和组件，包括数据同步、全局配置、页面布局、项目配置、UI组件库、全局样式、页面文件结构、工具函数以及图片资源的使用。通过这些组件，开发者能够构建一个具有良好用户体验和完整功能的在线购物平台。 ... 阅读详情

“超能力”数据库～拿来即用，应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库（表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维），很大地降低开发者的使用门槛。

环球商城是一个可以查看全球最新精品及不同分类商品的商城类小程序。商城类小程序后端服务使用了 MemFire Cloud，其中使用到的 MemFire Cloud 功能包括：

云数据库：存储商城小程序数据表的信息。
即时API：创建数据表时会自动生成 API。
云存储：存储商品的图片。

在这里插入图片描述

创建应用

目的：通过创建的一个 MemFire Cloud 应用来获得数据库、云存储等一系列资源，并将获得该应用专属的API访问链接和访问密钥，用户可以轻松的调用API接口与以上资源进行交互。

登录https://cloud.MemFiredb.com/auth/login，在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

第一种：点击进入应用详情页面，在“数据表”页面可视化建表。

第二种：在首页的数据库管理找到该应用的数据库的"SQL查询"，用 MemFire Cloud 自带的sql编辑器进行建表。
在这里插入图片描述

1.创建type_list表

在数据表页面，点击“新建数据表”，创建type_list表。type_list表主要记录商品种类的列表，表结构字段如下：

名称	类型	描述
id	int8	主键，自增，唯一标识ID
smallpic	text	图片
created_at	timetamptz	创建时间
typeName	text	类型名称
if_choice	text	是否是精品

在这里插入图片描述

sql操作如下:

CREATE TABLE "public"."type_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 15:18:52.594141+08'::timestamp with time zone ,
  "smallpic" TEXT NOT NULL,
  "typeName" TEXT NULL,
  "if_choice" BIGINT NULL,
  CONSTRAINT "venues_list_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条商品种类数据，如下图」

INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('1', '2022-10-18 15:19:07.248+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/包包.png', '包包', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('2', '2022-10-18 15:22:38.515+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/化妆品.png', '化妆品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('3', '2022-10-18 15:23:00.302+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/宝宝.png', '宝宝用品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('4', '2022-10-18 15:24:00.343+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/食物.png', '食物', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('5', '2022-10-18 15:24:30.226+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/营养保健.png', '保健品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('6', '2022-10-18 15:24:50.961+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/T-恤.png', '服装', '1');

2.创建brand_list表

在数据表页面，点击“新建数据表”，创建brand_list表。brand_list表主要记录品牌种类的列表，表结构字段如下：

名称	类型	描述
id	int8	主键，自增，唯一标识ID
type_id	int8	商品类型id
created_at	timetamptz	创建时间
pic	text	商品类型图片
logo	text	商品类型标志图片
chinesename	text	名称
brief	text	简短的概述
minprice	int8	最低价格

在这里插入图片描述

sql操作如下:

CREATE TABLE "public"."brand_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 17:53:30.080335+08'::timestamp with time zone ,
  "type_id" BIGINT NOT NULL,
  "pic" TEXT NOT NULL,
  "logo" TEXT NOT NULL,
  "chinesename" TEXT NOT NULL,
  "brief" TEXT NOT NULL,
  "minprice" TEXT NOT NULL,
  CONSTRAINT "brandList_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条品牌种类数据，如下图」

INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('1', '2022-10-18 17:54:36.628+08', '1', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/fotojet-6-1585018811.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN010Wk2So2Hf7TtpN9Om_!!1893149177.jpg_240x240q75.jpg', '包包', '一个新皮包啊哦爹和地位服务IE成本价', '1000');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('2', '2022-10-18 17:55:35.659+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', '化妆品', '化妆品化妆品化妆品化妆品化妆品化妆品化妆品', '200');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('3', '2022-10-18 17:56:20.633+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', '婴幼儿', '婴幼儿婴幼儿婴幼儿婴幼儿婴幼儿', '232');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('4', '2022-10-18 17:57:04.387+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', '宝宝用品', '宝宝用品宝宝用品宝宝用品宝宝用品宝宝用品宝宝用品', '211');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('5', '2022-10-20 16:34:06.057+08', '1', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', '南风包包', '南风Chio2nd 往事邮差包包女秋冬2022新款手提包高级感通勤斜挎包', '210');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('6', '2022-10-20 17:15:22.46+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', '法国兰蔻', '法国兰蔻', '300');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('7', '2022-10-20 17:16:34.768+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', '巴黎欧莱雅', '巴黎欧莱雅', '300');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('8', '2022-10-20 19:04:15.83+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', '迪士尼婴儿', '迪士尼婴儿洗澡盆宝宝浴盆', '99');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('9', '2022-10-20 19:05:30.618+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', 'modomoma婴儿', 'modomoma婴儿礼盒新生儿', '328');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('10', '2022-10-21 11:32:33.24+08', '4', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '进口饮品', '进口饮品很好喝很好喝', '10');

3.创建goods_by_type_brand表

在数据表页面，点击“新建数据表”，创建brand_list表。brand_list表主要记录商品详情信息，表结构字段如下：

名称	类型	描述
id	int8	主键，自增，唯一标识ID
picurl	text	商品图片
created_at	timetamptz	创建时间
country	text	来自国家
bigname	text	商品名称
title	text	商品标题
ourprice	int8	最终价格
marketprice	int8	实际价格
discount	int8	折扣
brand_id	int8	属于的品牌id
detail	text	详情
boutique	int8	是否是精品商品
swiper	int8	是否是头图轮播商品

在这里插入图片描述
sql操作如下:

CREATE TABLE "public"."goods_by_type_brand" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 18:15:16.563781+08'::timestamp with time zone ,
  "picurl" TEXT NOT NULL,
  "country" TEXT NOT NULL,
  "bigname" TEXT NOT NULL,
  "title" TEXT NOT NULL,
  "ourprice" BIGINT NOT NULL,
  "marketprice" BIGINT NOT NULL,
  "discount" BIGINT NOT NULL,
  "brand_id" BIGINT NULL,
  "detail" TEXT NULL,
  "boutique" BIGINT NULL,
  "swiper" BIGINT NULL,
  CONSTRAINT "goods_by_type_brand_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条商品详情数据，如下图」

INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('1', '2022-10-18 18:18:56.61+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/fotojet-6-1585018811.jpg', '意大利', '米兰', '时尚包包', '2100', '4500', '8', '1', '魅力时尚违法违法为成为', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('2', '2022-10-18 18:21:16.866+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', '法国巴黎', '欧莱雅', '欧莱雅的文档', '500', '3210', '5', '2', '而访问份额为范文芳为分为非我方违法', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('3', '2022-10-18 18:22:33.05+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', '日本', '日本东芝', '大青蛙多群无多', '21', '333', '4', '3', '人人若干个头条号', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('4', '2022-10-18 18:23:53.211+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', '中国', '教育局', '个人股', '12', '323', '5', '3', '富海云天教育统计', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('5', '2022-10-18 18:38:19.857+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '新西兰', '的文档', '发热', '434', '656', '6', '2', '合议庭样5月5', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('7', '2022-10-18 18:40:06.259+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (3).jpg', '日本', '日本原粮米酒', '带我去多', '32', '434', '4', '2', '有还要还要', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('8', '2022-10-18 18:40:47.243+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (4).jpg', '韩国', '好吃调味酱', '单位的翁', '45', '777', '5', '2', '个人人', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('9', '2022-10-20 16:36:15+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN010Wk2So2Hf7TtpN9Om_!!1893149177.jpg_240x240q75.jpg', '韩国', 'cassile卡思乐斜挎包', 'cassile卡思乐斜挎包', '230', '420', '8', '1', 'cassile卡思乐斜挎包女2022新款牛仔链条腋下包大容量通勤流浪包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('10', '2022-10-20 16:37:32.364+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', '日本', '南风Chio2nd 往事邮差包包', '南风Chio2nd 往事邮差包包', '321', '324', '9', '1', '南风Chio2nd 往事邮差包包女秋冬2022新款手提包高级感通勤斜挎包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('11', '2022-10-20 16:41:39.937+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01I4vTFX1Tamw3fWWA6_!!2210991072399.jpg_468x468q75.jpg', '韩国', '草莓熊正版迪士尼毛绒包包', '草莓熊正版迪士尼毛绒包包', '32', '54', '8', '1', '草莓熊正版迪士尼毛绒包包女大容量托特包可爱大学生上课包通勤包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('12', '2022-10-20 16:43:33.536+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01mb9moq2FPt4U06e9I_!!698598873.jpg_468x468q75.jpg', '米兰', '南风Chio2nd 兔子城堡手提包包', '南风Chio2nd 兔子城堡手提包包', '321', '545', '8', '5', '南风Chio2nd 兔子城堡手提包包女2022新款高级感通勤单肩斜挎包', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('13', '2022-10-20 16:44:32.072+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01xiSvAN1SfXR6JNhJs_!!0-item_pic.jpg_468x468q75.jpg', '美国', 'UZV2022夏季新款潮牌包包', 'UZV2022夏季新款潮牌包包', '431', '564', '8', '5', 'UZV2022夏季新款潮牌包包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('14', '2022-10-20 16:45:35.407+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01yG5Ugm2FPt43MGZpN_!!698598873.jpg_400x400.jpg', '缅甸', '秋冬高级质感复古小包包', '秋冬高级质感复古小包包', '65', '76', '9', '5', '秋冬高级质感复古小包包女2022新款百搭手提包小众设计单肩斜挎包', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('15', '2022-10-20 16:46:17.607+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01zaxWGy1fGt82DR7FU_!!2259593980.jpg_468x468q75.jpg', '日本', 'TOUTOU2022秋冬新款小众设计饼干包', 'TOUTOU2022秋冬新款小众设计饼干包', '87', '213', '7', '5', 'TOUTOU2022秋冬新款小众设计饼干包编织方包百搭胸包单肩斜挎包女', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('16', '2022-10-20 17:22:41.372+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01pmOs1R2JOkYYcb7SQ_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '432', '564', '8', '6', '【双11抢先加购】兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('17', '2022-10-20 17:24:18.171+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '310', '320', '9', '6', '【双11抢先加购】兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('18', '2022-10-20 17:25:34.059+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01hhWbdQ1Pf8D5WkMGu_!!3457371867.jpg_468x468q75.jpg', '法国', '兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '168', '230', '8', '6', '【双11抢先加购】兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('19', '2022-10-20 17:26:41.562+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fxLvcN2JOkYQh0njV_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '430', '500', '8', '6', '【双11抢先加购】兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('20', '2022-10-20 17:27:36.495+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN011MvGce2JOkYfeWFAM_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '1150', '1250', '8', '6', '【双11抢先加购】兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('21', '2022-10-20 17:28:49.927+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '289', '300', '0', '7', '【双11抢先加购】欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('22', '2022-10-20 17:30:06.623+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01IbSRWP25GaspAcnzM_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '559', '700', '8', '7', '【双11抢先加购】欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('23', '2022-10-20 17:31:40.76+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GLe4p225GaslAnCvE_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '329', '379', '8', '7', '【双11抢先加购】欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('24', '2022-10-20 17:33:53.398+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN019XzAwe25GasuYKUzD_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '279', '399', '8', '7', '【双11抢先加购】欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('25', '2022-10-20 19:06:30.473+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', '英国', '迪士尼婴儿洗澡盆宝宝浴盆', '迪士尼婴儿洗澡盆宝宝浴盆', '99', '129', '8', '8', '迪士尼婴儿洗澡盆宝宝浴盆可折叠新生儿浴桶大号坐躺小孩幼童用品 99 129', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('26', '2022-10-20 19:08:30.502+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01zwijPA25ElHm221mo_!!83727495.jpg_468x468q75.jpg', '英国', '迪士尼婴儿用品大全', '迪士尼婴儿用品大全', '138', '168', '8', '8', '迪士尼婴儿用品大全宝宝初生满月礼盒高档刚出生的新生儿见面礼物 138 168 ', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('27', '2022-10-20 19:12:08.665+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01JFSOEr1oLJSTJ80a2_!!2208581615208.jpg_468x468q75.jpg', '法国', '迪士尼新生的儿见面礼初生婴', '迪士尼新生的儿见面礼初生婴', '138', '148', '9', '8', '迪士尼新生的儿见面礼初生婴儿礼盒用品大全玩具套装满月宝宝礼物 138 148', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('28', '2022-10-20 19:18:48.176+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma婴儿礼盒新生儿', 'modomoma婴儿礼盒新生儿', '328', '248', '9', '9', 'modomoma婴儿礼盒新生儿用品初生虎宝宝衣服连体衣满月礼物见面礼', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('29', '2022-10-20 19:20:31.828+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01ctrThQ1G8lez98nbz_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma新生儿用品婴儿礼盒', 'modomoma新生儿用品婴儿礼盒', '426', '448', '9', '9', 'modomoma新生儿用品婴儿礼盒春秋初生男女宝宝纯棉长袖无骨爬爬服', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('30', '2022-10-20 19:21:23.415+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dP0xis1G8leYnrfmK_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma新生儿用品婴儿礼盒秋', 'modomoma新生儿用品婴儿礼盒秋', '388', '408', '9', '9', ' modomoma新生儿用品婴儿礼盒秋冬公主女宝初生见面礼满月周岁礼物', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('31', '2022-10-21 11:35:32.69+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '日本', '绿茶牌绿色饮品', '绿茶牌绿色饮品', '8', '10', '8', '10', '绿茶牌绿色饮品添加维生素婴儿可以喝', '0', '0');

4.创建cart_list表

在数据表页面，点击“新建数据表”，创建cart_list表。cart_list表主要记录购物车的列表，表结构字段如下：

名称	类型	描述
id	int8	主键，自增，唯一标识ID
goods_id	int8	商品id
created_at	timetamptz	创建时间
number	int8	数量
list_pic_url	text	商品图片
goods_name	text	商品名称
retail_price	int8	商品价格
isChecked	int8	是否被选中

sql操作如下:

CREATE TABLE "public"."cart_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-19 15:34:24.620926+08'::timestamp with time zone ,
  "goods_id" BIGINT NOT NULL,
  "number" BIGINT NOT NULL,
  "list_pic_url" TEXT NOT NULL,
  "goods_name" TEXT NOT NULL,
  "retail_price" BIGINT NOT NULL,
  "isChecked" BIGINT NULL,
  CONSTRAINT "cart_list_pkey" PRIMARY KEY ("id")
);

5.创建order_list表

在数据表页面，点击“新建数据表”，创建order_list表。order_list表主要记录商品订单的列表，表结构字段如下：

名称	类型	描述
id	int8	主键，自增，唯一标识ID
order_detail	text	商品详情信息的json
created_at	timetamptz	创建时间

sql操作如下:

CREATE TABLE "public"."order_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-20 10:58:46.973755+08'::timestamp with time zone ,
  "order_detail" TEXT NOT NULL,
  CONSTRAINT "order_list_pkey" PRIMARY KEY ("id")
);

创建存储桶

创建云存储的存储桶，用来存储商城小程序所需要的商品图片，涉及操作包括：

1.创建一个存储桶goodsImgList
在该应用的云存储导航栏，点击“新建Bucket”按钮，创建存储桶goodsImgList，并选为公开。

在这里插入图片描述

允许下载图片

选中存储桶goodsImgList，切换到权限设置栏，点击“新规则”按钮，弹出策略编辑弹框，选择“自定义”，如下图所示：

在这里插入图片描述

选择SELECT操作，输入策略名称，点击“生成策略”按钮，如下图所示。

在这里插入图片描述

允许上传图片

选中存储桶goodsImgList，切换到权限设置栏，点击“新规则”按钮，弹出策略编辑弹框，选择“自定义”，如下图所示：

在这里插入图片描述

选择SELECT操作，输入策略名称，点击“生成策略”按钮，如下图所示。

在这里插入图片描述

查看结果：

在这里插入图片描述

注册商城小程序

以上是我们在MemFire Cloud上配置的全部步骤，接下来是在微信开发者工具上操作了。

「如果您还未注册过商城小程序，请参考官方步骤注册商城小程序(只需要通过您的邮箱注册一个商城小程序获得一个appid,然后下载一个微信开发工具即可)」

下载代码

https://github.com/LucaRao/globaltown.git

「Node.js (>=14.x <=16.x)」

开发环境配置

选择目录是下载好的商城小程序项目的目录，AppID为您在微信公众平台注册商城小程序获得的专属appid。

在这里插入图片描述

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

在这里插入图片描述

打开终端，在项目根目录下执行如下命令。

npm init
npm install

接下来，下载商城小程序需要的MemFire Cloud的微信商城小程序SDK。

npm install supabase-wechat-stable

这一步npm就构建完成了，我们需要的依赖也已经下载好了,根目录下会多出两个文件，如下图。

在这里插入图片描述

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端，商城小程序使用了Supabase 微信小程序SDK包，使用他生态里提供的功能（登录、注册、增删改查等）去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址（URL）和一个数据权限的令牌（ANON_KEY）,我们需要去应用的概览里面去获取这两个参数然后配置到lib/supabase.ts里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable'
const url = ""
const key = ""

export const supabase = createClient(url, key)

回到MemFire Cloud首页，在应用/概括页面，获取服务地址以及token信息，只需要从总览中获取URL接口地址和anon的密钥。

在这里插入图片描述

Anon（公开）密钥是客户端API密钥。它允许“匿名访问”您的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

注意：service_role密钥可以绕过任何安全策略完全访问您的数据。这些密钥必须保密，并且要在服务器环境中使用，绝不能在客户端或浏览器上使用。在后续示例代码中，需要提供supabaseUrl和supabaseKey。

编译商城小程序

在这里插入图片描述

收录于

MemFireDB

标签

#微信小程序 #数据库 #小程序

微信小程序商城开发实战案例本文还有配套的精品资源，点击获取简介：微信小程序是一种移动端轻量级应用，通过使用微信开发者工具和相关技术栈（如WXML、WXSS、JavaScript等）来构建。本案例“微信小程序Demo：微商商城”展示了构建在线购物平台的过程，涉及关键开发步骤和技术要点，为开发者提供了一个实际操作项目，涵盖了从安装开发者工具、编写代码、页面设计到数据绑定、状态管理和发布更新的完整开发流... 阅读详情

应用实战｜微信小程序开发示例之在线商城

创建应用

创建数据表

1.创建type_list表

2.创建brand_list表

3.创建goods_by_type_brand表

4.创建cart_list表

5.创建order_list表

创建存储桶

允许下载图片

允许上传图片

注册商城小程序

下载代码

开发环境配置

获取 API密钥

编译商城小程序

相关推荐