WeChat_Dev
/
SDKsupervise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <title>公众号管理</title>
  <style>
    body {
      padding: 10px;
      width: 90%;
      margin: 0 auto;
    }

    #add-domain {
      cursor: pointer;
    }

    .mt20 {
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <table class="table table-bordered table-hover" id="data-all">
    <thead>
      <tr>
        <th>公众号</th>
        <th>可调域名</th>
        <th>AppID</th>
        <th>AppSecret</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>

  <div class="panel panel-default mt20">
    <div class="panel-heading">如何使用</div>
    <div class="panel-body">
      <p>1.将新申请的公众号AppID,AppSecret添加入列表中，并编写公众号名称（不能重复）</p>
      <p>2.将本网站的IP <strong>120.24.64.23</strong> 加入公众号白名单内</p>
      <p>3.将要使用微信SDK的网站的域名设置为公众号安全域名</p>
      <p>4.使用接口 <strong>https://www.4dage.com/wechat/jssdk/share/</strong> 或 <strong>http://www.4dage.com/wechat/jssdk/share/</strong> 即可获取签名参数</p>
      <p>例如：</p>
      <pre>
$.ajax({
  url: 'https://www.4dage.com/wechat/jssdk/share/',
  type: "post",
  data: {
    'uri': location.href.split('#')[0],   //当前页面地址
    'name': "四维测试服务号"               //哪个公众号，对应上方的名称
  },
  dataType: "jsonp",
  jsonpCallback: "success_jsonp",
  success: function (data, textStatus) {
    wx.config({
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: ['checkJsApi', 'onMenuShareTimeline',
        'onMenuShareAppMessage', 'onMenuShareQQ',
        'onMenuShareWeibo', 'hideMenuItems',
        'showMenuItems', 'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem', 'translateVoice',
        'startRecord', 'stopRecord', 'onRecordEnd',
        'playVoice', 'pauseVoice', 'stopVoice',
        'uploadVoice', 'downloadVoice', 'chooseImage',
        'previewImage', 'uploadImage', 'downloadImage',
        'getNetworkType', 'openLocation', 'getLocation',
        'hideOptionMenu', 'showOptionMenu', 'closeWindow',
        'scanQRCode', 'chooseWXPay',
        'openProductSpecificView', 'addCard', 'chooseCard',
        'openCard']
    });
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
    console.log("jsonp.error:" + textStatus);
  }
});
      </pre>
    </div>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">公众号信息修改</h4>
        </div>
        <div class="modal-body">

          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">公众号</label>
              <input type="input" class="form-control" placeholder="公众号名称" id="name">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">可调域名 <a id="add-domain">+</a></label>
              <input type="input" class="form-control domains" placeholder="可调域名">
              <input type="input" class="form-control domains" placeholder="可调域名">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">AppID</label>
              <input type="input" class="form-control" id="appid" placeholder="AppID">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">AppSecret</label>
              <input type="input" class="form-control" id="appsecret" placeholder="AppSecret">
            </div>
          </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="submit">确定</button>
        </div>
      </div>
    </div>
  </div>

  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script>
    function getData() {
      $.ajax({
        url: '/wechat/jssdk/wechats.json',
        method: 'get',
        dataType: 'JSON',
        success: function (data) {
          window.wechats = data

          let items = data.map((item, index) => {
            let domains = item.domains.map(i => `<p>${i}</p>`).join('')
            return `
              <tr>
                <td>${item.name}</td>
                <td>${domains}</td>
                <td>${item.AppID}</td>
                <td>${item.AppSecret}</td>
                <td>
                  <div class="btn-group" index="${index}">
                    <a class="btn btn-danger" oper="delete">删除</a>
                    <a class="btn btn-warning"  data-toggle="modal" data-target="#myModal">修改</a>
                  </div>
                </td>  
              </tr>
            `
          })
          $('#data-all tbody').html(items.join(''))
        }
      })
    }

    function updateData() {
      $.ajax({
        url: '/wechat/jssdk/share/repect',
        method: 'post',
        dataType: 'JSON',
        data: {
          data: wechats
        },
        success: getData
      })

      $('#myModal').modal('hide')
    }

    $('#add-domain').on('click', function() {
      $(this).parent().parent().append('<input type="input" class="form-control domains" placeholder="可调域名">')
    })

    $('#myModal').on('show.bs.modal', function (event) {
      let that = event.relatedTarget.parentNode
      let index = that.getAttribute('index')

      if (index === null) {
        $('#myModalLabel').html('公众号信息添加')
        $('#name').val('')
        $('#appid').val('')
        $('#appsecret').val('')
        Array.from($('.domains')).forEach((item, i) => {
          i ? $(item).remove() : $(item).val('')
        })
        $('#submit').removeAttr('index')
      } else if (wechats[index]) {
        let wechat = wechats[index]
        let $domainParent = $('.domains').parent()
        let domains = wechat.domains.map(i => `<input type="input" class="form-control domains" value="${i}" placeholder="可调域名">`).join('')

        $('#myModalLabel').html('公众号信息修改')
        $('#name').val(wechat.name)
        $('#appid').val(wechat.AppID)
        $('#appsecret').val(wechat.AppSecret)
        $('.domains').remove()
        $domainParent.append(domains)
        $('#submit').attr('index', index)
      }
    })


    $('#submit').on('click', function () {
      let index = this.getAttribute('index')
      let data = {
        name: $('#name').val(),
        AppID: $('#appid').val(),
        AppSecret: $('#appsecret').val(),
        domains: []
      }

      Array.from($('.domains')).forEach(item => {
        let ip = $(item).val()
        if (ip) {
          data.domains.push(ip)
        }
      })

      if (index !== null) {
        wechats[index] = data
      } else {
        wechats.push(data)
      }

      updateData();
    })


    $('#data-all tbody').on('click', ev => {
      let $that = $(ev.target)
      if ($that.attr('oper') !== 'delete' || !confirm('删除后无法恢复你确定要删除吗？')) return;
      let index = $that.parent().attr('index')

      if (index !== null) {
        wechats.splice(Number(index), 1)
        updateData();
      }
    })

    getData()
  </script>
</body>

</html>