微信 JS-SDK

最新推荐文章于 2025-06-22 02:01:58 发布
原创 最新推荐文章于 2025-06-22 02:01:58 发布 · 409 阅读 · 0 ·
CC 4.0 BY-SA版权

本文介绍如何利用微信JS-SDK实现网页端录音功能，包括配置JS接口安全域名、引入JS文件、调用录音接口及上传声音文件到微信服务器等步骤，并提供了完整的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

音频接口

录音的过程是通过调用微信js文件，获取js参数传送到php，实现跟wx服务器的交互。
该js接口会通过js方法调用微信里的录音控件，可以保存在本地，直接调用js方法进行播放，也可以将声音文件上传到wx服务器（保存三天），此期间可以从wx服务器将声音文件保存在自己服务器。

  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  • 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
  • wx.config({ }) //所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

如果是微擎的话，微擎会自动调用绑定的公众号的信息

$_W['account']['jssdkconfig'] = $account_api->getJssdkConfig()

在插件里面可以直接调用

var jssdkconfig = {php echo json_encode($_W['account']['jssdkconfig']);} || {};
wx.config(jssdkconfig);
  • wx.ready(function(){}); //config信息验证后会执行ready方法
  • wx.error(function(res){ }); // config信息验证失败会执行error函数
   <img style="width: 2.5em;" src="{MODULE_URL}public/img/voice.png" onclick="voice.start();" alt=""/>


voice.start = function(e){
    console.log(e);
    if(recording){
        voice.stop();
        $('.fa-pause').addClass('fa-play').removeClass('fa-pause');
    }
    wx.ready(function(){
        wx.startRecord({
            cancel: function() {
                $.toast("你拒绝了录音");
                return ;
            },
            success: function() {
                recording = true;
                $('.fa-play').addClass('fa-pause').removeClass('fa-play');
                timer = voice.timer();
            }
        });
        wx.onVoiceRecordEnd({
            complete: function(e) {
                post.localId = e.localId;
                recording = false;
                $(e).find('.fa').removeClass('fa-pause');
                $(e).find('.fa').addClass('fa-play');
                $('.weui_dialog .weui_dialog_title').html('录制已达最大时间限制');
            }
        });
    })
}
 <button class="postVoice btn_voice" onclick="postVoice()" style="margin-top: 5px;font-size:1.2em;">
                    <i class="fa fa-paper-plane"></i>
                    发送
                </button>
    function postVoice(){
        posting = true;
        if(recording){
            voice.stop(function(){
                postTo();
            });
        }else{
            postTo();
        }
    }

  function postTo(){
        post.desc = $('.weui_dialog .text_desc').val();
        wx.ready(function(){
            if(!post.localId){
                $.toast("你说话了么？我怎么没听到！");
                return '';
            }
            wx.uploadVoice({
                localId: post.localId,
                isShowProgressTips: 1,
                success: function (res) {
                    alert(res.serverId);
                    post.serverId = res.serverId;


                    post.act = 'answer';
                    console.log(post);
                    if(!post.serverId){
                        $.toast("你说话了么？我怎么没听到！");
                        return '';
                    }
                    $.showLoading("正在发送数据");
                    $.post("",post,function(data){
                        if(data.status == 1){
                            $.hideLoading();
                            $.toast(data.message,2000,function(){
                                window.location.href = "{php echo $_W['siteurl']}";
                            });
                        }else{
                            $.toast(data.message,2000,'cancel');
                            $.hideLoading();
                        }
                        posting = false;
                    },'json');
                }
            });
        });
    }

voice.stop = function(callback){
    wx.ready(function(){
        wx.stopRecord({
            success: function (res) {
                post.localId = res.localId;
                alert(res.localId);
                recording = false;
                if(callback){
                    callback();
                }
                setTimeout(function(){
                    $('.weui_dialog .weui_dialog_title').html('停止录音成功');
                },1000);
            }
        });
    });
}

php

if($act == 'answer'){
            $serverId = trim($_GPC['serverId']);
            $timelong = intval($_GPC['timelong']);

            $data = array();
            $data['uniacid'] = $_W['uniacid'];
            $data['openid'] = $_W['openid'];
            $data['voice_id'] = $serverId;
            $data['isweixin'] = 0;
            $data['timelong'] = $timelong;
            $data['chart_id'] = $chart['id'];
            $data['create_time'] = time();
            $data['desc'] = trim($_GPC['desc']);

            //df
            $data['jf_time'] =date("Ymd") ;

            $chart_log = M('chart_log')->update($data);
            M('common')->createAudio('chart_log',$chart_log['id'],$serverId);
            $data = array();
            $data['status'] = 1;
            $data['message'] = '发送成功';
            $this->JFeveryDay();     //Delivery

            die(json_encode($data));
        }

class chart_log
{
    public $table = 'imeepos_fvoice_chart_log';

    public function __construct()
    {
        $this->install();
    }

   public function update($data){
        global $_W;
        $data['uniacid'] = $_W['uniacid'];
        if(empty($data['id'])){
            pdo_insert($this->table,$data);
            $data['id'] = pdo_insertid();
        }else{
            //更新
            pdo_update($this->table,$data,array('uniacid'=>$_W['uniacid'],'id'=>$data['id']));
        }
        return $data;
    }

  }


class common extends Imeepos_fvoiceModuleSite
{
public function createAudio($table,$id,$service_id=""){
        global $_W;
        $oauth_account = WeAccount::create($_W['account']['oauth']);
        $token = $oauth_account->getAccessToken();

        $url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$token."&media_id=".$service_id;
      // echo $url;

        $key = M('qiniu')->fetch($url,$service_id.".amr");
        $re_url = $this->createMobileUrl('qiniu2mp3',array('id'=>$id,'table'=>$table));//创建网页地址
        $re_url = str_replace('./','',$re_url);
        $re_url = $_W['siteroot'].'app/'.$re_url;
        M('qiniu')->toMp3($key,$re_url);
    }
   }



   public function fetch($url,$key){


        list($ret, $err) = $this->bucketMgr->fetch($url, $this->bucket, $key);

        if ($err !== null) {
            return false;
        } else {
            return $key;
            return $ret;
        }
    }

  public function toMp3($key,$return){
        $data = 'bucket=' . $this->bucket . '&key=' . $key . '&fops=' . urlencode('avthumb/mp3') . '&notifyURL=' . urlencode($return) . '&pipeline='.$this->mps;

        $sign = hash_hmac('sha1', "/pfop/\n" . $data, $this->secret_key, true);
        $token = $this->access_key . ':' . str_replace(array('+', '/'), array('-', '_'), base64_encode($sign));
        $header = array('Content-Type:application/x-www-form-urlencoded', 'Authorization: QBox ' . $token);
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, 'http://api.qiniu.com/pfop/');
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        $result = json_decode(curl_exec($curl), true);//访问网页并获得返回值
        curl_close($curl);
        $this->delete($key);
        return $result;
    }

 public  function delete($key){
        $err = $this->bucketMgr->delete($this->bucket, $key);
        if ($err !== null) {
            return false;
        } else {
            return false;
        }
    }

voice.js

var voice = {};
var recording = false;
var localId = null;
var timer = null;
var post = {};
post.timelong = 0;
posting = false;

voice.show = function(){
    console.log(_follow);
    console.log(_openid);
    if(_follow == 0 || _openid.length < 4){

        $.modal({
            title:'请扫码关注后发言',
            text: '<img src="'+_qrcode+'" style="width:100%;"/>',
            buttons: []
        });
        return '';
    }
    wx.ready(function(){
        $.modal({
            title:'语音录制',
            text: $('#voicePanel').html(),
            buttons: []
        });
    });
}

voice.play = function(){
    if(!post.localId){
        $.toast("你说话了么？我怎么没听到！");
        return '';
    }
    wx.ready(function(){
        wx.playVoice({
            localId: post.localId,
            success: function(e) {
                //  alert(post.localId);
                playing = true;
            },
            error:function(){
                $.toast("开启录音失败");
                return '';
            }
        });
        wx.onVoicePlayEnd({
            complete: function(e) {
                post.localId = res.localId;
                playing = false;
                $.toast("录音时间已达上限60秒");
                return '';
            }
        });
    });
}

