小程序模板網(wǎng)

微信小程序卡券開發(fā)分享

發(fā)布時(shí)間:2018-04-18 10:05 所屬欄目:小程序開發(fā)教程

我上午發(fā)了個(gè)帖子http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4840 
想請教下小程序卡券開發(fā)事宜,無奈設(shè)計(jì)卡券開發(fā)的實(shí)戰(zhàn)太少,我就自己研究了下,現(xiàn)在分享下自己的代碼~~~

 

一 、 開發(fā)小程序卡券的前提是:

1、小程序和公眾號(hào)有綁定 
2、小程序和該公眾號(hào)需要綁定到同一個(gè)開放平臺(tái)下(http://open.weixin.qq.com) 
3、公眾號(hào)開通微信卡券功能

 

二 、 準(zhǔn)備工作做好后,開始第一步講微信卡券升級成小程序卡券

 

小程序&卡券打通

1 打通主要支持特性

支持在小程序中領(lǐng)取/查看/使用公眾號(hào)AppId創(chuàng)建的會(huì)員卡、票、券(含通用卡)。 
注:創(chuàng)建卡券部分可見卡券接口文檔。

2 商家需要做什么

2.1. 需在open平臺(tái)綁定公眾號(hào)AppId與小程序AppId,詳情查看https://open.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1439297282&version=10&lang=zh_CN&token=;
2.2. 原卡券中配置的自定義外鏈基礎(chǔ)上新增一組小程序頁面配置字段,支持將卡券內(nèi)鏈接升級為小程序; 
2.3. 以小程序AppId調(diào)用添加/查看卡券JS-API,簽名參數(shù)與公眾號(hào)Addcard/Opencard JS-SDK一致; 
2.4. 核銷卡券、數(shù)據(jù)查看保持現(xiàn)網(wǎng)路徑,商家無需調(diào)整。

3 商家接入落地的接口內(nèi)容

3.1. 創(chuàng)建接口/更新卡券信息接口base_info中新增進(jìn)入小程序頁面字段,商家需將小程序字段配置進(jìn)原自定義外鏈結(jié)構(gòu)體中,小程序頁面新增字段示例如下:

 

				
  1. { "card": {
  2. "card_type": "MEMBER_CARD",
  3. "member_card": {
  4. "base_info": {
  5. "custom_url_name": "立即使用",
  6. "custom_url": "http://www.qq.com",
  7. "custom_app_brand_user_name": "gh_86a091e50ad4@app",
  8. "custom_app_brand_pass":"API/cardPage",
  9. "custom_url_sub_title": "6個(gè)漢字tips",
  10. "promotion_url_name": "更多優(yōu)惠",
  11. "promotion_url": "http://www.qq.com",
  12. "promotion_app_brand_user_name": "gh_86a091e50ad4@app",
  13. "promotion_app_brand_pass":"API/cardPage" }
  14. }
  15. }

文檔中講的是模棱兩可,總結(jié)下來就是需要我們在創(chuàng)建微信卡券的時(shí)候,需要添加個(gè)自定義外鏈,并且我們領(lǐng)取一張卡券,通過卡券上的那個(gè)自定義外鏈訪問完成小程序卡券升級!

1、我圖省事就在公眾號(hào)后臺(tái)創(chuàng)建卡券了并添加那個(gè)升級字段的鏈接  QQ截圖20170503171659.jpg  [attach]10124[/attach]

2、創(chuàng)建完成后通過卡券二維碼掃碼領(lǐng)取這張卡券,并點(diǎn)擊上一步設(shè)置的入口,去升級微信卡券到小程序卡券!  3、第一步設(shè)置的那個(gè)自定義字段訪問鏈接內(nèi)的代碼如下(我通過PHP實(shí)現(xiàn)的)  字段說明可看:https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1490190158&version=1&lang=zh_CN&platform=2

 

				
  1. //小程序卡券
  2.  
  3. public function doMobileWxapp(){
  4.  
  5. global $_W,$_GPC;
  6.  
  7. load()->classs('weixin.account');
  8.  
  9. load()->func('communication');
  10.  
  11. $cardid = $_GPC['card_id'];
  12.  
  13. $access_token = WeAccount::token();
  14.  
  15. $post = '{
  16.  
  17. "card_id":"' . $cardid . '",
  18.  
  19. "general_coupon": {
  20.  
  21. "base_info": {
  22.  
  23. "custom_url_name": "小程序",
  24.  
  25. "custom_url": "http://www.qq.com",
  26.  
  27. "custom_app_brand_user_name": "gh_05c38bf33b51@app",
  28.  
  29. "custom_app_brand_pass":"pages/index/index",
  30.  
  31. "custom_url_sub_title": "點(diǎn)擊進(jìn)入",
  32.  
  33. "promotion_url_name": "更多信息",
  34.  
  35. "promotion_url": "http://www.qq.com",
  36.  
  37. "promotion_app_brand_user_name": "gh_05c38bf33b51@app",
  38.  
  39. "promotion_app_brand_pass":"pages/index/index"
  40.  
  41. }
  42.  
  43. }
  44.  
  45. }';
  46.  
  47. $url = "https://api.weixin.qq.com/card/update?access_token={$access_token}";
  48.  
  49. $res = ihttp_post($url, $post);
  50.  
  51. $res = json_decode($res['content'],true);
  52.  
  53. var_dump($res);die();
  54.  
  55. include $this->template('wxapp');
  56.  
  57. }

4、完成卡券升級后,開始小程序里做領(lǐng)取卡券(通過wx.addCard(OBJECT))

領(lǐng)取/查看卡券的接口參數(shù)不變,以小程序的AppId調(diào)用JSSDK,填入公眾號(hào)AppId下的參數(shù)

官方文檔是這么一句話說的,我上午以為小程序可以調(diào)用jssdk了呢,埋頭研究發(fā)現(xiàn)不行,其實(shí)這里根本不需要什么JSSDK,就是通過公眾號(hào)的參數(shù)來生成小程序卡券的簽名字段!  需要注意的是,這里生成卡券簽名需要用到用戶在小程序下的openID,(具體文檔可以查看微信JSSDK卡券添加https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.89.B9.E9.87.8F.E6.B7.BB.E5.8A.A0.E5.8D.A1.E5.88.B8.E6.8E.A5.E5.8F.A3) 貼代碼(代碼略亂)

 

小程序端代碼:

先拿到openID



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23633.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