应用实战｜只需几步，即可享有外卖订餐小程序

news/2024/10/21 10:02:07/

本示例是一个简单的外卖查看店铺点菜的外卖微信小程序，小程序后端服务使用了MemFire Cloud，其中使用到的MemFire Cloud功能包括：

其中使用到的MemFire Cloud功能包括：

  • 云数据库：存储外卖微信小程序所有数据表的信息。
  • 即时API：创建数据表时会自动生成 API。
  • 对象存储：存储外卖微信小程序中物料的图片。
    在这里插入图片描述

创建应用

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

登录MemFire Cloud， 在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

创建shop_banners表

在“表编辑器”页面，点击“新建表”，创建shop_banners表。shop_banners表主要记录外卖小程序banner头图信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
imgtextbanner头图链接
urlrealbanner头图地址
created_attimetamptz创建时间
nametextbanner头图标题

sql建表语句

create tablepublic.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图信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
imgtext商品类型icon图链接
urlreal商品类型icon图地址
created_attimetamptz创建时间
nametext商品类型icon图标题

sql建表语句

create tablepublic.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表主要记录外卖小程序内店铺的信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
imgtext店铺图链接
logoreal店铺图logo
created_attimetamptz创建时间
nametext店铺的名称
desctext排序
distancereal距离

sql建表语句

create tablepublic.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表主要记录外卖小程序店铺的菜品信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
nametext商品名称
soldbigint售出量
created_attimetamptz创建时间
pricebigint价格
pictext图片

sql建表语句

create tablepublic.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表主要记录店铺菜品的类别信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
classifyNametext菜品的类别名称
goodsreal菜品的类别所关联的菜品
created_attimetamptz创建时间
tagtext菜品的类别tag

sql建表语句

create tablepublic."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表主要记录用户下单的信息，表结构字段如下：

名称类型描述
idbigint主键，自动为列分配一个连续的唯一编号，唯一标识ID
counttext下单的商品商品总数量
listreal下单的商品id与id对应的数量
user_iduuid下单的用户id
created_attimetamptz创建时间

sql建表语句

create tablepublic.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 authenticatedWITH 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密钥。它允许“匿名访问”您的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

编译小程序

点击“编译”即可展示小程序完成后的效果。


http://www.ppmy.cn/news/1442626.html

相关文章

【需求案例】博客需求

【需求案例】博客需求

第一章 需求调研 1.Blog系统趋势 1.1 个人博客 市面上存在很多的个人博客，且个人博客一般用于记录自己所遇到的问题及解决方案和技术分享。个人博客的优势是可以快速的记录问题与回归问题，可将自己掌握的技术知识展现给互联网中的用户进行技术吸纳。个人博客的劣势是，站点…
阅读更多...
华为ensp中链路聚合两种(lacp-static)模式配置方法

华为ensp中链路聚合两种(lacp-static)模式配置方法

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月26日11点54分 链路聚合&#xff08;Link Aggregation&#xff09;&#xff0c;又称为端口聚合&#xff08;Port Trunking&#xff09;&#xff0c;是一种将多条物理…
阅读更多...
【Flutter 面试题】 Dart 当中的 .. 表示什么？

【Flutter 面试题】 Dart 当中的 .. 表示什么？

【Flutter 面试题】 Dart 当中的 … 表示什么？ 文章目录 写在前面口述回答补充说明写在前面 🙋 关于我 ，小雨青年 👉 CSDN博客专家，GitChat专栏作者，阿里云社区专家博主，51CTO专家博主。2023博客之星TOP153。 👏🏻 正在学 Flutter 的同学，你好！ 😊 Flutter…
阅读更多...
服务器端口映射到另一台服务器

服务器端口映射到另一台服务器

在服务器管理的日常工作中&#xff0c;端口映射是一项常见且关键的任务。通过端口映射&#xff0c;我们可以将一台服务器上的特定端口流量重定向到另一台服务器&#xff0c;实现服务的灵活部署和管理。 一、端口映射的基本概念 端口映射&#xff0c;也称为端口转发或端口重定向…
阅读更多...
算法模板——数据结构篇

算法模板——数据结构篇

声明&#xff1a;参考自acwing 目录 1.单链表 2.双链表 3.数组栈与队列 4.单调栈 1.单链表 int head,e[N],ne[N],idx;void init(){head-1;idx0; } void add_head(int x){ //head有实值e[idx]x,ne[idx]head,headidx; } void add(int k,int x){ e[idx]x,…
阅读更多...
浓眉大眼的Apple开源OpenELM模型；IDM-VTON试衣抱抱脸免费使用；先进的语音技术，能够轻松克隆任何人的声音

浓眉大眼的Apple开源OpenELM模型；IDM-VTON试衣抱抱脸免费使用；先进的语音技术，能够轻松克隆任何人的声音

✨ 1: openelm OpenELM是苹果机器学习研究团队发布的高效开源语言模型家族 OpenELM是苹果机器学习研究团队开发的一种高效的语言模型&#xff0c;旨在推动开放研究、确保结果的可信赖性、允许对数据和模型偏见以及潜在风险进行调查。其特色在于采用了一种分层缩放策略&#x…
阅读更多...
LeetCode 2385.感染二叉树需要的总时间：两次搜索（深搜 + 广搜）

LeetCode 2385.感染二叉树需要的总时间：两次搜索（深搜 + 广搜）

【LetMeFly】2385.感染二叉树需要的总时间&#xff1a;两次搜索&#xff08;深搜 广搜&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/amount-of-time-for-binary-tree-to-be-infected/ 给你一棵二叉树的根节点 root &#xff0c;二叉树中节点的值 互不…
阅读更多...
iOS 在OC旧项目中使用Swift进行混编

iOS 在OC旧项目中使用Swift进行混编

iOS 在OC旧项目中使用Swift进行混编 1、创建桥接文件 ​ 第一次在Swift创建OC文件&#xff0c;或者第一次OC创建Swift时&#xff0c;xcode会提示桥接&#xff0c;Creat Bridging Header即可,这个文件用于Swift调用OC文件&#xff0c;与OC调用Swift无关。 2、在TARGETS中设置D…
阅读更多...
最新文章

Copyright @ 2022~2023