微信公众号基础04_分享和录音功能的实现

本文简单说明一下微信测试号分享和录音功能的调用，其他JSSD功能与这类似

参考：微信JS-SDK文档

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E8.8E.B7.E5.8F.96.E2.80.9C.E5.88.86.E4.BA.AB.E7.BB.99.E6.9C.8B.E5.8F.8B.E2.80.9D.E6.8C.89.E9.92.AE.E7.82.B9.E5.87.BB.E7.8A.B6.E6.80.81.E5.8F.8A.E8.87.AA.E5.AE.9A.E4.B9.89.E5.88.86.E4.BA.AB.E5.86.85.E5.AE.B9.E6.8E.A5.E5.8F.A3

下载示例代码http://demo.open.weixin.qq.com/jssdk/sample.zip

解压得到

打开php文件夹里面有四个文件

先打开jssdk.php，做如下修改，修改说明请见注解

<?php
class JSSDK {private $appId;private $appSecret;public function __construct($appId, $appSecret) {$this->appId = $appId;$this->appSecret = $appSecret;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();// 注意 URL 一定要动态获取，不能 hardcode.$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$timestamp = time();$nonceStr = $this->createNonceStr();// 这里参数的顺序要按照 key 值 ASCII 码升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";$signature = sha1($string);$signPackage = array("appId"     => $this->appId,"nonceStr"  => $nonceStr,"timestamp" => $timestamp,"url"       => $url,"signature" => $signature,"rawString" => $string);return $signPackage; }private function createNonceStr($length = 16) {$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";$str = "";for ($i = 0; $i < $length; $i++) {$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);}return $str;}private function getJsApiTicket() {// jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例$data = json_decode($this->get_php_file("jsapi_ticket.php"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();// 如果是企业号用以下 URL 获取 ticket// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";$res = json_decode($this->httpGet($url));$ticket = $res->ticket;if ($ticket) {$data->expire_time = time() + 7000;$data->jsapi_ticket = $ticket;$this->set_php_file("jsapi_ticket.php", json_encode($data));}} else {$ticket = $data->jsapi_ticket;}return $ticket;}private function getAccessToken() {// access_token 应该全局存储与更新，以下代码以写入到文件中做示例$data = json_decode($this->get_php_file("access_token.php"));if ($data->expire_time < time()) {// 如果是企业号用以下URL获取access_token// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";$res = json_decode($this->httpGet($url));$access_token = $res->access_token;if ($access_token) {$data->expire_time = time() + 7000;$data->access_token = $access_token;$this->set_php_file("access_token.php", json_encode($data));}} else {$access_token = $data->access_token;}return $access_token;}private function httpGet($url) {$curl = curl_init();curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);curl_setopt($curl, CURLOPT_TIMEOUT, 500);// 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。// 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。// curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);// curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);curl_setopt($curl, CURLOPT_URL, $url);$res = curl_exec($curl);curl_close($curl);return $res;}private function get_php_file($filename) {return trim(substr(file_get_contents("saemc://".$filename), 0));//默认的access_token是从access_token.php的第15位开始获取，因为前面有一段代码**php exit();**，而我们服务器上的access_token是直接显示出来的，所以改成0直接获取}private function set_php_file($filename, $content) {file_put_contents("saemc://".$filename,$content);//对应的文件读取修改}
}

再打开sample.php文件，做如下修改

<?php
//外部引用//二维码生成http://2.weixinbuild.applinzi.com/XXX/sample.php扫码访问require_once "jssdk.php";
$jssdk = new JSSDK("appid", "secret");//分别填写appid和secret
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><br><br><br><button class="start"><h1>开始录音</h1></button><button class="stop"><h1>停止录音</h1></button><button class="play"><h1>播放</h1></button></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: true,//开启调试模式appId: '<?php echo $signPackage["appId"];?>',timestamp: <?php echo $signPackage["timestamp"];?>,nonceStr: '<?php echo $signPackage["nonceStr"];?>',signature: '<?php echo $signPackage["signature"];?>',jsApiList: [// 所有要调用的 API 都要加到这个列表中'onMenuShareAppMessage','startRecord','stopRecord','playVoice',]});wx.ready(function () {var start = document.querySelector(".start");var stop = document.querySelector(".stop");var play = document.querySelector(".play");var localId = null;//用于记录录音IDstart.onclick = function(){wx.startRecord();};stop.onclick = function(){wx.stopRecord({success: function (res) {localId = res.localId;}});};play.onclick = function(){wx.playVoice({localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得});};// 在这里调用 APIwx.onMenuShareAppMessage({title: '微信测试', // 分享标题desc: '微信测试测试', // 分享描述link: 'http://baidu.com', // 分享链接imgUrl: 'http://www.dev666.com/dev666/static/images/dev666logo.png', // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () { // 用户确认分享后执行的回调函数},cancel: function () { // 用户取消分享后执行的回调函数}});});
</script>
</html>

以上两端代码放在文件夹XXX中上传值新浪云SAE

将链接//二维码生成http://2.weixinbuild.applinzi.com/XXX/sample.php生成二维码，用微信客户端扫码后，进入页面，有对应的开始录音，停止录音，播放三个按钮，当点击开始录音后，手机同意获取权限，即可实现了录音功能，当然也可以播放。

点击微信右上角，分享给好友，你的好友收到你的分享点开就是对应的link链接。

微信公众号基础04_分享和录音功能的实现相关推荐

微信公众号开发之分享接口实现
微信公众号开发之分享接口实现第一步:先登录微信公众平台进行设置JS接口安全域名("域名不能包含http://"). 如图: 第二步:配置config接口权限验证首先需要通过获取 ...
微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
查券机器人微信公众号配置教程分享
查券机器人微信公众号配置教程分享一.淘宝联盟官方淘宝客私域渠道ID申请 1.登陆淘宝联盟用需要开通淘宝联盟的手机淘宝扫码授权登陆联盟地址:https://www.alimama.com 2.填写 ...
微信公众号基础功能搭建
自动回复在微信公众号后台首页左侧导航栏中找到功能.然后点击自动回复.自动回复包含被关注回复.收到消息回复和关键词回复三项内容. 被关注回复用户关注公众号之后就会收到回复消息,消息形式包括文字.图片 ...
微信公众号开发中分享功能分享微信朋友圈/微信好友
微信公众号中经常遇到的问题就是分享链接到微信朋友圈微信好友一类的需求. 下边走一下需要操作的流程 1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信 ...
微信公众号开发自定义分享从前台到Java后台调用微信JS接口分享朋友圈
20180811写在前面的话有很多人遇到问题之后问我,结果大多数是因为配置问题,所以请详细阅读前面的配置步骤. 20181016注意事项收到反馈,之前写的接口即将废弃,源代码中的js接口需要修改, ...
（全网独家干货）工控类网站，论坛，微信公众号的整理分享
网站: 1. 中国工控网(www.gongkong.com) 中国很出名的工控网站,是中国工控.工业自动化.智能制造化领域大浏览量门户网站.目前他们关于智能制造的模块还是挺值得一看的. 2. OFwe ...
微信公众号 H5 jssdk 分享卡片功能实现(亲测使用)
1,下载安装js-sdk uni-app包中直接cmd安装 npm install weixin-js-sdk 2,当前要设置页面引入(此时路径根据你当前项目为准找js文件) import wx f ...
微信公众号 - 网页服务 - 分享接口
需要有一个认证的微信公众号,订阅号.服务号都可以,主体不能是"个人" 需要有一个域名,域名不能含有中文,域名需要备案目录一.公众号与域名绑定二. IP白名单三.准备工作 3 ...

微信公众号基础04_分享和录音功能的实现

微信公众号基础04_分享和录音功能的实现相关推荐

最新文章

热门文章