python 微信開發入門篇JS SDK 含微信支付(二)

  本節完成微信js sdk + 微信支付調用,項目基礎部分請參照入門篇第一章:https://www.cnblogs.com/wangcongxing/p/11546780.html

  1.微信服務號設置

　　   登錄服務號后台設置如下:

　　　1.登錄地址:https://mp.weixin.qq.com/

　　　2.設置-->公眾號設置-->功能設置

　　　設置后結果如下

　　　　

  2.微信商戶后台設置

 　　登錄微信支付平台設置如下:

　　　1.登錄地址(因為需要安裝exe插件, 設置瀏覽為兼容模式  建議使用QQ瀏覽器):https://pay.weixin.qq.com  

　　　　

　　　2.賬戶中心-->賬戶設置-->API安全

　　　　

　　　　

　　　3.產品中心-->開發配置  設置支付授權目錄

　　　　

　　　　

　　　　3.產品中心-->APPID授權管理 

　　　　

  3.演示頁面如下

　　掃碼或識別二維碼在線查看案例

　　

　　

  轉發效果如下圖

支付效果:

  4.案例源碼

　　　案例目錄結構如下

　　　　

　　　　源碼部分

路由源碼　urls.py

from django.contrib import admin
from django.urls import path
from app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    # 微信認證文件建議使用nginx配置
    path('MP_verify_b1reLtO1xRzEjqxJ.txt', views.wechatauth),
    # 微信登錄頁面userinfo
    path('userinfo', views.userinfo),

    # 微信JS SDK 接口調用
    path('wxjssdk/', views.wxjssdk),
    path('get_signature', views.jsapi_signature),
    path('log', views.log),
]

視圖源碼  views.py

from wechatpy.oauth import WeChatOAuth
from django.shortcuts import render, redirect
from django.http import JsonResponse, HttpResponse, HttpResponseRedirect
import time

from django.conf import settings
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render
import uuid
from wechatpy import WeChatClient
import os
import json
from wechatpy import WeChatPay
from wechatpy.pay import dict_to_xml


# Create your views here.

# 公眾號id
AppID = "AppID "
# 公眾號AppSecret
AppSecret = "AppSecret"

# 商戶id
MCH_ID = '商戶號'
# 商戶API秘鑰
API_KEY = 'API KET'
# 接收微信支付異步通知回調地址
notify_url = "http://i157422s94.iok.la/wxjssdk/"


# 微信認證文件,建議通過nginx配置
def wechatauth(request):
    return HttpResponse("b1reLtO1xRzEjqxJ")


# 定義授權裝飾器

def getWeChatOAuth(redirect_url):
    return WeChatOAuth(AppID, AppSecret, redirect_url, 'snsapi_userinfo')


def oauth(method):
    def warpper(request):
        if request.session.get('user_info', None) is None:
            code = request.GET.get('code', None)
            wechat_oauth = getWeChatOAuth(request.get_raw_uri())
            url = wechat_oauth.authorize_url
            print(url)
            if code:
                try:
                    wechat_oauth.fetch_access_token(code)
                    user_info = wechat_oauth.get_user_info()
                    print(user_info)
                except Exception as e:
                    print(str(e))
                    # 這里需要處理請求里包含的 code 無效的情況
                    # abort(403)
                else:
                    # 建議存儲在用戶表
                    request.session['user_info'] = user_info
            else:
                return redirect(url)

        return method(request)

    return warpper


# 獲取用戶信息UserInfo

@oauth
def userinfo(request):
    user_info = request.session.get('user_info')
    return render(request, 'userinfo.html', {"user_info": user_info})


