• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序-卡券开发(前端)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

项目概述:按照设计图开发好首页上的优惠券列表,点击某个优惠券,输入手机号,点击领取,调用 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 { 不支持的话,弹出更新提示 }
 ② 调用领取卡券的接口
 下面是我实际调用这个接口时,传入的参数

                       if (wx.addCard) {
                            //领取卡券接口
                            wx.addCard({
                                cardList: [
                                    {
                                        cardId: card_id,
                                        cardExt: \'{"nonce_str": "\'+ result.data.sign.nonce_str +\'", "openid": "\'+ openid +\'", "timestamp": "\'+ result.data.sign.timestamp +\'", "signature":"\'+ result.data.sign.signature +\'"}\'
                                    }
                                ],
                                success: function(res) {
                                    if(res.cardList.length > 0) {
                                        if(res.cardList[0].isSuccess) {
                                            var get_card_id = res.cardList[0].cardId;
                                            var get_code = res.cardList[0].code;
                                            //将领取成功结果返回至服务器
                                            wx.request({
                                                url: \'服务器接口地址\',
                                                method: \'POST\',
                                                data: {
                                                    mobile: user_phone,
                                                    openid: openid,
                                                    card_id: get_card_id,
                                                    code: get_code
                                                },
                                                header: {
                                                    \'content-type\': \'application/x-www-form-urlencoded\'
                                                },
                                                success: function(result) {
                                                    if(result.data.error_code != 200) {
                                                        //error处理
                                                    }
                                                    //领取完,跳回首页
                                                    wx.reLaunch({
                                                        url: \'../index/index\'
                                                    })
                                                }
                                            })
                                        }
                                    }
                                },
                                fail: function() {
                                    //领取失败,跳回首页
                                    wx.reLaunch({
                                        url: \'../index/index\'
                                    })
                                }
                            })
                        } else {
                            // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
                            wx.showModal({
                                title: \'提示\',
                                content: \'当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。\'
                            })
                        }                        

参数说明:
cardId:是从后台接口获取到的数据。
timestamp:是从后台获取的时间戳。
nonce_str: 是从后台获取的数据。
openid:在小程序app.js文件中,调用 wx.login()接口,发送code至后台,获取openId,保存到缓存中。(为了防止取不到,我也存到了自定义的全局变量中)
在这里需要用时,就取出openId
signature: 是从后台获取的数据。
success:在这个函数中,我将领取成功结果返回至了服务器(后台提供的接口,参数因项目而异。我们是要求传回手机号,openId,card_id,和code 。这里的card_id 和 code,是success函数中返回的结果)
success, 其实也就是点击“领取到卡包”后触发的函数。

 

凡是需要调用 api.weixin.qq.com这个接口获取的数据,都要由后台调用,返回给前端。前端无法直接调用。

 

4、踩的坑

1)点击领取后,接口调用成功,就要设置按钮不可点击。否则多次快速点击,微信卡包中,卡券列表里会出现多次重复领取的卡券。

2)用自己的appId登录开发者工具,查看公司的小程序项目时,会报错。因为后台服务器使用的是公司小程序的 appsecret 获取的 accesstoken。和自己的appId对不上,就调不了接口。

解决:开通公司小程序的开发权限,用公司的appId登录开发者工具。注意,先选择小程序文件,然后再输入appId。因为如果之前已经打开过这个小程序,再次导入小程序文件时,appId会自动输入之前的appId记录。先输入appId ,有可能会被自动改掉。

3)  注意遇到的几个code的含义,注意区分。 

......做项目时,想写的很多,做完了,突然词穷了。等有人问,或者我自己想,再慢慢补充吧 ==||

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
thinkphp导入微信小程序加密解密库发布时间:2022-07-18
下一篇:
微信小程序 结合公众号前后端全栈开发微信优惠卡券发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap