微信公众号基础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链接。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/255269.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【22-23 春学期】AI作业12-LSTM

网络 LSTM&#xff08;输入门、遗忘门、输出门&#xff09; LSTM&#xff08;长短时记忆网络&#xff09;是一种特殊的RNN&#xff08;循环神经网络&#xff09;&#xff0c;能够学习长期的依赖关系。它通过原始 RNN 的隐藏层只有一个状态&#xff0c;它对于短期的输入非常敏感…

强推宝藏网站

最近还是有很强烈的感受&#xff0c;方法大于努力。最近就整理了一下大学期间比较好用的网站&#xff0c;也陪我度过了一段时间了&#xff0c;排名不分先后&#xff0c;把压箱底的东西拿出来了。 ChatGPT WeTab 新标签页https://www.wetab.link/ChatGPT国内免费使用方法有哪些…

AutoCAD三维建模图——汽车车轮

点击前往下载链接 AutoCAD三维建模图——汽车车轮&#xff0c;超真实&#xff0c;带胎路纹理&#xff0c;轮毂钢圈等等 橡胶轮胎建模&#xff0c;钢圈 胎路纹理 轮毂&#xff0c;螺丝&#xff0c;线条 展示图 展示图

CAD轴测图怎么画,才能不踩坑?

CAD轴测图怎么画&#xff1f;相信从事机械设计、产品设计的小伙伴&#xff0c;对于CAD轴测图并不陌生。CAD轴测图凭借立体感强、直观性好等特点&#xff0c;常作为产品设计制图的辅助图样&#xff0c;用来帮助人们读懂正投影视图&#xff0c;展示产品的整体结构特征。那么如何在…

cad超级排孔_家具cad排孔图 爆破排孔图

求一张板式家具CAD图&#xff0c;设计图&#xff0c;下料&#xff0c;排孔&#xff0c;安装图。 此外... 您可以使用正方形软件绘制家具效果图&#xff0c;可以使用3d max&#xff0c;还可以使用AUTO CAD绘制平面图、剖面图、效果图和三维线图。如果想省事&#xff0c;可以弄个…

【CAD3D】0基础绘制立体模型

一、需求 使用autocad软件绘制一个15.6寸裸屏立体模型。 二、操作 2.1建立文件 打开cad软件&#xff0c;点击左上角空白文件图标新建一个文件&#xff0c;会弹出选择样板窗口。选择acad3D.dwt样板&#xff0c;用于绘制3维模型。仅显示名称&#xff0c;不用理会。点击打开后创…

cad怎么表示出一个孔_AutoCAD如何画一个带孔的立体球

原标题:AutoCAD如何画一个带孔的立体球 第一步,在AutoCAD2007中操作菜单“绘图”→“建模”→“球体”,命令行窗口提示“指定中心点或 [三点(3P)/两点(2P)/相切、相切、半径(T)]:”,在模型空间任意位置点击鼠标;命令行窗口接着提示“指定半径或 [直径(D)]:”,键入“50”…

cad快看_CAD三维这样材质贴图,你学会了吗 ?

▲ 点击“CAD教学”,获取海量学习资料和免费教程 CAD画好三维图后,如果想给它贴图上大理石材质大概看一下效果如何,可以这样操作 ▲画好的三维图 1、点击菜单栏的视图——渲染——材质浏览器。 2、弹出的窗口中点击左下角这个+号按钮。 3、如果需要两种材质以上,可以选择新…

如何应用迅捷CAD编辑器,来绘制一份立体图形。

在CAD设计&#xff0c;为了效果的显著性&#xff0c;经常会用到关于CAD立体图形的绘制&#xff0c;立体图形要知道&#xff0c;是运用三维看图才能显示出来的&#xff0c;现在的CAD绘图软件也都有了关于CAD立体三维图形绘制的功能&#xff0c;那具体是怎么运用的呢&#xff1f;…

cad角度怎么画_初学入门CAD,就这样成精了!

经常有朋友问我怎么学习CAD&#xff0c;或者要求学习CAD&#xff0c;所以我觉得有必要把与学习CAD有关的几个问题阐述一下&#xff0c;以帮助想学者和初学者。还有朋友不知道知识兔吗&#xff1f;知识兔就等于学习&#xff0c;公主号超乎想象&#xff0c;学课程&#xff0c;下载…