# 微信JS SDK調用
@oauth
def wxjssdk(request):
    user_info = request.session.get('user_info')
    trade_type = "JSAPI"
    body = "商品描述"
    total_fee = "100"
    notify_url = "http://i157422s94.iok.la/notify_url/"
    user_id = user_info["openid"]
    wechatPay = WeChatPay(
        appid=AppID,
        api_key=API_KEY,
        mch_id=MCH_ID,
    )

    order = wechatPay.order.create(trade_type, body, total_fee, notify_url, user_id=user_id)
    wxpay_params = wechatPay.jsapi.get_jsapi_params(order['prepay_id'])

    print(wxpay_params)
    return render(request, 'index.html', {"wxpay_params": wxpay_params})


@csrf_exempt
def jsapi_signature(request):
    noncestr = uuid.uuid4()
    timestamp = int(time.time())
    url = request.POST['url']

    client = WeChatClient(AppID, AppSecret)
    ticket_response = client.jsapi.get_ticket()
    signature = client.jsapi.get_jsapi_signature(
        noncestr,
        ticket_response['ticket'],
        timestamp,
        url
    )
    ret_dict = {
        'noncestr': noncestr,
        'timestamp': timestamp,
        'url': url,
        'signature': signature,
    }
    return JsonResponse(ret_dict)


def log(request):
    print('Hello World!')
    return JsonResponse({
        'status': 'ok',
    })

templates-->index.html 源碼

<!doctype html>
<html>
<head>
   <title>微信JS-SDK Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <style type="text/css">
      html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
}
body {
  line-height: 1.6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f1f0f6;
}
* {
  margin: 0;
  padding: 0;
}
button {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  *font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul,
ol {
  padding-left: 0;
  list-style-type: none;
}
a {
  text-decoration: none;
}
.label_box {
  background-color: #ffffff;
}
.label_item {
  padding-left: 15px;
}
.label_inner {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 24px;
  position: relative;
}
.label_inner:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border-top: 1px solid #ededed;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  top: auto;
  bottom: -2px;
}
.lbox_close {
  position: relative;
}
.lbox_close:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border-top: 1px solid #ededed;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.lbox_close:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border-top: 1px solid #ededed;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  top: auto;
  bottom: -2px;
}
.lbox_close .label_item:last-child .label_inner:before {
  display: none;
}
.btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  /*.btn_h(@btnHeight);*/
  height: 42px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #ffffff;
  line-height: 42px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.btn.btn_inline {
  display: inline-block;
}
.btn_primary {
  background-color: #04be02;
}
.btn_primary:not(.btn_disabled):visited {
  color: #ffffff;
}
.btn_primary:not(.btn_disabled):active {
  color: rgba(255, 255, 255, 0.9);
  background-color: #039702;
}
button.btn {
  width: 100%;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
}
button.btn:focus {
  outline: 0;
}
.wxapi_container {
  font-size: 16px;
}
h1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 2em;
  padding-left: 15px;
  color: #8d8c92;
}
.desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 2em;
  color: #8d8c92;
}
.wxapi_index_item a {
  display: block;
  color: #3e3e3e;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wxapi_form {
  background-color: #ffffff;
  padding: 0 15px;
  margin-top: 30px;
  padding-bottom: 15px;
}
h3 {
  padding-top: 16px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: 400;
  color: #3e3e3e;
  position: relative;
}
h3:first-child {
  padding-top: 15px;
}
h3:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 1px;
  border-top: 1px solid #ededed;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.btn {
  margin-bottom: 15px;
}


  </style>