voice.restart= function(){
    post.timelong = 0;
    recording = false;
    voice.start();
}

voice.stop = function(callback){
    wx.ready(function(){
        wx.stopRecord({
            success: function (res) {
                post.localId = res.localId;
                alert(res.localId);
                recording = false;
                if(callback){
                    callback();
                }
                setTimeout(function(){
                    $('.weui_dialog .weui_dialog_title').html('停止录音成功');
                },1000);
            }
        });
    });
}

voice.close = function(){
    $('.weui_dialog').hide();
    $('.weui_mask').removeClass('weui_mask_visible');
}

/*$(function(){
 voice.timer();
 })*/

voice.timer = function(){
    return setTimeout(function(){
        post.timelong = post.timelong + 1;
        $('.weui_dialog .weui_dialog_title').html('录音中：'+post.timelong+'s');
        if(recording){
            timer = voice.timer();
        }
    },1000);
}

voice.start = function(e){
    console.log(e);
    if(recording){
        voice.stop();
        $('.fa-pause').addClass('fa-play').removeClass('fa-pause');
    }
    wx.ready(function(){
        wx.startRecord({
            cancel: function() {
                $.toast("你拒绝了录音");
                return ;
            },
            success: function() {
                recording = true;
                $('.fa-play').addClass('fa-pause').removeClass('fa-play');
                timer = voice.timer();
            }
        });
        wx.onVoiceRecordEnd({
            complete: function(e) {
                post.localId = e.localId;
                recording = false;
                $(e).find('.fa').removeClass('fa-pause');
                $(e).find('.fa').addClass('fa-play');
                $('.weui_dialog .weui_dialog_title').html('录制已达最大时间限制');
            }
        });
    })
}

qn.php

<?php

/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/7/2
 * Time: 3:06
 */
require_once MODULE_ROOT.'/vendor/autoload.php';

use Qiniu\Config;
use Qiniu\Auth;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;
use Qiniu\Processing\PersistentFop;

class qiniu {
    public $auth;
    public $bucketMgr;
    public $bucket;
    public $token;
    public $uploadMgr;
    public $policy;
    public $pfop;
    public $bucket_result;
    public $mps;
    public $access_key;
    public $secret_key;

    public function __construct()
    {
        $this->init();
    }

    public function init(){
        global $_W;
        $setting = M('setting')->getSetting('qiniu');
        $access_key = $setting['access_key'];
        $secret_key = $setting['secret_key'];
        $this->mps = $setting['mps'];

        $this->access_key = $access_key;
        $this->secret_key = $secret_key;

        $bucket = $setting['bucket_name'];
        $bucket_result = $setting['bucket_name_result'];
        $this->url = $setting['url'];

        $this->bucket = $bucket;
        $this->bucket_result = $bucket_result;
        $this->auth = new Auth($access_key, $secret_key);

        $this->bucketMgr = new BucketManager($this->auth);
        $this->token = $this->auth->uploadToken($this->bucket);
        $this->policy = array(
            'callbackUrl' => $_W['siteroot'].'imeepos_print/qiniu.php',
            'callbackBody' => 'filename=$(fname)&filesize=$(fsize)'
        );
        $this->uptoken = $this->auth->uploadToken($this->bucket, null, 3600, $this->policy);
        $this->uploadMgr = new UploadManager();
    }

    public function check(){
        return !empty($this->bucket)?true:false;
    }

    public function getUrl($key){
        return $this->url."/".$key;
    }

