Pi Demo App 学习笔记（前端）

Pi Network项目提供了代码开源的Pi Demo App，Pi Demo App的前端的页面显示和业务逻辑主要实现2个功能：

1）用户登录和退出

2）创建支付订单和支付订单

前端的业务逻辑主要是3个文件

1）index.tsx

文件路径 https://github.com/pi-apps/demo/blob/main/frontend/src/Shop/index.tsx

业务逻辑的入口文件

主要的函数：

a）signIn()

功能：用户登录

b）signOut()

功能：用户退出

c）orderProduct()

功能：创建支付订单

d）onIncompletePaymentFound()

功能：支付未完成处理

e）onReadyForServerApproval()

功能：同意支付处理

f）onReadyForServerCompletion()

功能：支付完成处理

g）onCancel()

功能：支付取消处理

h）onError()

功能：支付出错处理

支付流程有点复杂，这个在介绍后端时再详细介绍。下面是官方给的支付流程说明文档

https://github.com/pi-apps/pi-platform-docs/blob/master/payments.md

2）SignIn.tsx

文件路径 https://github.com/pi-apps/demo/blob/main/frontend/src/Shop/components/SignIn.tsx

用户登录和退出的业务逻辑文件

3）ProductCard.tsx

文件路径 https://github.com/pi-apps/demo/blob/main/frontend/src/Shop/components/ProductCard.tsx

创建支付订单的业务逻辑文件

我在Pi Demo App基础上开发了一个线上版的公园相亲角：派之爱，在手机上的Pi浏览器或电脑的浏览器的地址栏输入"lovepi.vip"就可以使用，具体使用方法参考公告栏。

更多区块链方面的文章，可以看我的学习笔记 ：www.0101.vip

----------------------------------------------------------------------------------

我是powervip，一个热爱区块链和人工智能的程序员

我的知乎：https://www.zhihu.com/people/powervip

我的公众号：区块链战斗机

我的学习笔记：www.0101.vip

如果你觉得这篇文章写得还可以，请帮忙点个赞，谢谢！著作权归作者所有。如需转载，请注明原文出处并保留原文链接。

​

你的鼓励，我的动力！