</head>
<body>
<div class="wxapi_container">
    <div class="wxapi_index_container">
      <ul class="label_box lbox_close wxapi_index_list">
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基礎接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">圖像接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音頻接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">設備信息接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信掃一掃接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
      </ul>
    </div>
    <div class="lbox_close wxapi_form">
      <h3 id="menu-basic">基礎接口</h3>
      <span class="desc">判斷當前客戶端是否支持指定JS接口</span>
      <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>

      <h3 id="menu-share">分享接口</h3>
      <span class="desc">獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口</span>
      <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
      <span class="desc">獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口</span>
      <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
      <span class="desc">獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口</span>
      <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
      <span class="desc">獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口</span>
      <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
      <span class="desc">獲取“分享到QZone”按鈕點擊狀態及自定義分享內容接口</span>
      <button class="btn btn_primary" id="onMenuShareQZone">onMenuShareQZone</button>

      <h3 id="menu-image">圖像接口</h3>
      <span class="desc">拍照或從手機相冊中選圖接口</span>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button>
      <span class="desc">預覽圖片接口</span>
      <button class="btn btn_primary" id="previewImage">previewImage</button>
      <span class="desc">上傳圖片接口</span>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button>
      <span class="desc">下載圖片接口</span>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button>

      <h3 id="menu-voice">音頻接口</h3>
      <span class="desc">開始錄音接口</span>
      <button class="btn btn_primary" id="startRecord">startRecord</button>
      <span class="desc">停止錄音接口</span>
      <button class="btn btn_primary" id="stopRecord">stopRecord</button>
      <span class="desc">播放語音接口</span>
      <button class="btn btn_primary" id="playVoice">playVoice</button>
      <span class="desc">暫停播放接口</span>
      <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
      <span class="desc">停止播放接口</span>
      <button class="btn btn_primary" id="stopVoice">stopVoice</button>
      <span class="desc">上傳語音接口</span>
      <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
      <span class="desc">下載語音接口</span>
      <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>

      <h3 id="menu-smart">智能接口</h3>
      <span class="desc">識別音頻並返回識別結果接口</span>
      <button class="btn btn_primary" id="translateVoice">translateVoice</button>

      <h3 id="menu-device">設備信息接口</h3>
      <span class="desc">獲取網絡狀態接口</span>
      <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>

      <h3 id="menu-location">地理位置接口</h3>
      <span class="desc">使用微信內置地圖查看位置接口</span>
      <button class="btn btn_primary" id="openLocation">openLocation</button>
      <span class="desc">獲取地理位置接口</span>
      <button class="btn btn_primary" id="getLocation">getLocation</button>

      <h3 id="menu-webview">界面操作接口</h3>
      <span class="desc">隱藏右上角菜單接口</span>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
      <span class="desc">顯示右上角菜單接口</span>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
      <span class="desc">關閉當前網頁窗口接口</span>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button>
      <span class="desc">批量隱藏功能按鈕接口</span>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
      <span class="desc">批量顯示功能按鈕接口</span>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
      <span class="desc">隱藏所有非基礎按鈕接口</span>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
      <span class="desc">顯示所有功能按鈕接口</span>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>

      <h3 id="menu-scan">微信掃一掃</h3>
      <span class="desc">調起微信掃一掃接口</span>
      <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信處理結果)</button>
      <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回結果)</button>

      <h3 id="menu-shopping">微信小店接口</h3>
      <span class="desc">跳轉微信商品頁接口</span>
      <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>

      <h3 id="menu-card">微信卡券接口</h3>
      <span class="desc">批量添加卡券接口</span>
      <button class="btn btn_primary" id="addCard">addCard</button>
      <span class="desc">調起適用於門店的卡券列表並獲取用戶選擇列表</span>
      <button class="btn btn_primary" id="chooseCard">chooseCard</button>
      <span class="desc">查看微信卡包中的卡券接口</span>
      <button class="btn btn_primary" id="openCard">openCard</button>

      <h3 id="menu-pay">微信支付接口</h3>
      <span class="desc">發起一個微信支付請求</span>
      <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
    </div>
  </div>
