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

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

项目概述:按照设计图开发好首页上的优惠券列表,点击某个优惠券,输入手机号,点击领取,调用 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的含义,注意区分。

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

微信小程序-卡券开发(前端)的更多相关文章

  1. Spring+微信小程序 卡券打通

    近期公司项目需要使用到微信卡券模块,主要做的是在小程序打通微信卡券,实现小程序领取卡券的功能效果. 简单说下涉及的东西: Springboot—使用springboot做后端接口,非常便捷 并且根本是 ...

  2. 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑

    公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...

  3. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  4. 微信小程序从零开始开发步骤(四)

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  5. 微信小程序从零开始开发步骤(三)

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  6. 微信小程序从零开始开发步骤(二)

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打开 ...

  7. 微信小程序从零开始开发步骤(一)

    从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了.1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击 ht ...

  8. BeautyWe.js 一套专注于微信小程序的开发范式

    摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...

  9. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

随机推荐

  1. Python的ConfigParser模块读取ini配置文件 报错(持续更新总结)

    1.ConfigParser.MissingSection什么的错误巴拉巴拉一堆,其实根本上就是没有读到配置文件,然后我去检查了一遍路径,发现没有问题,我是将文件的路径作为一个字符串拼接好传到另一个专 ...

  2. linux帮助手册(help/man/info)

    linux本身有数据库(数据库名whatis)--man实际是从whatis数据库里查找信息. makewhatis 刚装系统,若man不能用,用makewhatis命令.整理whatis数据库. 当 ...

  3. 源码分析:升级版的读写锁 StampedLock

    简介 StampedLock 是JDK1.8 开始提供的一种锁, 是对之前介绍的读写锁 ReentrantReadWriteLock 的功能增强.StampedLock 有三种模式:Writing(读 ...

  4. SixLabors.ImageSharp 实践小结

    前言 之前写过一篇 Linux/Docker 中使用 System.Drawing.Common 踩坑小计, 当时主要是有一块图像处理的需要从 .net framework 迁移到 .net core ...

  5. Redis 未授权访问漏洞批量提权

    一.getshell前提 ①能有对 /root/.ssh/目录写入的权限 ②目标机开启22端口 二.安装依赖 sudo easy_install redis 三.使用 redis python hac ...

  6. 通过ip访问项目

  7. git key生成

    1.打开git ssh 2.检查home目录的ssh目录是否存在,没有创建一个,mkdir ~/.ssh 3.运行命名:ssh-keygen -t rsa -C "你的邮箱", 如 ...

  8. FL Studio杂项设置页讲解(下)

    上篇文章中我们重点讲解了FL Studio中"截断/被截"如何有效的避免个采样在播放时相互干扰的知识以及电平设置栏的知识,今天我们将讲完该页面中剩下的栏目知识,一起来看看吧! 1. ...

  9. ABBYY FineReader 15 中保存和导出PDF文档的小细节

    运用ABBYY FineReader OCR文字识别软件,用户能将各种格式的PDF文档保存为新的PDF文档.PDF/A格式文档,以及Microsoft Word.Excel.PPT等格式.在保存与导出 ...

  10. java中String类的使用

    一.Strng类的概念 String类在我们开发中经常使用,在jdk1.8版本之前(包括1.8),String类的底层是一个char类型的数组,1.8版本之后是byte类型的数组,正是因为String ...