    public function urlsafe_base64_encode($str){
        $find = array("+","/");
        $replace = array("-", "_");
        return str_replace($find, $replace, base64_encode($str));
    }
    public function check_file($ext = ''){
        $files = array('doc','docx','odt','rtf','wps','ppt','pptx','odp','dps','xls','xlsx','ods','csv','et');
        foreach ($files as $f){
            if($f == $ext){
                return true;
            }else{
                return false;
            }
        }
    }
    public function toMp3($key,$return){
        $data = 'bucket=' . $this->bucket . '&key=' . $key . '&fops=' . urlencode('avthumb/mp3') . '&notifyURL=' . urlencode($return) . '&pipeline='.$this->mps;

        $sign = hash_hmac('sha1', "/pfop/\n" . $data, $this->secret_key, true);
        $token = $this->access_key . ':' . str_replace(array('+', '/'), array('-', '_'), base64_encode($sign));
        $header = array('Content-Type:application/x-www-form-urlencoded', 'Authorization: QBox ' . $token);
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, 'http://api.qiniu.com/pfop/');
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        $result = json_decode(curl_exec($curl), true);
        curl_close($curl);

$this->delete($key);
        return $result;
    }

    public function putFile($key, $filePath){
        list($ret, $err) = $this->uploadMgr->putFile($this->token,$key, $filePath);
        if ($err !== null) {
            return $err;
        } else {
            return $ret;
        }
    }
    public function fetch($url,$key){


        list($ret, $err) = $this->bucketMgr->fetch($url, $this->bucket, $key);

        if ($err !== null) {
            return false;
        } else {
            return $key;
            return $ret;
        }
    }
    public function copy($key,$key2){
        $err = $this->bucketMgr->copy($this->bucket, $key, $this->bucket, $key2);
        if ($err !== null) {
            return false;
        } else {
            return true;
        }
    }
  public  function delete($key){
        $err = $this->bucketMgr->delete($this->bucket, $key);
        if ($err !== null) {
            return false;
        } else {
            return false;
        }
    }
    public function stat($key=""){
        list($ret, $err) = $this->bucketMgr->stat($this->bucket, $key);
        if ($err !== null) {
            return false;
        } else {
            return $ret;
        }
    }
    public function move($key2,$key3){
        $err = $this->bucketMgr->move($this->bucket, $key2, $this->bucket, $key3);
        if ($err !== null) {
            return false;
        } else {
            return true;
        }
    }
    public function listFiles($marker,$limit){
        $prefix = '';
        list($iterms, $marker, $err) = $this->bucketMgr->listFiles($this->bucket, $prefix, $marker, $limit);
        if ($err !== null) {
            return false;
        } else {
            return array('iterms'=>$iterms,'marker'=>$marker);
        }
    }


}

官方文档