<script src="https://www.szyfd.xyz/static/HOME/style/js/jquery-1.7.2.js"></script>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    (function (window, $) {
        var fInitWeixin = function (d) {
            wx.config({
                debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: 'wx975992a7ef6d6c9d', // 必填，公眾號的唯一標識
                timestamp: d.timestamp, // 必填，生成簽名的時間戳
                nonceStr: d.noncestr, // 必填，生成簽名的隨機串
                signature: d.signature,// 必填，簽名，見附錄1
                jsApiList: ['checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'onVoicePlayEnd',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
            });
        }
        $.ajax({
            type: 'post',
            url: '/get_signature',
            dataType: 'json',
            data: {url: location.href},
            success: function (d) {
                fInitWeixin(d)
            }
        })
    })(window, jQuery)
</script>

<script type="text/javascript">

    /*
 * 注意：
 * 1. 所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
 * 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
 * 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
 *
 * 如有問題請通過以下渠道反饋：
 * 郵箱地址：[e-mail]
 * 郵件主題：【微信JS-SDK反饋】具體問題
 * 郵件內容說明：用簡明的語言描述問題所在，並交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
 */
    wx.ready(function () {
        // 1 判斷當前版本是否支持指定 JS 接口，支持批量判斷
        document.querySelector('#checkJsApi').onclick = function () {
            wx.checkJsApi({
                jsApiList: [
                    'getNetworkType',
                    'previewImage'
                ],
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };




        // 3 智能接口
        var voice = {
            localId: '',
            serverId: ''
        };
        // 3.1 識別音頻並返回識別結果
        document.querySelector('#translateVoice').onclick = function () {
            if (voice.localId == '') {
                alert('請先使用 startRecord 接口錄制一段聲音');
                return;
            }
            wx.translateVoice({
                localId: voice.localId,
                complete: function (res) {
                    if (res.hasOwnProperty('translateResult')) {
                        alert('識別結果：' + res.translateResult);
                    } else {
                        alert('無法識別');
                    }
                }
            });
        };

        // 4 音頻接口
        // 4.2 開始錄音
        document.querySelector('#startRecord').onclick = function () {
            wx.startRecord({
                cancel: function () {
                    alert('用戶拒絕授權錄音');
                }
            });
        };

        // 4.3 停止錄音
        document.querySelector('#stopRecord').onclick = function () {
            wx.stopRecord({
                success: function (res) {
                    voice.localId = res.localId;
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 4.4 監聽錄音自動停止
        wx.onVoiceRecordEnd({
            complete: function (res) {
                voice.localId = res.localId;
                alert('錄音時間已超過一分鍾');
            }
        });

        // 4.5 播放音頻
        document.querySelector('#playVoice').onclick = function () {
            if (voice.localId == '') {
                alert('請先使用 startRecord 接口錄制一段聲音');
                return;
            }
            wx.playVoice({
                localId: voice.localId
            });
        };

        // 4.6 暫停播放音頻
        document.querySelector('#pauseVoice').onclick = function () {
            wx.pauseVoice({
                localId: voice.localId
            });
        };

        // 4.7 停止播放音頻
        document.querySelector('#stopVoice').onclick = function () {
            wx.stopVoice({
                localId: voice.localId
            });
        };

        // 4.8 監聽錄音播放停止
        wx.onVoicePlayEnd({
            complete: function (res) {
                alert('錄音（' + res.localId + '）播放結束');
            }
        });

        // 4.8 上傳語音
        document.querySelector('#uploadVoice').onclick = function () {
            if (voice.localId == '') {
                alert('請先使用 startRecord 接口錄制一段聲音');
                return;
            }
            wx.uploadVoice({
                localId: voice.localId,
                success: function (res) {
                    alert('上傳語音成功，serverId 為' + res.serverId);
                    voice.serverId = res.serverId;
                }
            });
        };

        // 4.9 下載語音
        document.querySelector('#downloadVoice').onclick = function () {
            if (voice.serverId == '') {
                alert('請先使用 uploadVoice 上傳聲音');
                return;
            }
            wx.downloadVoice({
                serverId: voice.serverId,
                success: function (res) {
                    alert('下載語音成功，localId 為' + res.localId);
                    voice.localId = res.localId;
                }
            });
        };

        // 5 圖片接口
        // 5.1 拍照、本地選圖
        var images = {
            localId: [],
            serverId: []
        };
        document.querySelector('#chooseImage').onclick = function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    alert('已選擇 ' + res.localIds.length + ' 張圖片');
                }
            });
        };

        // 5.2 圖片預覽
        document.querySelector('#previewImage').onclick = function () {
            wx.previewImage({
                current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
                urls: [
                    'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
                    'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
                    'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
                ]
            });
        };

        // 5.3 上傳圖片
        document.querySelector('#uploadImage').onclick = function () {
            if (images.localId.length == 0) {
                alert('請先使用 chooseImage 接口選擇圖片');
                return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];

            function upload() {
                wx.uploadImage({
                    localId: images.localId[i],
                    success: function (res) {
                        i++;
                        //alert('已上傳：' + i + '/' + length);
                        images.serverId.push(res.serverId);
                        if (i < length) {
                            upload();
                        }
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }

            upload();
        };

        // 5.4 下載圖片
        document.querySelector('#downloadImage').onclick = function () {
            if (images.serverId.length === 0) {
                alert('請先使用 uploadImage 上傳圖片');
                return;
            }
            var i = 0, length = images.serverId.length;
            images.localId = [];

            function download() {
                wx.downloadImage({
                    serverId: images.serverId[i],
                    success: function (res) {
                        i++;
                        alert('已下載：' + i + '/' + length);
                        images.localId.push(res.localId);
                        if (i < length) {
                            download();
                        }
                    }
                });
            }

            download();
        };

        // 6 設備信息接口
        // 6.1 獲取當前網絡狀態
        document.querySelector('#getNetworkType').onclick = function () {
            wx.getNetworkType({
                success: function (res) {
                    alert(res.networkType);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 7 地理位置接口
        // 7.1 查看地理位置
        document.querySelector('#openLocation').onclick = function () {
            wx.openLocation({
                latitude: 23.099994,
                longitude: 113.324520,
                name: 'TIT 創意園',
                address: '廣州市海珠區',
                scale: 14,
                infoUrl: 'https://www.szyfd.xyz'
            });
        };

        // 7.2 獲取當前地理位置
        document.querySelector('#getLocation').onclick = function () {
            wx.getLocation({
                success: function (res) {
                    alert(JSON.stringify(res));
                },
                cancel: function (res) {
                    alert('用戶拒絕授權獲取地理位置');
                }
            });
        };

        // 8 界面操作接口
        // 8.1 隱藏右上角菜單
        document.querySelector('#hideOptionMenu').onclick = function () {
            wx.hideOptionMenu();
        };

        // 8.2 顯示右上角菜單
        document.querySelector('#showOptionMenu').onclick = function () {
            wx.showOptionMenu();
        };

        // 8.3 批量隱藏菜單項
        document.querySelector('#hideMenuItems').onclick = function () {
            wx.hideMenuItems({
                menuList: [
                    'menuItem:readMode', // 閱讀模式
                    'menuItem:share:timeline', // 分享到朋友圈
                    'menuItem:copyUrl' // 復制鏈接
                ],
                success: function (res) {
                    alert('已隱藏“閱讀模式”，“分享到朋友圈”，“復制鏈接”等按鈕');
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 8.4 批量顯示菜單項
        document.querySelector('#showMenuItems').onclick = function () {
            wx.showMenuItems({
                menuList: [
                    'menuItem:readMode', // 閱讀模式
                    'menuItem:share:timeline', // 分享到朋友圈
                    'menuItem:copyUrl' // 復制鏈接
                ],
                success: function (res) {
                    alert('已顯示“閱讀模式”，“分享到朋友圈”，“復制鏈接”等按鈕');
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 8.5 隱藏所有非基本菜單項
        document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
            wx.hideAllNonBaseMenuItem({
                success: function () {
                    alert('已隱藏所有非基本菜單項');
                }
            });
        };

        // 8.6 顯示所有被隱藏的非基本菜單項
        document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
            wx.showAllNonBaseMenuItem({
                success: function () {
                    alert('已顯示所有非基本菜單項');
                }
            });
        };

        // 8.7 關閉當前窗口
        document.querySelector('#closeWindow').onclick = function () {
            wx.closeWindow();
        };

        // 9 微信原生接口
        // 9.1.1 掃描二維碼並返回結果
        document.querySelector('#scanQRCode0').onclick = function () {
            wx.scanQRCode();
        };
        // 9.1.2 掃描二維碼並返回結果
        document.querySelector('#scanQRCode1').onclick = function () {
            wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 10 微信支付接口
        // 10.1 發起一個支付請求
        document.querySelector('#chooseWXPay').onclick = function () {
            // 注意：此 Demo 使用 2.7 版本支付接口實現，建議使用此接口時參考微信支付相關最新文檔。
            wx.chooseWXPay({
                timestamp: {{ wxpay_params.timeStamp }},
                nonceStr: '{{ wxpay_params.nonceStr }}',
                package: '{{ wxpay_params.package }}',
                signType: '{{ wxpay_params.signType }}', // 注意：新版支付接口使用 MD5 加密
                paySign: '{{ wxpay_params.paySign }}'
            });
        };

        // 11.3  跳轉微信商品頁
        document.querySelector('#openProductSpecificView').onclick = function () {
            wx.openProductSpecificView({
                productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
                extInfo: '123'
            });
        };

        // 12 微信卡券接口
        // 12.1 添加卡券
        document.querySelector('#addCard').onclick = function () {
            wx.addCard({
                cardList: [
                    {
                        cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
                        cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
                    },
                    {
                        cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
                        cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
                    }
                ],
                success: function (res) {
                    alert('已添加卡券：' + JSON.stringify(res.cardList));
                }
            });
        };

        var codes = [];
        // 12.2 選擇卡券
        document.querySelector('#chooseCard').onclick = function () {
            wx.chooseCard({
                cardSign: '8ef8aa071f1d2186cb1355ec132fed04ebba1c3f',
                timestamp: 1437997723,
                nonceStr: 'k0hGdSXKZEj3Min5',
                success: function (res) {
                    res.cardList = JSON.parse(res.cardList);
                    encrypt_code = res.cardList[0]['encrypt_code'];
                    alert('已選擇卡券：' + JSON.stringify(res.cardList));
                    decryptCode(encrypt_code, function (code) {
                        codes.push(code);
                    });
                }
            });
        };

        // 12.3 查看卡券
        document.querySelector('#openCard').onclick = function () {
            if (codes.length < 1) {
                alert('請先使用 chooseCard 接口選擇卡券。');
                return false;
            }
            var cardList = [];
            for (var i = 0; i < codes.length; i++) {
                cardList.push({
                    cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
                    code: codes[i]
                });
            }
            wx.openCard({
                cardList: cardList
            });
        };
        shareData = {
            title: '深圳易方達軟件',
            desc: '按時交付完美主義者',
            link: location.href,
            imgUrl: 'https://www.szyfd.xyz/static/HOME/style/images/shareLogo.png',
            trigger: function (res) {
                // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回

            },
            success: function (res) {

            },
            cancel: function (res) {

            },
            fail: function (res) {
                //alert(JSON.stringify(res));
            }
        }
        // 2. 分享接口

        wx.onMenuShareAppMessage(shareData);

        wx.onMenuShareTimeline(shareData);

        wx.onMenuShareQQ(shareData);

        wx.onMenuShareWeibo(shareData);

        wx.onMenuShareQZone(shareData);

        function decryptCode(code, callback) {
            $.getJSON('/jssdk/decrypt_code.php?code=' + encodeURI(code), function (res) {
                if (res.errcode == 0) {
                    codes.push(res.code);
                }
            });
        }
    });

    wx.error(function (res) {
        alert(res.errMsg);
    });


</script>
</body>
</html>