微信小程序会员卡开发跳坑

看了一下文档,大概是这样一个函数,可以让用户领取会员卡

wx.navigateToMiniProgram({appId: 'wxeb490c6f9b154ef9', //固定为此 appid,不可改动extraData: data, // 包括 encrypt_card_id, outer_str, biz三个字段,须从 step3 中获得的链接中获取参数success: function() {},fail: function() {},complete: function() {}
})

这里的 extraData: data, // 包括 encrypt_card_id, outer_str, biz三个字段,须从 step3 中获得的链,是关键。

extraData,值文档说的第三步,在文档里面很难找到第三步获取开卡组件参数内容。也找不多哪个接口有返回这三个参数 encrypt_card_id, outer_str, biz。

文档上面有个开卡组件文档,我们打开
https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1479824356&version=1&lang=zh_CN&platform=2&token=

既然开卡组件文档没有,那我们去公众号文档,会员卡相关文档看下。

找到卡券-小程序打通

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1499332673_Unm7V

在这里插入图片描述

红色箭头返回的URL,就带了我们需要的encrypt_card_id, outer_str, biz 三个参数, 只是文档没有说明,这个是url里面带的值,而不是返回的参数,所以给查找带来了麻烦。
在这里插入图片描述

(这里之前记得先调用公众号access_token接口,然后去公众号后台拿到卡片ID)

真的拿到了,我们需要的三参数, 然后通过url解析,得到参数。

wx.navigateToMiniProgram({appId: 'wxeb490c6f9b154ef9', //固定为此 appid,不可改动extraData: data, // 包括 encrypt_card_id, outer_str, biz三个字段,须从 step3 中获得的链接中获取参数success: function() {},fail: function() {},complete: function() {}
})

小程序里做个按钮,领取会员卡。点击事件执行上面代码

提示此小程序未绑定公众账号

此时我们登陆公众账号,绑定这个小程序。

绑定后,继续提示错误
在这里插入图片描述

看英文的意思是说小程序wxeb490c6f9b154ef9未绑定此公众号。 这里wxeb490c6f9b154ef9 并不是我们自己的一个小程序appid ,而是文档规定必须填写的wxeb490c6f9b154ef9,这个是官方的一个小程序appid, 原理是我们执行调整小程序,跳转到官方小程序领取会员卡。

比较麻烦的是,绑定官方开卡这个小程序,需要官方同意才可以,这里添加了绑定,官方2天没同意,已经失效。

到此,就实现了微信小程序,跳转到卡卷小程序,领取会员卡的开发过程。


注意:
我这里是后台请求的https://api.weixin.qq.com/card/membercard/activate/geturl?access_token= ACCESS_TOKEN,然后将返回值原封不动的传给前端,如果是前端请求就得拿到card_id;

然后截取返回的“url”拿到:
encrypt_card_id,outer_str,biz;
其中encrypt_card_id,biz需要url编码(最好全部编码)
微信小程序使用decodeURIComponent()

然后三个参数组成对象赋值给dataurl后点击即可跳转会员卡;
注意是对象赋值,extra-data只接受对象,不用JSON.stringify()
传其他数据类型会是null

还有,需要再app.json中配置 navigateToMiniProgramAppIdList

真机测试

开卡成功后在 app.js 里用 onShow(data) 接收参数,访问激活链接


  • navigateToMiniProgram接口即将废弃,新版本中请使用navigator组件来使用此功能
  • 不管是navigator组件 还是 navigateToMiniProgram接口都需要在app.json中配置,才能跳转到开卡小程序
  • "navigateToMiniProgramAppIdList": [ "wxeb490c6f9b154ef9" ],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38486.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用uni-app生成微信小程序踩的坑

毕设要求写一个浏览器端,一个APP端,一个微信端,刚开始以为要学三个技术然后写三个客户端,后来知道了uni-app这个神器,一次编写就可以编译生成APP、H5以及各种小程序版本的客户端。然而我比较熟悉的是web的前端开发&…

uni-app APP端-微信登录流程

uni-app APP端-微信登录流程 手把手教学 1.前期准备 在微信开放平台注册账户 微信开放平台 (qq.com)在管理中心中创建移动应用项目,按要求填写相关信息审核通过后即可获得我们所需的 AppID和AppSecret然后才uniapp项目中填写,在manifest.json中的App模…

微信小程序开发笔记 进阶篇②——多个微信小程序一个用户体系,同一个UnionID

目录 一、前言二、微信开放平台绑定小程序三、微信小程序login和getUserInfo四、后台请求auth.code2Session五、后台解密开放数据 一、前言 微信小程序开发笔记——导读 二、微信开放平台绑定小程序 微信官方文档:UnionID 机制说明 我们目前有一个微信开放平台&am…

微信小程序登录,包括uniapp的微信小程序登录

代码&#xff1a; 样式&#xff1a; <button click"login">登入</button> 事件&#xff08;methods中&#xff09;&#xff1a; login() {//判断缓存中是否有用户数据&#xff08;也就是判断有没有登录&#xff09;if (!uni.getStorageSync(encrypte…

桔子拓客是什么?

桔子拓客软件是一款安装在手机上APP智能营销软件&#xff0c;启动软件后可不停的活跃帐号&#xff0c;推送作品给指定的人群&#xff0c;指定区域&#xff0c;以此来达到精准曝光&#xff0c;定向引流&#xff0c;帮助用户实现流量的暴增&#xff01; 桔子拓客软件采用非入侵式…

