按照上节课程里面的介绍，我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数

jssdk.htm代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>微信JS-SDK Demo 每学网</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  7.   <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body ontouchstart="">
  10. <div class="wxapi_container">
  11.     <div class="wxapi_index_container">
  12.       <ul class="label_box lbox_close wxapi_index_list">
  13.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
  14.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
  15.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
  16.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
  17.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
  18.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
  19.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
  20.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
  21.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
  22.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
  23.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
  24.         <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
  25.       </ul>
  26.     </div>
  27.     <div class="lbox_close wxapi_form">
  28.       <h3 id="menu-basic">基础接口</h3>
  29.       <span class="desc">判断当前客户端是否支持指定JS接口</span>
  30.       <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
  31.  
  32.       <h3 id="menu-share">分享接口</h3>
  33.       <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
  34.       <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
  35.       <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
  36.       <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
  37.       <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
  38.       <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
  39.       <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
  40.       <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
  41.       <span class="desc">获取“分享到QZone”按钮点击状态及自定义分享内容接口</span>
  42.       <button class="btn btn_primary" id="onMenuShareQZone">onMenuShareQZone</button>
  43.  
  44.       <h3 id="menu-image">图像接口</h3>
  45.       <span class="desc">拍照或从手机相册中选图接口</span>
  46.       <button class="btn btn_primary" id="chooseImage">chooseImage</button>
  47.       <span class="desc">预览图片接口</span>
  48.       <button class="btn btn_primary" id="previewImage">previewImage</button>
  49.       <span class="desc">上传图片接口</span>
  50.       <button class="btn btn_primary" id="uploadImage">uploadImage</button>
  51.       <span class="desc">下载图片接口</span>
  52.       <button class="btn btn_primary" id="downloadImage">downloadImage</button>
  53.  
  54.       <h3 id="menu-voice">音频接口</h3>
  55.       <span class="desc">开始录音接口</span>
  56.       <button class="btn btn_primary" id="startRecord">startRecord</button>
  57.       <span class="desc">停止录音接口</span>
  58.       <button class="btn btn_primary" id="stopRecord">stopRecord</button>
  59.       <span class="desc">播放语音接口</span>
  60.       <button class="btn btn_primary" id="playVoice">playVoice</button>
  61.       <span class="desc">暂停播放接口</span>
  62.       <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
  63.       <span class="desc">停止播放接口</span>
  64.       <button class="btn btn_primary" id="stopVoice">stopVoice</button>
  65.       <span class="desc">上传语音接口</span>
  66.       <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
  67.       <span class="desc">下载语音接口</span>
  68.       <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
  69.  
  70.       <h3 id="menu-smart">智能接口</h3>
  71.       <span class="desc">识别音频并返回识别结果接口</span>
  72.       <button class="btn btn_primary" id="translateVoice">translateVoice</button>
  73.  
  74.       <h3 id="menu-device">设备信息接口</h3>
  75.       <span class="desc">获取网络状态接口</span>
  76.       <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
  77.  
  78.       <h3 id="menu-location">地理位置接口</h3>
  79.       <span class="desc">使用微信内置地图查看位置接口</span>
  80.       <button class="btn btn_primary" id="openLocation">openLocation</button>
  81.       <span class="desc">获取地理位置接口</span>
  82.       <button class="btn btn_primary" id="getLocation">getLocation</button>
  83.  
  84.       <h3 id="menu-webview">界面操作接口</h3>
  85.       <span class="desc">隐藏右上角菜单接口</span>
  86.       <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
  87.       <span class="desc">显示右上角菜单接口</span>
  88.       <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
  89.       <span class="desc">关闭当前网页窗口接口</span>
  90.       <button class="btn btn_primary" id="closeWindow">closeWindow</button>
  91.       <span class="desc">批量隐藏功能按钮接口</span>
  92.       <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
  93.       <span class="desc">批量显示功能按钮接口</span>
  94.       <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
  95.       <span class="desc">隐藏所有非基础按钮接口</span>
  96.       <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
  97.       <span class="desc">显示所有功能按钮接口</span>
  98.       <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
  99.  
  100.       <h3 id="menu-scan">微信扫一扫</h3>
  101.       <span class="desc">调起微信扫一扫接口</span>
  102.       <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
  103.       <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
  104.  
  105.       <h3 id="menu-shopping">微信小店接口</h3>
  106.       <span class="desc">跳转微信商品页接口</span>
  107.       <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
  108.  
  109.       <h3 id="menu-card">微信卡券接口</h3>
  110.       <span class="desc">批量添加卡券接口</span>
  111.       <button class="btn btn_primary" id="addCard">addCard</button>
  112.       <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
  113.       <button class="btn btn_primary" id="chooseCard">chooseCard</button>
  114.       <span class="desc">查看微信卡包中的卡券接口</span>
  115.       <button class="btn btn_primary" id="openCard">openCard</button>
  116.  
  117.       <h3 id="menu-pay">微信支付接口</h3>
  118.       <span class="desc">发起一个微信支付请求</span>
  119.       <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
  120.     </div>
  121.   </div>
  122. </body>
  123. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  124. <script>
  125.   /*
  126.    * 注意：
  127.    * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  128.    * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  129.    * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  130.    *
  131.    * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
  132.    * 邮箱地址：weixin-open@qq.com
  133.    * 邮件主题：【微信JS-SDK反馈】具体问题
  134.    * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
  135.    */
  136.   wx.config({
  137.       debug: false,
  138.       appId: 'wxed89d8f74fa6fc51',
  139.       timestamp: 1457595943,
  140.       nonceStr: '929633e84e9e62eecbb8469a3815882e',
  141.       signature: '8172d05fea66d832fcde07ab471ad1be97c72e88',
  142.       jsApiList: [
  143.         'checkJsApi',
  144.         'onMenuShareTimeline',
  145.         'onMenuShareAppMessage',
  146.         'onMenuShareQQ',
  147.         'onMenuShareWeibo',
  148.         'onMenuShareQZone',
  149.         'hideMenuItems',
  150.         'showMenuItems',
  151.         'hideAllNonBaseMenuItem',
  152.         'showAllNonBaseMenuItem',
  153.         'translateVoice',
  154.         'startRecord',
  155.         'stopRecord',
  156.         'onRecordEnd',
  157.         'playVoice',
  158.         'pauseVoice',
  159.         'stopVoice',
  160.         'uploadVoice',
  161.         'downloadVoice',
  162.         'chooseImage',
  163.         'previewImage',
  164.         'uploadImage',
  165.         'downloadImage',
  166.         'getNetworkType',
  167.         'openLocation',
  168.         'getLocation',
  169.         'hideOptionMenu',
  170.         'showOptionMenu',
  171.         'closeWindow',
  172.         'scanQRCode',
  173.         'chooseWXPay',
  174.         'openProductSpecificView',
  175.         'addCard',
  176.         'chooseCard',
  177.         'openCard'
  178.       ]
  179.   });
  180. </script>
  181. <script src="js/zepto.min.js"></script>
  182. <script src="js/demo.js"> </script>
  183. </html>

