夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

时间：2023-02-25 15:10:10

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

夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

jssdk.htm代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>微信JS-SDK Demo 每学网</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

  <link rel="stylesheet" href="css/style.css">

</head>

<body ontouchstart="">

<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>

</body>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

  /*

   * 注意：

   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。

   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

   *

   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：

   * 邮箱地址：weixin-open@qq.com

   * 邮件主题：【微信JS-SDK反馈】具体问题

   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。

   */

  wx.config({

      debug: false,

      appId: 'wxed89d8f74fa6fc51',

      timestamp: 1457595943,

      nonceStr: '929633e84e9e62eecbb8469a3815882e',

      signature: '8172d05fea66d832fcde07ab471ad1be97c72e88',

      jsApiList: [

        'checkJsApi',

        'onMenuShareTimeline',

        'onMenuShareAppMessage',

        'onMenuShareQQ',

        'onMenuShareWeibo',

        'onMenuShareQZone',

        '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'

      ]

  });

</script>

<script src="js/zepto.min.js"></script>

<script src="js/demo.js"> </script>

</html>

关键代码如下所示：

夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

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

<?php

    header("Content-Type:text/html;charset=utf-8");

    require_once "get_token.php";

    require_once "common.php";

    //这里可以写得更人性化一点，通过表单post过来即可

    $contentStr = "请大家过来体验一下JS-SDK的威力吧\n\n http://weixin.showtp.com/jssdk.htm";

    //因为是测试蓄意将openid写死了

    $fromUsername = 'oB1_6tw1NBlGdqSsTCl5anZ7MEU4';

    //因为可能会存在中文所以需要url编码

    $contentStr = urlencode($contentStr);

    //到时候我们我发送的内容我们放到一个数组里面去了

     $content_arr = array('content'=>"{$contentStr}");

    //这里的意思是将来我要发送消息给这个用户

    $reply_arr = array('touser'=>"{$fromUsername}",'msgtype'=>'text','text'=>$content_arr);

    //下一步就是将编码转成规定的json格式

    $post = json_encode($reply_arr);

    //url解码，如果不解码他将会发来一段二进制代码

    $post = urldecode($post);

    $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token={$access_token}";

    //处理好了直接发送

    http_request($url,$post);

    echo "发送成功咯";

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

夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

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

温馨提示：

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

夺命雷公狗---微信开发56----微信js-sdk接口开发（3）所有接口功能

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

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

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

  1. 夺命雷公狗---微信开发62----所以memcache对access&lowbar;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. NEON简介【转】

    转自:http://blog.csdn.net/fengbingchun/article/details/38020265 版权声明:本文为博主原创文章,未经博主允许不得转载. “ARM Advanc ...

  2. Ubuntu12&period;04获取root权限

    有的时候我们需要Ubuntu的root权限,我们该如何获取呢? 其实,很简单,我们只需要在终端中输入以下命令即可获得root权限. 第一步,打开终端 ( ctrl+alt+T ) 第二步,输入命令:s ...

  3. Android&colon;ViewPager04

    目录结构层次: 注意点: 1.MyAdapter.java一定要 extends PagerAdapter 2.MyAdapter要覆写以下几个方法: a.public int getCount(){ ...

  4. 介绍一款轻量级js控件：easy&period;js

    easy.js 组件高速入门 在使用 easy.js 的组件之前,假设能花上几分钟看看以下的一些简单的入门指南,在使用组件的时候你会更加的得心应手. 简单性 easy.js 的组件在 UI(界面) 层 ...

  5. 多因子降维法（MDR，multifactor dimensionality reduction）

    多因子降维法(MDR,Multifactor Dimensionality Reduction ) MDR是近年统计学中发展起来的一种新的分析方法.其中,“因子” 即交互作用研究中的变量,“维” 是指 ...

  6. 1079&period; Total Sales of Supply Chain &lpar;25&rpar; -记录层的BFS改进

    题目如下: A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyon ...

  7. PHP中反射的简单实用&lpar;动态代理）

    <?php class mysql{ function connect($db){ echo "连接mysql数据库${db[0]} \r\n"; } } class ora ...

  8. Fescar Example-Spring Cloud

    项目说明 本项目演示如何使用 Fescar Starter 完成 Spring Cloud 应用的分布式事务接入. 准备工作 在运行此示例之前,你需要先完成如下几步准备工作: 配置数据库 创建 UND ...

  9. MT【57】2017联赛一试解答倒数第二题&colon;一道不等式的最值

    注:康拓诺维奇不等式的应用

  10. selenium - pycharm三种案例运行模式

    1.unittest 运行单个用例 (1)将鼠标放到对应的用例,右键运行即可 2.unittest运行整个脚本案例 将鼠标放到if __name__ == "__main__": ...

相关文章