微信小程序-卡券开发（前端）

最新推荐文章于 2024-08-01 19:08:09 发布

转载

最新推荐文章于 2024-08-01 19:08:09 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zy20160429/p/7827159.html

文章标签：

本文记录了一次微信小程序卡券项目的前端开发经验，包括首页优惠券列表展示，领取和打开卡券功能的实现。重点介绍了wx.addCard()和wx.openCard()接口的使用，以及开发过程中的关键步骤和遇到的问题，如防止重复领取、接口调用权限等。

刚完成一个微信小程序卡券开发的项目。下面记录开发前，自己困惑的几个问题。

因为我只负责了前端。所以下面主要是前端的工作。

项目概述：按照设计图开发好首页上的优惠券列表，点击某个优惠券，输入手机号，点击领取，调用 wx.addCard()接口，跳到微信的领取卡券页面。

点击首页的某处按钮，点击后，调用wx.openCard()接口，打开已领取的卡券列表页。

1、小程序提供的 wx.addCard() ，如果调用成功，打开的界面，长下面这个样子。（微信本身就有的页面）

如果点击了返回，没有点击“领取到卡包”。此时是没有领取成功的。



2、小程序提供的 wx.openCard() ，如果调用成功，打开的界面，长下面这个样子。（微信本身就有的页面）

3、开发流程（后续补充）：

1) 获取openId。

在app.json文件中，前端调用wx.request()，发送code至自己公司后台提供的接口，获取openId，存到缓存中，为了确保其他页面能获取到。我也存到了一个公共变量中。

2) 按照微信提供的API说明，传必要参数。

　领取卡券的前端处理：
　① 先判断当前微信版本是否支持领取卡券这个api
　if ( wx.addCard ) { 如果支持的话，就调用领取卡券的接口 } else { 不支持的话，弹出更新提示 }
　② 调用领取卡券的接口