做一个和瑞幸咖啡一样的小程序,就能3月赚24亿了吗?

2017年我开了一家咖啡店&#xff0c;疫情之前门店生意还比较惬意和滋润&#xff0c;没想到这疫情突如其来&#xff0c;一度要关门大吉。 后来偶然间看到瑞幸咖啡的年度报表&#xff0c;还有5月24日&#xff0c;瑞幸咖啡公布了2022年第一季度业绩&#xff0c;总净收入为24.046亿…

揭秘爆款的小程序,为何一黑到底

文章目录 前言⛳️ 1.什么是小程序?⛳️ 2.小程序发展史⛳️ 3.小程序原理⛳️ 4.如何开发微信小程序⛳️ 5.小程序的学习资源⛳️ 6.第一个微信小程序 前言 小程序&#xff0c;由于其便捷的操作&#xff0c;以及丰富的功能&#xff0c;已经普及到了生活中的各个领域,有很多人…

开始第一个基于uni-app的微信小程序开发

微信小程序 uni-app开发工具创建uni-app项目运行项目页面显示以及调试 uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、H5、以及各种小程序&#xff08;微信/支付宝/百度/头条/QQ/钉钉/淘宝&#…

微信小程序开发大坑盘点

微信小程序开发大坑盘点 起因 前几天心血来潮&#xff0c;想给学校设计个一站式校园小程序&#xff0c;可以查询成绩&#xff0c;考试信息&#xff0c;课表之类的&#xff08;本来想法里是还想包括一些社交功能的&#xff0c;但这个因为资质问题暂且搁置了&#xff09;。其实…

那些年我们在微信小程序遇到的坑

前言 本篇主要记录一下我在开发中遇到的小程序的坑&#xff0c;还有实现的功能。 避坑 坑一&#xff1a;开发工具配置 &#xff08;1&#xff09;控制台如果报proxy代理相关错误&#xff0c;先检查左上角菜单栏中设置>代理设置>使用系统代理 &#xff08;2&#xff09…

使用uniapp微信公众号和小程序踩坑全过程

什么是微信公众号&#xff1f;它的本质是什么 什么是微信公众号 微信公众平台&#xff0c;简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号&#xff0c;最终定位为“公众平台”。 微信公众号包含了&#xff1a;订阅号&#xff0c;服务号和企业号&#xff0c;各…

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

前言 hello 小伙伴们&#xff0c;现在我已经正式入坑 uni-app 了。uni-app 已经发布好几个月了&#xff0c;期间也是踩坑无数&#xff0c;但是官方秉承着不抛弃不放弃的精神&#xff0c;积极解决开发者的各种简单的、复杂的问题&#xff0c;在此表示感谢。我想还有小伙伴正在持…

基于uniapp开发 微信小程序登陆页面一

此微信登陆页面是参考uniapp开发文档 uniapp一键登录和button组件中的getphonenumber方法 代码展示 <template><view class"login-container"><buttonclass"btn-login"open-type"getPhoneNumber"getphonenumber"handleLog…

uniapp之微信小程序开发——目前遇到的坑

文章目录 微信小程序开发教程目录写在开头所谓的坑1. main.js你最好别瞎改2. uniapp中创建云函数3. 云函数安装其他npm依赖包4. 小程序端API和服务端API有何异同5. 去除button默认样式6. 组件中使用v-if不能用7. websocket使用 总结 微信小程序开发教程目录 正篇 1 【约球onli…

Uniapp小程序登录和登录验证

小程序的登录验证流程图&#xff1a; 第一步&#xff1a;获取微信用户的基本信息&#xff1a; 调用getUserProfile方法&#xff0c;获取用户基本信息 methods:{getUserProfile(){desc:"完善用户信息"&#xff0c;success:(res)>{this.saveUserInfo(res.userInfo) …

采用uni-app开发的多端圈子社区论坛系统

采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发&#xff1b;客户移动端采用uni-app开发&#xff0c;管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步&#xff0c;可快速打包生成APP。 拥有完善的后台管理&#xff0c;不…

uniapp之uni-starter小程序多端研发框架搭建与项目实践

随着移动互联网的飞速发展&#xff0c;无数移动APP琳琅满目&#xff1b;在移动App的发展的基础上&#xff0c;衍生了小程序、轻应用技术&#xff0c;它随时可用&#xff0c;但又无需安装卸载。 小程序是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”…

【记录】基于uni-app开发的微信小程序商城项目

一、项目基本结构 &#xff08;一&#xff09;tabbar页面 首页 分类 购物车 我的(用户中心) &#xff08;二&#xff09;非tabbar页面 搜索 商品列表 商品详情 微信支付 结构解析&#xff1a; 1. 构建一个小程序&#xff0c…

【uni-app项目】瑞幸咖啡小程序

技术栈 框架:uni-appui库:uview-ui编辑器:HBuilderXapi文档 api目前只有商品信息,之前完整版api文档不知道被我丢哪里去了,需要的话请订阅后私聊邮箱 功能描述 使用uni-app框架,仿照瑞幸小程序前端,与后端api对接(使用网上的接口),动态处理数据 功能如下 (注意!…

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫&#xff0c;坑&#xff0c;是活久了见。程序猿世界里各种奇葩的需求都有&#xff0c;随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他&#xff0c;刷到的朋友们就赚到了&#xff0c;你懂的~~~~~~收藏吧&#xff01; 事情前…