关键代码如下所示：

我们下一步写一个fs.php将http://weixin.showtp.com/jssdk.htm的链接发送给用户，代码如下所示：

  1. <?php
  2.     header("Content-Type:text/html;charset=utf-8");
  3.     require_once "get_token.php";
  4.     require_once "common.php";
  5.  
  6.     //这里可以写得更人性化一点，通过表单post过来即可
  7.     $contentStr = "请大家过来体验一下JS-SDK的威力吧\n\n http://weixin.showtp.com/jssdk.htm";
  8.     //因为是测试蓄意将openid写死了
  9.     $fromUsername = 'oB1_6tw1NBlGdqSsTCl5anZ7MEU4';
  10.     //因为可能会存在中文所以需要url编码
  11.     $contentStr = urlencode($contentStr);
  12.     //到时候我们我发送的内容我们放到一个数组里面去了
  13.      $content_arr = array('content'=>"{$contentStr}");
  14.     //这里的意思是将来我要发送消息给这个用户
  15.     $reply_arr = array('touser'=>"{$fromUsername}",'msgtype'=>'text','text'=>$content_arr);
  16.     //下一步就是将编码转成规定的json格式
  17.     $post = json_encode($reply_arr);
  18.     //url解码，如果不解码他将会发来一段二进制代码
  19.     $post = urldecode($post);
  20.     $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token={$access_token}";
  21.     //处理好了直接发送
  22.     http_request($url,$post);
  23.  
  24.     echo "发送成功咯";

