纯css写码一个漂亮的优惠券,支持小程序uni-appvue语法

html-css019

纯css写码一个漂亮的优惠券,支持小程序uni-appvue语法,第1张

欢迎加我技术交流QQ群 : 811956471

1.本示例中的特色是,纯css写的优惠券齿轮,和中间的虚线;

2.样式类.oilline 用css实现了,中间粗且高亮两端细的渐变线条;

3.css实现容器右上角旋转45度的圆角角标,再也不用ui切图了;

4.补充:由左向右,左边粗,向右渐变变细的线条:

colModel:[

{name:'id',index:'id',hidden:true,width:10,sorttype:'int',editable:false},

{name:'name',index:'name',label:'优惠券名称',width:15,sortable:false,editable:false},

{name:'discount_type',index: 'getType()',label:'优惠券类型',width:15,sorttype:'text',editable:false},

{name:'des',index: 'des',label:'优惠券描述',width:15,hidden:true,sorttype:'text',editable:false},

{name:'discount_type',index: 'getStatus()',label:'状态',width:15,hidden:true,sorttype:'text',editable:false},

{name:'stock',index: 'stock',label:'优惠券数量',width:15,sortable:false,editable:false},

{name:'totalcard',index: 'getTotalCard()',label:'已发放数量',width:10,sortable:false,editable:false},

{name:'usedcard',index: 'getUsedCard()',label:'已使用数量',width:10,sortable:false,editable:false}

这样卡进去

1 小程序和公众号要有绑定

2 小程序和该公众号要绑定到同一个开发平台下 [https://open.weixin.qq.com/]

3 公众号开通微信卡券功能

4 卡券是在公众号上生成的

5 小程序领取公众号上的卡券

看官方文档

公众号平台卡券文档[https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432]

小程序卡券文档[https://developers.weixin.qq.com/miniprogram/dev/api/card.html]

简单说一下创建卡券:

我使用的是[创建会议门票]

接口:http请求方式: POSTURL:https://api.weixin.qq.com/card/create?access_token=ACCESS_TOKEN

参数:

1 access_token调用接口凭证

2 POST数据 JSON数据

POST数据格式:

1 card_typestring(24) 会议门票类型。

2 base_infoJSON结构基本的卡券数据,见下表,所有卡券通用。

3 meeting_detail string(3072)本次会议于2015年5月10号在广州举行,会场地点:xxxx。会议详情。

主要就是填充base_info信息自己看文档就明白了

返回值:

{

"errcode":0,

"errmsg":"ok",

"card_id":"p1Pj9jr90_SQRaVqYI239Ka1erkI"

}

**记得把card_id保存**

小程序领取卡券:

前端发起请求:wx.addCard(OBJECT)

后端把需要的参数给前端

参数:

cardList: [

{

cardId: '',

cardExt: '{"code": "", "openid": "", "timestamp": "", "signature":""}'

}, {

cardId: '',

cardExt: '{"code": "", "openid": "", "timestamp": "", "signature":""}'

}

]

cardId : 生成卡券返回的cardId

cardExt : json字符串

code : 每一张卡券都有一个code[创建时自己生成的code,这个code有特殊符号限制,和长度限制,自己去感受下微信的坑]

openid : 用户的openid

timestamp : 时间戳/秒

signature : 签名

回调:

处理你领取成功的业务逻辑

示例代码

小程序领取卡券:

# 领取卡券

public function receiveCard()

{

# 小程序appid

$appId = input('appid')

# openid

$openId = input('openid)

# 订单id

$orderId = input('order_id')

$list = $this->getInfo($appId, $openId, $orderId)

# 返回前端json数据格式

return $list

}

public function getInfo($appId, $openId, $orderId)

{

# 业务处理[比如:是否开启卡券功能 | 是否绑定了公众号 等等等.....]

if () xxxxxxxxx

# 查询订单获取保存的 cardId 和 每张卡券的唯一标识 code

$orderInfo = Db::table('')->field('code, card_id')->where()->select()

# 获取ApiTicket 主要用于生成签名

1 [签名文档] : [https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115]

2 [获取access_token] : [https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$config['appid']."&secret=".$config['secret']]

3 [获取api_ticket] : [https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card]

注意:appid 和 secret 是公众号的,通过小程序的appid查询对应公众号的配置。apiTicket 和 accessToken 应该缓存或者是个公共的方法,避免多个地方使用失效。

# 处理数据返回数据

foreach ($orderInfo as $key =>$value) {

# 生成签名的参数

# nonce_str 自己生成的随机字符串31位

$params = [

'code' =>$value['code'],

'api_ticket' =>$apiTicket,

'timestamp' =>time(),

'nonce_str' =>sp_random_string(31),

'card_id' =>$value['card_id'],

'openid' =>$openId

]

$signature = $this->getSignature($params)

$value['openid'] = $params['openid']

$value['timestamp'] = $params['timestamp']

$value['signature'] = $signature

$data[] = $value

}

}

# 生成签名

public function getSignature($params)

{

sort($params, SORT_STRING)

return sha1(implode($params))

}

# 回调

public function cardCallBack()

{

# $_POST 和 input('post.') 竟然接收不到数据 没办法只能用 $GLOBALS['HTTP_RAW_POST_DATA']

$postData = $GLOBALS['HTTP_RAW_POST_DATA']

$postData = json_decode($postData, true)

$cardList = $postData['card_list']

# 把数据转数组

foreach ($cardList as $k =>$v) {

$v['cardExt'] = json_decode($v['cardExt'], true)

$data[] = $v

}

foreach ($data as $key =>$value) {

# 业务处理

}

}

相关资源:微信小程序源码-优惠券卡卷.rar-小程序文档类资源-CSDN文库

文章知识点与官方知识档案匹配

小程序技能树首页概览

4291 人正在系统学习中

打开CSDN APP,看更多技术内容

c# 微信小程序添加卡券签名_微信小程序支付C#后端源码_weixin_3965344...

string _time = getTime().ToString()//再次签名返回数据至小程序 string strB = "appId=" + appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + _time + ...

继续访问

微信小程序优惠券卡卷小程序(截图+源码)_小程序弹出优惠券源码-小...

微信小程序优惠券卡卷小程序(截图+源码)微信小程序优惠券卡卷小程序(截图+源码)微信小程序优惠小程序弹出优惠券源码更多下载资源、学习资料请访问CSDN文库频道.

继续访问

最新发布 微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)

微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优惠券卡卷 优惠券卡卷小程序 (源代码+截图)微信小程序 优

php微信卡包代码,微信卡券,在卡包中跳转到小程序的字段怎么填写

期望实现的功能微信卡券领取到卡包之后,点立即兑换按钮跳转到小程序这是官方文档的说明:卡券内跳转小程序场景介绍商户创建卡券时可以将卡、券内的服务入口设置进入小程序服务。步骤1.开发者须将小程序绑定在公众号下,绑定说明请见绑定公众号与小程序2.创建卡券,并将卡内的cell设置小程序对应的path;3.处理跳转小程序时获取到的信息;custom_app_brand_user_name 自定义使用入...

继续访问

微信小程序源码-优惠券卡卷.rar-小程序文档类资源-CSDN文库

领优惠券(最高得80元) 共5个文件 png:3个 gif:1个 zip:1个 微信小程序源码-优惠券卡卷.rar uniapp源码WIFI密码连接破解小程序源码.zip 4星 · 用户满意度95% WIFI密码连接破解小程序源码,带后台一体化,用户可以添加自己的wifi...

继续访问

1200多套微信小程序源码-史上最全的不同行业的源码集合

微信小程序源码-合集1 https://download.csdn.net/download/fengsss123/10688512 微信小程序源代码,包含:盒马鲜生、轻客洗衣、平安保险、51报名管家、家政预约、美容预约、运动荟、菜谱、麦当劳点餐、购物抽奖等源码。 微信小程序源码-合...

继续访问

php微信卡劵教程,微信卡券添加功能的实现-PHP

一.后台实现准备:①有效的appID ②有效的appSecret ③有效的cardID以下为model类实现:1)首先获取 access_token:以get形式请求$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appId&secret=$appSecret"...

继续访问

php微信卡券接口,微信JS-SDK投放卡券_踩过的坑

微信对于卡券签名规则说的不准确,并且微信自己的签名算法工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign,签名的顺序是错误的,微信对于这部分的文档,多处说明不一致,所以自己总结如下:一.概念属于微信网页开发;在h5页面中使用js方式,调用微信微信js-sdk包中的批量添加卡券接口;也就是使用h5的方式投放卡券;什么是自定义cod...

继续访问

微信小程序实现一些优惠券/卡券_苏苏哇哈哈的博客_优惠券代 ...

1.当优惠券背景是渐变色的时候,处理起来不方便 2.1.3 方法三: mask遮罩 mask: CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。可以理解为透明的部分不显示,展示非透明区域。

继续访问

免费分享20套微信小程序源码 源码免费下载【强烈推荐】

开发的全开源微信小程序商城系统源码,前端采用目前主流的uniapp框架开发,后端采用Java语言开发,前后端代码全部开源,减少重复造轮子,支持小程序商城秒杀、优惠券、多商户、直播卖货、分销等功能,帮助商家快速搭建一个属于自己的微信小程序。

继续访问

计算机毕业设计之基于微信小程序的优惠券领取系统

1、管理员后端技术介绍前端使用html5+css3+js+bootstrop组件进行开发后端使用php语言进行开发数据库使用的是myql开发运行工具使用的是notepad,phpstudy运行环境2、小程序端技术介绍微信开发者语言:js+json+wxss+wxml功能架构图.jpg 管理员端:(1)管理员登录:进入后台对各类信息进行管理,需要先验证登陆者的身份,为保证资料的安全性,首先以管理员的身份输入账户名和密码进行登录。(2)优惠卷管理:主要包括优惠商品列表和优惠商品分类。可以查看所有的商品信息以及对

继续访问

微信小程序开发-优惠券卡卷案例源码.zip

微信小程序开发-优惠券卡卷案例源码.zip

微信小程序,发放优惠券,领取卡券添加到卡包

1.使用微信提供的 send-coupon 发券插件,样式可自定义 <send-coupon @customevent="getcoupon" :send_coupon_params="send_coupon_params" // 发券参数 :sign="sign" //签名 :send_coupon_merchant="send_coupon_merch...

继续访问

借助小程序云开发创建微信卡券

背景 2020年腾讯数字文创节(以下简称TGC)在海南举行,为了能让玩家提前了解TGC的文化和线下活动,在活动开始前的一个月时间,我们就上线了「线上提前预约门票」的功能。为了提升门票预约的体验,以及更好的在活动开始之前提前触达到预约门票的用户,团队今年在小程序预约门票的基础上增加了「添加门票到微信卡券」的功能。 您需要提前准备以下账号信息: 微信开放平台账号 微信小程序账号 微信公众号 接入流程 一、将微信小程序账号和微信公众号绑定在同一个微信开放平台账号下 二、开通微信公众号的卡券功能 在 mp.w

继续访问

微信小程序与卡券功能小结

微信小程序与卡券功能小结 前段时间公司有一个小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽。。。找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个小结方便以后使用。 卡券的领取事件 微信的卡券事件是发生在公众号里的,有公众号发出卡券,用户领取时微信会推送事件给开发者,开发者可以通过该事件获取到用户的信息和卡券的信息。这一步可以将用户领取过的所有卡券...

继续访问

微信小程序 优惠券卡卷小程序(截图+源码)

微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图+源码)微信小程序 优惠券卡卷小程序(截图

php 微信公众号卡卷类,微信小程序卡券开发分享

一 、 开发小程序卡券的前提是:1、小程序和公众号有绑定2、小程序和该公众号需要绑定到同一个开放平台下(http://open.weixin.qq.com)3、公众号开通微信卡券功能二 、 准备工作做好后,开始第一步讲微信卡券升级成小程序卡券小程序&卡券打通1 打通主要支持特性支持在小程序中领取/查看/使用公众号AppId创建的会员卡、票、券(含通用卡)。注:创建卡券部分可见卡券接口文档。...

继续访问

php微信卡券demo,微信小程序卡券开发demo(2)

获取api_ticket的接口地址是下面这个:这里值得注意的是,两个接口在短时间内频繁调用可能会受限,所以api_ticket获取到后要进行缓存,避免重复调用接口,api_ticket的有效期为2个小时。好了,到这里签名所用到的参数都齐了,之后就是生成签名,官方说明是这样:贴一下自己的代码,PHP端:最后返回的3个参数将返回给小程序,作为wx.addCard()--cardList--cardEx...

继续访问

优惠券卡卷小程序_微信小程序源码.zip

优惠券卡卷小程序

微信发卡小程序源码-自动发卡小程序源码-带流量主功能

简介: 此套源码带流量主功能裂变扩展,让你赚个广告收益。 朋友花300大洋互站买来的,源码没有动,而且测试搭建表现良好! 源码功能: 小程序系统/多种卡密领取模式/流量主; 支持:添加分类丨分类介绍丨导入卡密丨卡密使用说明; 支持:直接领取丨观看广告领取丨广告+分享领取丨购买领取; 搭建安装方式: 后台搭建方式 域名需(二级域名也可)及php5.6及以上即可 1、上传后端源码至你的宝塔 2、在宝塔解压源码 3、你的域名/install进行安装 4、你的域名/admin就是你的后台(在后台设置你的小程序I

继续访问

微信小程序添加卡券签名

微信小程序添加卡券签名生成demo,本demo提供生成签名方法,亲测可用。但实际开发中不可直接复制,需根据自己实际开发情况,做出相应的修改。

热门推荐 微信小程序卡券领取 java开发

当时在写微信小程序卡券的时候,当时微信后台都没有接触过,对接微信后台也没学过。关于微信小程序卡券的开发教程也看过不少,看的都是一脸懵逼。关键是开发微信卡券的过程,其中的代码并不难,一开始用php写了一个版本,但是之前的后台是java所以又写了一个java版本。关于卡券对于商家的营销还是很重要的,主要为大家讲解一下微信小程序卡券的准备工作,以及主要流程和当时开发时遇到的错误示范。关于准备工作,关键还是

继续访问

叮咚周边优惠卡券小程序V6.0.4 完整安装包

简介: 与传统的优惠券相比,它突破了时间、空间、地点的限制,作为喜欢新鲜感的年轻人更喜欢从网上搜索到自己需要的优惠券。 而依托在微信小程序下的优惠券更有生命力,利用微信强大用户群体和巨大流量,依托小程序附近五公里展示功能,全天候 24 小时在阜新本地向市民展示。 而且它面对的消费者群体更为广泛。 这是传统优惠券不能比拟的,因为传统的优惠券不一定能够发放到每一个需要它的消费者手中。 相对商家而言,商家可以利用电子优惠券,对自己的企业简介、经营业务、一键导航、一键拨号等进行一并宣传,使更多的人了解,从而为自己挖

继续访问

微信小程序卡券开发步骤

1,去公众平台,开通卡券,绑定小程序,申请公众平台 2,后台根据appid和秘钥获取ccess_token, 3,升级卡券 4,后台根据access_token获取openid 5,后台生成卡券签名 6,前台获取卡券