Python 用turtle画房子

二层小阁楼 最近作业写的小例子,还可以&#xff0c;不算太丑。 效果如下&#xff1a; 代码如下&#xff1a; import turtle as t import time def go(x,y):t.penup()t.goto(x,y)t.pendown()def rangle(h,w):t.left(180)t.forward(h)t.right(90)t.forward(w)t.left(-90)t.fo…

使用UE4画刷BSP创建房子

UE4系列文章目录 文章目录 UE4系列文章目录前言一、步骤1. 在场景中添加地板2.添加房子盒体3.添加角色机器人到场景中4.给房子加一个门5.把房子挖空6.给房子加一层中间隔板7.给房子加楼梯8.添加窗户9.给房子添加材质9.给房子中添加一些小道具10.把房子变成一个整体 注意添加碰撞…

python turtle画房子详细解释_简述python的turtle绘画命令及解释

一 基础认识 turtle库是python的标准库之一,它是一个直观有趣的图形绘制数据库,turtle(海龟)图形绘制的概念诞生1969年。它的应用十分广,而且使用简单,只要在编写python程序时写上import turtle即可。 1.绘图窗口设置命令 turtle.setup(650,350,200,200):参数从左到右依…

如何用HTML制作一个房子,一分钟,教会你农村自建房该怎么设计!小白学了都能上手画出设计图!...

10*15宅基地怎么设计好?两室一厅农村自建房怎么设计?二层自建房怎么设计? 现在很多人都是自己设计农村自建房的图纸,但福居库发现,多数图纸是不合格的,可以说是随手画的,把自己想要的空间拼凑上去就完事了,很少去考虑到布局是否合理、居住是否舒适、是不是适合居住等问…

python turtle画房子代码里面的窗子,如何用python画房子_用python画一个小房子

如何用python画一个小房子? 效果图如下: 代码如下: import turtle # 前置 p = turtle.Pen() # 作者要说的话 for i in range(6): print(请把画板最大化,否则会影响画面效果!) # 设置笔的速度 p.speed(10) # 开始画画 p.pencolor("#F4A460") p.penup() p.goto((-…

canvas全局合成画月牙_画房子一日营 | 园林设计写生系列课程

画房子导师刘畅绘 暑假来啦&#xff0c;打算窝在空调房当乖宝宝&#xff1f; 当然不&#xff01; 画房子的园林空间绘画写生课&#xff0c;刚好适合你&#xff01; 01 为什么要在园林中绘画&#xff1f; 中国古典园林独步世界&#xff0c;曾被著名建筑学家童雋先生称为“三维的…

HTML绘制小房子,简笔画教程怎么画小房子

房子是很多人刚学画画的时候较为爱画的&#xff0c;画起来也算是比较的简单&#xff0c;简笔画也是幼儿们非常喜欢的绘画方法&#xff0c;爸爸妈妈们可以多陪陪孩子画一画简笔画&#xff0c;那么房子简笔画怎么画?下面我们就一起来看看小房子简笔画图解教程。 绘图工具&#x…

计算机绘画小房子教案,中班绘画《房子》教案

中班绘画《房子》教案 作为一名专为他人授业解惑的人民教师&#xff0c;常常要根据教学需要编写教案&#xff0c;教案有助于学生理解并掌握系统的知识。如何把教案做到重点突出呢&#xff1f;以下是小编整理的中班绘画《房子》教案&#xff0c;欢迎大家借鉴与参考&#xff0c;希…

怎么用python画房子_如何用Python画一颗小树?

1.代码的结构&#xff1a; 本代码有两个子函数组成&#xff0c;有main函数和画树函数组成。 2.编写画树函数&#xff1a; 画树函数&#xff0c;就是用来画出我们的树的一种子函数&#xff0c;代码如下&#xff1a;def tree(plist,l,a,f): if l>5: lst[] for p in plis…

用python画一个房子_用Python动态地画一个房子

用Python动态地画一个房子 Python代码狂人 Python代码大全 用Python动态画一个房子,我们可从上向下画,先画房顶,再依次画阁楼窗户、房屋主体、屋门及主屋窗户。 运行本程序前请确保已安装turtle import turtle as t t.pensize(2) t.speed(1) #设置画画的速率 t.colormode(25…