企业微信JS-SDK的调用
moon_comb的博客
03-24 2184
企业微信JS-SDK的调用前篇前端框架功能点描述功能实现步骤具体实现在开发中遇到的error总结 前篇 公司最近要写一个企业微信上的应用项目，调用TAPD平台的数据，对公司人员、项目进行分析管理 前端框架 框架用的VUE,第三方UI库使用的是Vant.js(H5移动端) 功能点描述 这次主要写的是，点击沟通，准确定位到企业微信通讯录里的联系人与之进行会话 功能实现步骤 引入js文件 需要获取当前域名传给后端，后端返回config参数 通过config接口注入权限验证配置 注意config配置项里的jsAp
企业微信开发：使用 JS-SDK 配置 wx
2201_75604580的博客
03-14 1091
一次偶然，从朋友那里得到一份“java高分面试指南”，里面涵盖了25个分类的面试题以及详细的解析：JavaOOP、Java集合/泛型、Java中的IO与NIO、Java反射、Java序列化、Java注解、多线程&并发、JVM、Mysql、Redis、Memcached、MongoDB、Spring、Spring Boot、Spring Cloud、RabbitMQ、Dubbo 、MyBatis 、ZooKeeper 、数据结构、算法、Elasticsearch 、Kafka 、微服务、Linux。
企业微信jssdk使用
qq_54397092的博客
03-06 1257
按客户需求做一个企业微信的h5，需要用到企业微信的jssdk，以下是使用企业微信jssdk的步骤
企业微信wecom/jssdk的使用(入门)
最新发布
hj1043的博客
06-22 1347
本文记录了在企业微信H5项目中集成JS-SDK的经验总结，主要涉及图片上传和扫码功能实现。前端基于uni-app开发，后端使用FastAdmin(ThinkPHP5)。实现过程包括：1)安装SDK并进行应用身份鉴权注册；2)后端签名算法实现，获取access_token和jsapi_ticket；3)前端调用chooseImage等接口。遇到的典型问题包括"invalid url domain"本地调试报错和签名无效，需特别注意URL域名配置和签名算法准确性。最后展示了前端成功调用图片选
企业微信—JS-SDK使用(例：预览文件接口)
LuoYi_ly_的博客
01-10 4780
vue3项目中调用企业微信JS-SDK,以预览文件接口为例
Asp.Net 企业微信JS-SDK开发（随手笔记）
热门推荐
qq_41863998的博客
04-16 1万+
企业微信JS-SDK开发（地理位置）业务场景开发文档解决方案A.获取access_tokenB.获取企业的jsapi_ticketC.获取时间戳D.获取随机字符串E.生成签名F.加密签名G.生成JsSDK信息前端代码A.引入JS文件B.请求JsSDK信息C.通过config接口注入权限验证配置并调用地理位置接口扩展（模拟环境）B.使用花生可内网穿透C.将企业微信应用设置成可信域名结果清登录企业微信...
企业微信 =＞ 接入第三方vue应用 第三阶段：企业微信使用JSSDK
Write less，do more
06-17 8818
前提：我们开发的是三方应用，不是内部应用！！！！ 使用说明 所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域名归属。 验证域名归属的方法在企业微信的管理后台“我的应用”里，进入应用，设置应用可信域名。 步骤一：引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js <script src="//res.wx.qq.com/o
微信JS-SDK Demo.rar_DEMO_微信_微信JS-SDK Demo_微信js sdk_微信扫一扫
09-21
微信JS-SDK Demo 摘录微信调用扫一扫功能的实现
vue使用微信JS-SDK实现分享功能
01-19
最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用...
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
10-17
主要介绍了微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
企业微信的JSSDK,调用及使用方法
2301_76781173的博客
10-16 1825
企业微信授权及方法的使用
企业微信JS-SDK调试工具
11-17
企业微信在其客户端内置了一个浏览器,企业微信指定的url只能在企业微信内部打开,否则会显示打开错误的提示; 原理就是让企业微信内置浏览器的agent头跟其他浏览器不一样,而这个文件就是调试工具,相当于给开发者提供了一个调试入口,可以想谷歌等浏览器的F12一样
企业微信-jssdk封装-第三方开发-获取当前页面会话信息
04-09
自己对企业微信jssdk做的一个封装，集成了vConsole和weui，可以方便的获取当前页面的入口环境信息： isWechat //是否微信浏览器 isLoading //是否在loading状态 vConsole //vConsole对象 context //当前页面入口环境 shareTicket //userTicket userId //客户ID chatId //群聊ID networkType //网络类型 isConnected //网络是否连接 checkResult //微信js接口当前客户端的支持情况
企业微信自建应用----JS-SDK配置
hanhanbeibeiya的博客
10-25 1376
由于公司要在企业微信里面做一个自建应用----向外部群发送消息，需要用到企业微信的获取当前客户群的群ID。
企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis）
weixin_69890748的博客
04-18 3421
企微分享侧边栏，增加小程序的商品、活动落地页的分享快捷发送分享，点击 【发送】可快速发送对应的小程序商品链接给客户。4.1：首先要先看企业微信的官方文档，现在有新版与旧版之分，其实也差不多的，新版是ww.xxx。4.2：我当时遇到的问题，ww.sendChatMess分享报错信息如下：就是权限配置的问题了。旧版是wx.xxxx,如下图，
企业微信开发：使用 JS-SDK 实现图像接口功能（六）
2401_85767131的博客
06-29 567
小编这些年深知大多数初中级工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Java全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你需要这些资料，⬅专栏获取自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**
企业微信开发——企业内部自建应用开发（第二篇）---JS_SDK配置
qq_35878240的博客
01-06 7740
企业微信开发——企业内部自建应用开发（第二篇）---JS_SDK配置
C#实现微信JS-SDK分享功能示例教程
微信JS-SDK是微信官方推出的一套适用于网页的开发工具包，它可以让开发者在微信内置浏览器中使用微信提供的各种功能，比如分享、获取个人信息等。而本案例中的"微信JS-SDKc#demo"是一个用C#语言实现的示例，主要是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值