本示例是一个简单的外卖查看店铺点菜的外卖微信小程序,小程序后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:
其中使用到的MemFire Cloud功能包括:
- 云数据库:存储外卖微信小程序所有数据表的信息。
- 即时API:创建数据表时会自动生成 API。
- 对象存储:存储外卖微信小程序中物料的图片。
创建应用
目的:通过创建的一个MemFire Cloud应用来获得数据库、对象存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。
登录MemFire Cloud, 在“我的应用”页面创建一个新应用
创建数据表
创建shop_banners表
在“表编辑器”页面,点击“新建表”,创建shop_banners表。shop_banners表主要记录外卖小程序banner头图信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
img | text | banner头图链接 |
url | real | banner头图地址 |
created_at | timetamptz | 创建时间 |
name | text | banner头图标题 |
sql建表语句
create table
public.shop_banners (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
img text null,
url text null,
name text null,
constraint shop_banners_pkey primary key (id)
) tablespace pg_default;
数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。
url,created_at,name,img,id
,2024-04-08 06:30:14.116968+00,零食专场,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/67bbcdfd-16ad-4783-81ad-e48802544211.png,1
,2024-04-08 06:30:14.116968+00,鲜嫩果蔬,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1dcdf97a-ca09-48e3-b85f-b5efe73ec21c.png,3
,2024-04-08 06:30:14.116968+00,金牌好店,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/qt_1851074846c5f4d717cef8fbeecbd07f_85495.png,2
创建策略
接下来,需要给shop_banners表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "Enable read access for all users" ON "public"."shop_banners"
AS PERMISSIVE FOR SELECT
TO public
USING (true)
创建shop_icons表
在“表编辑器”页面,点击“新建表”,创建shop_icons表。shop_icons表主要记录外卖小程序商品类型icon图信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
img | text | 商品类型icon图链接 |
url | real | 商品类型icon图地址 |
created_at | timetamptz | 创建时间 |
name | text | 商品类型icon图标题 |
sql建表语句
create table
public.shop_icons (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
img text null,
url text null,
name text null,
constraint shop_icons_pkey primary key (id)
) tablespace pg_default;
数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。
id,created_at,img,url,name
1,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_1.jpg,,美食
2,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_2.jpg,,超市
3,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_3.jpg,,鲜果购
4,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_4.jpg,,下午茶
5,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_5.jpg,,正餐优选
6,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_6.jpg,,外卖专送
7,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_7.jpg,,饮品站
8,2024-04-08 06:30:14.260727+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/icon_8.jpg,,小吃馆
创建策略
接下来,需要给shop_icons表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "Enable read access for all users" ON "public"."shop_icons"
AS PERMISSIVE FOR SELECT
TO public
USING (true)
创建shops_list表
在“表编辑器”页面,点击“新建表”,创建shops_list表。shops_list表主要记录外卖小程序内店铺的信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
img | text | 店铺图链接 |
logo | real | 店铺图logo |
created_at | timetamptz | 创建时间 |
name | text | 店铺的名称 |
desc | text | 排序 |
distance | real | 距离 |
sql建表语句
create table
public.shops_list (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
img text null,
distance double precision null,
sales bigint null,
logo text null,
name text null,
"desc" text null,
constraint shops_list_pkey primary key (id)
) tablespace pg_default;
数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。
id,created_at,img,distance,sales,logo,name,desc
1,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_1.jpg,1.8,1475,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_1.jpg,杨国福麻辣烫(东四店),满25减8;满35减10;满60减15(在线支付专享)
2,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_2.jpg,2.4,1284,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_2.jpg,忠友麻辣烫(东四店),满25减8;满35减10;满60减15(在线支付专享)
3,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_3.jpg,2.3,2039,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_3.jpg,粥面故事(东大桥店),满25减8;满35减10;满60减15(在线支付专享)
4,2024-04-08 08:33:54.959704+00,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/shop_4.jpg,3.4,400,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/logo_4.jpg,兄鸡,满25减8;满35减10;满60减15(在线支付专享)
创建策略
接下来,需要给shops_list表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "Enable read access for all users" ON "public"."shops_list "
AS PERMISSIVE FOR SELECT
TO public
USING (true)
创建goods表
在“表编辑器”页面,点击“新建表”,创建goods表。goods表主要记录外卖小程序店铺的菜品信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
name | text | 商品名称 |
sold | bigint | 售出量 |
created_at | timetamptz | 创建时间 |
price | bigint | 价格 |
pic | text | 图片 |
sql建表语句
create table
public.goods (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
name text null,
pic text null,
sold bigint null,
price bigint null,
constraint goods_pkey primary key (id)
) tablespace pg_default;
数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。
id,created_at,name,pic,sold,price
1,2024-04-08 09:36:48.522563+00,娃娃菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1014,2
2,2024-04-08 09:36:48.522563+00,金针菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/2.jpg,1029,3
3,2024-04-08 09:36:48.522563+00,方便面,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/unnamed.jpg,1030,2
4,2024-04-08 09:36:48.522563+00,粉丝,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/e3ada742beca885a74dcb2b9cdd7f1a9_180x180.jpg,1059,1
5,2024-04-08 09:36:48.522563+00,生菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1029,2
6,2024-04-08 09:36:48.522563+00,白菜,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/1.jpg,1064,2
7,2024-04-08 09:36:48.522563+00,杏鲍菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/630261504a9fa788.jpg,814,3
8,2024-04-08 09:36:48.522563+00,香菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/19120301.jpg,124,3
9,2024-04-08 09:36:48.522563+00,猴头菇,https://cfm40oi5g6hasssesujg.baseapi.memfiredb.com/storage/v1/object/public/files/19120301.jpg,102,5
创建策略
接下来,需要给goods表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "Enable read access for all users" ON "public"."goods"
AS PERMISSIVE FOR SELECT
TO public
USING (true)
创建goodsList表
在“表编辑器”页面,点击“新建表”,创建goodsList表。goodsList表主要记录店铺菜品的类别信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
classifyName | text | 菜品的类别名称 |
goods | real | 菜品的类别所关联的菜品 |
created_at | timetamptz | 创建时间 |
tag | text | 菜品的类别tag |
sql建表语句
create table
public."goodsList" (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
"classifyName" text null,
goods text null,
tag text null,
constraint goodsList_pkey primary key (id)
) tablespace pg_default;
数据表创建完后需在表中手动插入一些外卖微信小程序的数据(以csv为例) ,如下图。
id,created_at,classifyName,goods,tag
1,2024-04-08 09:39:41.790288+00,热销,"[1, 2, 3, 4, 5]",hot
2,2024-04-08 09:39:41.790288+00,新品,"[1, 3]",new
3,2024-04-08 09:39:41.790288+00,蔬菜,"[1, 6, 5]",vegetable
4,2024-04-08 09:39:41.790288+00,蘑菇,"[2, 7, 8, 9]",mushroom
5,2024-04-08 09:39:41.790288+00,主食,"[3, 4]",food
创建策略
接下来,需要给goodsList表创建1条策略,此策略通过 SELECT 操作为所有用户提供对表的读取访问权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "Enable read access for all users" ON "public"."goodsList"
AS PERMISSIVE FOR SELECT
TO public
USING (true)
创建order_lists表
在“表编辑器”页面,点击“新建表”,创建order_lists表。order_lists表主要记录用户下单的信息,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | bigint | 主键,自动为列分配一个连续的唯一编号,唯一标识ID |
count | text | 下单的商品商品总数量 |
list | real | 下单的商品id与id对应的数量 |
user_id | uuid | 下单的用户id |
created_at | timetamptz | 创建时间 |
sql建表语句
create table
public.order_lists (
id bigint generated by default as identity,
created_at timestamp with time zone not null default now(),
count bigint null,
list text null,
user_id uuid null,
constraint order_lists_pkey primary key (id)
) tablespace pg_default;
创建策略
接下来,需要给order_lists表创建1条策略,此策略通过 SELECT 操作为只有通过微信认证的用户才能有对表插入数据权限。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
CREATE POLICY "只有通过微信认证的用户才能有对表插入数据权限" ON "public"."order_lists"
AS PERMISSIVE FOR INSERT
TO authenticated
WITH CHECK (true)
创建bucket
1.新建images存储桶
点击‘存储’图标菜单,点击‘创建新bucket’,创建images存储桶,存储桶是用来上传外卖小程序里面所有需要图片的物料。
注册小程序
以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。
如果您还未注册过小程序,请参考官方步骤注册小程序(只需要通过您的邮箱注册一个小程序获得一个appid,然后下载一个微信开发工具即可)
下载代码
git clone https://github.com/LucaRao/wechat-waimai.git
需要下载小程序sdk依赖的版本已经写在package.json文件里,直接下载即可
Node.js (>=14.x <=18.x) 。
用微信开发者工具点击导入项目
选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid。
构建npm
在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。
打开终端,在项目根目录下执行如下命令 (小程序需要的MemFire Cloud的微信小程序SDK已经存在package.json里,可以直接安装全局依赖)。
npm install
点击开发者工具中的菜单栏:工具 /构建 npm
这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。
获取 API密钥
接下来需要创建一个可以访问应用程序数据的客户端,小程序使用了MemFire Cloud 微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的首页去获取这两个参数然后配置到lib/supabase.js里面去。
lib/supabase.js
import { createClient } from 'supabase-wechat-stable-v2'
const url = ""
const key = ""
export const supabase = createClient(url, key)
回到MemFire Cloud首页,在应用/首页页面,获取服务地址以及token信息,只需要从首页中获取URL接口地址和anon的密钥。
Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。
编译小程序
点击“编译”即可展示小程序完成后的效果。