一、准备:

1.经微信认证过的微信公众号。

2.经微信认证过的微信小程序号。

先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/dev/api/wx.addCard.html

在看看微信介入卡券的流程,https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1490190158&version=1&lang=zh_CN&platform=2

二、开始

小程序端:

点击事件调用wx.addCard()方法,其中需要重点了解的是cardExt里面的参数

wx.addCard({
cardList: [
{
cardId: card_id,
cardExt: JSON.stringify(cardExt)
}
],
success: (res) => {
console.log(res)
this.addCardSuccess(res.cardList[0].code)
},
fail: (err) => {
console.log(err)
}
})

下面是官方文档的介绍

有个fixed_begintimestamp时间戳需要注意,这个字段是用户实际领取的优惠券时间,所以必须是用户领取完毕之后才可以添加到微信卡券。

这写参数都是由后台传过来的,放在了this.data.wxCardData里面

addToWeixinCard () {
// this.data.wxCardData为从后台获取的一些参数,包括下面这些参数
let { card_id, code, timestamp, openid, nonce_str, signature, fixed_begintimestamp } = this.data.wxCardData
let cardExt = {
code,
openid,
timestamp,
nonce_str,
fixed_begintimestamp,
signature,
outer_str: 'miniProgram'
}
console.log(card_id)
wx.addCard({
cardList: [
{
cardId: card_id,
cardExt: JSON.stringify(cardExt)
}
],
success: (res) => {
console.log(res)
this.addCardSuccess(res.cardList[0].code)
},
fail: (err) => {
console.log(err)
}
})
}

最后调用该方法就可以了,如果调用成功则会跳转到下面的页面

到这里就完成了添加到微信卡券的所有步骤了

微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程的更多相关文章

  1. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  2. 微信小程序添加悬浮在线客服会话按钮

    微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...

  3. 微信小程序领取卡券

    微信小程序领取卡券 标签(空格分隔): php 开发前需要准备的工作 1 小程序和公众号要有绑定 2 小程序和该公众号要绑定到同一个开发平台下 [https://open.weixin.qq.com/ ...

  4. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  5. 微信小程序添加外部地图服务数据

    先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...

  6. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  7. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  8. 微信小程序如何实现和微信客服通话?

    微信小程序如何实现和微信客服通话?

  9. 微信小程序 本地缓存保持登录状态之wx.setStorageSync()使用技巧

    微信小程序提供了一个如同浏览器cookie本地缓存方法,那就是今天要说的wx.setStorageSync() 注意,该方法是同步请求,还有个异步请求的方法是wx.setStorage(),参考官方文 ...

随机推荐

  1. LNMP原理

    在linux系统中,LNMP是目前网站主流架构之一,LNMP中L指linux系统平台,N是nginx指网站的前端程序,发布静态页面和调用外部程序解析动态页面,M是mysql指网站的后台数据库,P是PH ...

  2. centos 解决 mysql command not found

    执行命令: mysql -V 报错内容: -bash: mysql: command not found 报错原因:系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下,当然会找不到命令 ...

  3. Git 命令行解决冲突

    git add filename   将本地工作区文件加入缓存区 git commit filename -m '提交文件注释' git status  查看当前工作区状态 git fetch ori ...

  4. BZOJ 3435 / Luogu 3920 [WC2014]紫荆花之恋 (替罪羊树 动态点分治 套 Treap)

    题意 略 分析 引用PoPoQQQ的话 吾辈有生之年终于把这道题切了...QAQ (蒟蒻狂笑) Orz PoPoQQQ,我又抄PoPoQQQ的题解了 - 突然发现有旋Treap没那么难写 学习了一波C ...

  5. my_note

    1.C# $ 内插字符串 Console.WriteLine($"The value of pi is {Math.PI}"); 替代string.format 2. switch ...

  6. 路由器配置——OSPF协议(1)

    一.实验目的:用OSPF协议使全网互通 二.拓扑图 三.具体步骤配置 (1)R1路由器配置 Router>enableRouter#configure terminalEnter configu ...

  7. 【csp模拟赛1】T1 心有灵犀

    [题目描述] 爱玩游戏的小 Z 最近又换了一个新的游戏.这个游戏有点特别,需要两位玩 家心有灵犀通力合作才能拿到高分. 游戏开始时,两位玩家会得到同一个数字 N,假设这个数字共有 t 位数码, 然后两 ...

  8. 如何自己实现一个HTMLRunner

    在使用unittest框架时,我们常常需要下载一个HTMLRunnerCN.py用来生成HTML格式的报告,那么我们能不能自己实现一个呢? HTMLRunner是模仿unittest自带的TextTe ...

  9. [C语言]结构体初始化的不同方法

    结构体的定义 struct Test{ int first; double second; }Sample; 方法一 定义时直接赋值 Sample s(1, 1.00); 缺点:必须匹配变量顺序,不能 ...

  10. 前端工程师需要掌握的 Babel 知识

    在前端圈子里,对于 Babel,大家肯定都比较熟悉了.如果哪天少了它,对于前端工程师来说肯定是个噩梦.Babel 的工作原理是怎样的可能了解的人就不太多了.本文将主要介绍 Babel 的工作原理以及怎 ...