然后在浏览器上访问fs.php文件，手机端就会收到信息

手机将会收到一条信息，然后点击链接进入网站，如果发现那个功能是您想要的，那就上jssdk.htm里面找那个功能的id，然后通过http://res.wx.qq.com/open/js/jweixin-1.0.0.js 里面进行搜索他的id即可找到那段代码是如何调用的了

温馨提示：

在模版里面要多注意这点噢，要不然很容易中招的

这里面其实就是封装了我们需要调用的各个接口

如果是在实际的项目中，我们的jsapi_ticket频繁的刷新会导致api调用受限的，所以我们往往都是会使用到缓存技术的，如：mencache等

夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能的更多相关文章

  1. 夺命雷公狗---微信开发62----所以memcache对access_token进行全局缓存优化

    公众号调用接口并不是无限制的,为了防止公众号的程序错误而引发微信服务器负载异常,默认情况下, 每个公众号调用接口都不能超过一定限制,当超过一定限制时,调用对应接口会收到错误信息,造成调用失败. 我们也 ...

  2. 夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK

    废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...

  3. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  4. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  6. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  8. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  10. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记

    几个方法 1.filtered 目标是对节点按照一定的选择器进行过滤. 如果传入了过滤选择器,则在nodes节点下,选择符合选择器的节点: 如果没有传入选择器,则返回节点本身,转化为zepto节点. ...

  2. ibatis传入数组或List

    小结一下ibatis框架下,传入参数为数组类型或者是List类型的sql写法.标签里面都不需要表名 1.传入字符串数组,不需要标明parameterClasss,数组和List类型对象一样都可以用&l ...

  3. vs vim 插件

    需要在visual studio安装vim插件,由于在visual studio联机失败,只能手动下载安装. 转载自以下链接: http://blog.csdn.net/lingtianyulong/ ...

  4. IntelliJ IDEA大小写转换快捷键

    IntelliJ IDEA大小写转换快捷键 Ctr + Shift + u

  5. SWIFT 闭包的简单使用二

    import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: ...

  6. 设置GPnP profile文件中asm spfile的位置

    登录asmcmd asmcmd> spset <location-绝对路径> 示例: ASMCMD> spset +DATA/asm/asmparameterfile/asms ...

  7. Android项目目录结构分析

    Android项目目录结构分析 1.HelloWorld项目的目录结构1.1.src文件夹1.2.gen文件夹1.3.Android 2.1文件夹1.4.assets 1.5.res文件夹1.6.An ...

  8. RadioButton 组，ComboBox用法：

    RadioButton 组 final ToggleGroup group = new ToggleGroup(); final RadioButton rb1 = new RadioButton(& ...

  9. eclipse lua使用

    首先安装lua eclipse,装插件或者独立版的都可以.但是在独立版的eclipse装subclipse会报错,Failed to prepare partial IU.解决办法: work aro ...

  10. PostgreSQL Replication之第十章 配置Slony（5）

    10.5 给复制添加表和管理的问题 一旦我们增加了此表到系统中,我们可以将它添加到复制设置.这样做有点复杂.首先,我们必须创建我们自己的新表集合并把这个和我们已经有的表合并.因此,过一段时间,我们将有 ...