微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能

这篇具有很好参考价值的文章主要介绍了微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🎈 微信 JS-SDK

  • 微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包
  • 通过使用微信 JS-SDK,开发者可借助微信高效地使用 拍照选图语音位置等手机系统的能力
  • 同时可以直接使用 微信分享扫一扫卡券支付 等微信特有的能力,是管理微信一切生态的API

微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能

🎈 JS-SDK 使用步骤

  • 绑定域名: 需要在微信公众平台 公众号设置功能设置 里填写 JS接口安全域名
  • 引入 JS 文件: 要使用 JS-SDK 的接口,需要引入 http://res.wx.qq.com/open/js/jweixin-1.6.0.js
  • 注入配置: 所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用
  • 配置验证成功后的回调: config 信息验证后会执行 ready 方法
  • 配置验证失败后的回调: config信息验证失败会执行 error 函数,如签名过期导致验证失败
wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的 JS 接口列表
});

wx.ready(function(){
  // 成功后的回调,所有接口调用都必须在 config 接口获得结果之后
});

wx.error(function(res){
  // 失败后的回调
});

🎈 JS-SDK 签名生成

  • 由上面可知道,如果想要调用 JS-SDK 的接口,必须是在 wx.config 验证成功之后才可以
  • wx.config 里面最重要的就是 JS-SDK 签名中的一些参数
  • 点击可下载 官方SDK示例,SDK 其中包含 phpjavanodejs以及 python 的示例代码,其中就有封装好的 JS-SDK 签名生成类
  • 我们这里以 php 签名生成类来讲解,前端使用 JS-SDK 接口,必须就调用其中的 getSignPackage 方法,生成签名包,然后将包里面的参数,传到 wx.config 中即可
  • getSignPackage 中,可以看到需要生成 jsapiTicket 标识,而这个标识需要通过 access_token 获取
  • 然后将获取到的 jsapiTicket 标识与 请求url时间戳随机字符串等进行加密形成签名后一起返回给前端即可,可以参考 JS-SDK使用权限签名算法
<?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&timestamp=$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($filename), 15));
    }

    private function set_php_file($filename, $content)
    {
        $fp = fopen($filename, "w");
        fwrite($fp, "<?php exit();?>" . $content);
        fclose($fp);
    }
}

🎈 JS-SDK 签名注意事项

  • 由微信官方可知,jsapiTicketaccess_token 调用一次可以在 2 小时内使用,也就是 7200 秒,所以我们在拿到这个值的时候,需要将其 缓存,官方文档中缓存了 7000 秒,为了防止不必要的问题产生,所以官方提前了 200
  • 关于为什么要缓存这两个值,主要是因为 同一个公众号 每天调用这个值的上限是 2000 次,如果不缓存,如果当天你的服务访问次数超过 2000 次,因为没有缓存,就会达到限制,服务无法正常使用了
  • 官方使用的缓存是放在 jsapi_ticket.phpaccess_token.php 两个文件中的,当然你可以放到redismongodb 中,但是不推荐存储在数据库中,容易造成大量的 I/O 开销
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</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 都要加到这个列表中
        ]
    });
    wx.ready(function () {
        // 在这里调用 API
    });
</script>
</html>

🎈 自定义微信分享

  • 想要调用 JS-SDK 中的接口,必须先在 wx.configjsApiList 中添加你需要使用的 API,不然无法使用
  • 经常项目中做的 H5,为了更好的分享,在微信中需要自定义分享的icon分享的标题分享的简介跳转链接
  • 因为一般分享信息在项目加载的时候就要初始化,所以需要放到 ready 中进行初始化
  • 当然,如果你的分享信息是变化的,则可以通过点击事件在调用分享接口也是可以的

微信 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: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
    ]
});

wx.ready(function () {
    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
    wx.onMenuShareTimeline({
	  title: '', // 分享标题
	  link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
	  imgUrl: '', // 分享图标
	  success: function () {
		  	// 用户点击了分享后执行的回调函数
	  }
	}),
	
	// 获取“分享给朋友”按钮点击状态及自定义分享内容接口
	wx.onMenuShareAppMessage({
	  title: '', // 分享标题
	  desc: '', // 分享描述
	  link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
	  imgUrl: '', // 分享图标
	  type: '', // 分享类型,music、video或link,不填默认为link
	  dataUrl: '', // 如果 type 是music或video,则要提供数据链接,默认为空
	  success: function () {
	    	// 用户点击了分享后执行的回调函数
	  }
	});
	
	wx.onMenuShareWeibo({
	  title: '', // 分享标题
	  desc: '', // 分享描述
	  link: '', // 分享链接
	  imgUrl: '', // 分享图标
	  success: function () {
	  	// 用户确认分享后执行的回调函数
	  },
	  cancel: function () {
	  	// 用户取消分享后执行的回调函数
	  }
	});
});

🎈 拍照选图功能

  • 有时候需要通过 JS-SDK 调用手机摄像头进行拍照,然后处理图片
  • 需要注意的是上传图片接口,上传图片有效期 3 天,可用微信多媒体接口下载图片到自己的服务器
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: [
        'checkJsApi',
        'chooseImage',
        'previewImage',
        'downloadImage',
        'getLocalImgData',
    ]
});

// 拍照或从手机相册中选图接口
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
  var localIds = res.localIds; // 返回选定照片的本地 ID 列表,localId可以作为 img 标签的 src 属性显示图片
  }
});

// 预览图片接口
wx.previewImage({
  current: '', // 当前显示图片的 http 链接
  urls: [] // 需要预览的图片 http 链接列表
});

// 上传图片接口
wx.uploadImage({
  localId: '', // 需要上传的图片的本地ID,由 chooseImage 接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回图片的服务器端ID
  }
});

// 下载图片接口
wx.downloadImage({
  serverId: '', // 需要下载的图片的服务器端ID,由 uploadImage 接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var localId = res.localId; // 返回图片下载后的本地ID
  }
});

🎈 录制音频处理

  • 可以使用 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: [
        'checkJsApi',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'onVoicePlayEnd',
        'uploadVoice',
        'downloadVoice'
    ]
});

// 开始录音接口,可以放在点击事件中触发
wx.startRecord();

// 停止录音接口
wx.stopRecord({
  success: function (res) {
    var localId = res.localId;
  }
});

// 监听录音自动停止接口
wx.onVoiceRecordEnd({
	// 录音时间超过一分钟没有停止的时候会执行 complete 回调
  complete: function (res) {
	  var localId = res.localId;
	}
});

// 播放语音接口
wx.playVoice({
  localId: '' // 需要播放的音频的本地ID,由 stopRecord 接口获得
});

// 暂停播放接口
wx.pauseVoice({
  localId: '' // 需要暂停的音频的本地ID,由 stopRecord 接口获得
});

// 上传语音接口
wx.uploadVoice({
  localId: '', // 需要上传的音频的本地ID,由 stopRecord 接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回音频的服务器端ID
  }
});

🎈 获取地理位置

  • 可以通过 JS-SDK 获取当前用户所处位置的经纬度,这样就可以给用户推荐一些周边的消费啥的
  • 也可以通过位置信息,给用户推荐一些周边的个性化娱乐等服务是非常的方便的

微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能文章来源地址https://www.toymoban.com/news/detail-490243.html

// 使用微信内置地图查看位置接口
wx.openLocation({
  latitude: 0, // 纬度,浮点数,范围为90 ~ -90
  longitude: 0, // 经度,浮点数,范围为180 ~ -180。
  name: '', // 位置名
  address: '', // 地址详情说明
  scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

// 获取地理位置接口
wx.getLocation({
  type: 'wgs84', // 默认为wgs84的 gps 坐标,如果要返回直接给 openLocation 用的火星坐标,可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
    var speed = res.speed; // 速度,以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }
});

🎈 微信摇一摇

  • 如果你想通过微信摇一摇自己开发一些功能,可以使用 JS-SDK 中的摇一摇功能
// 开启查找周边 ibeacon 设备接口
wx.startSearchBeacons({
  ticket:"",  //摇周边的业务 ticket , 系统自动添加在摇出来的页面链接后面
  complete:function(argv){
    //开启查找完成后的回调函数
  }
});

// 关闭查找周边 ibeacon 设备接口
wx.stopSearchBeacons({
  complete:function(res){
    //关闭查找完成后的回调函数
  }
});

// 监听周边 ibeacon 设备接口
wx.onSearchBeacons({
  complete:function(argv){
    //回调函数,可以数组形式取得该商家注册的在周边的相关设备列表
  }
});

🎈 微信扫一扫

  • 如果你想调用微信扫一扫的功能,可以使用 scanQRCode 接口
  • success 回调方法中,获得扫描结果,然后可以通过扫描结果自己去进行二次开发,是非常的方便的
// 调起微信扫一扫接口
wx.scanQRCode({
  needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
  }
});

到了这里,关于微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【小程序】微信 JS-SDK的使用:

    一、配置JS安全域名 1 .申请一个安全域名 2 .去微信公众平台下载MP_verify_WCdi1jnSEaGX59y0.txt,并将该文件方法到安全域名下,并确保再安全域名下能访问到这个文件,即http://xxxxxxxx/MP_verify_WCdi1jnSEaGX59y0.txt可以访问 3 .绑定js安全域名 4 .将该安全域名下的IP名单都添加到 公众平台—安

    2024年02月15日
    浏览(38)
  • 微信开发相关:使用微信 JS-SDK 接口

    通过微信 JS-SDK 接口,可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。 微信开发文档 首先需要有一个公众号,该公众号是需要能认证的(企业认证

    2024年02月09日
    浏览(36)
  • h5接微信js-sdk的详细步骤

    流程图: 微信文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 登录微信公众平台公众号设置,进行js安全域名设置 配置完安全域名之后,会让微信知道我们有这样一个域名,但是此时还不能实现双方对话 1.申请一个安全域名 2.去微信公众平台下载MP_verify_WCdi1jnSEaG

    2024年02月04日
    浏览(45)
  • 【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】

    最近刚好遇到了这么个任务 需要我在企业微信中内嵌一个自建应用, 用于打通跟我们医院后台系统的数据对接。 这样就可以直接让客服们在企业微信上点击右边页面操作后台的数据了。 这可是给我踩了好多坑。毕竟从来没有做过企业微信的开发,有点懵。 也是踩了好多坑

    2024年02月11日
    浏览(43)
  • 企业微信h5开发(即JS-SDK),一不小心,就会掉进坑,进入死胡同

            最近在开发企业微信的业务,可以借此机会学习到企业微信的开发,这让我非常开心、激动。殊不知,企业微信的开发让我很头疼,遇到了非常多的坑。在这里我记录一下,希望大家不要像我一样掉进坑里面。         图1.1          图1.2         在企业微信

    2024年02月11日
    浏览(36)
  • H5项目中使用微信JS-SDK(以H5项目批量上传图片为例,兼容IOS及安卓)

    H5项目中使用微信图片上传相关sdk,主要用于解决 1.安卓手机无法一次选择多张图片进行上传问题;2.控制IOS系统手机一次可无限量选择图片上传的问题 一、准备工作:公众号配置 验证所需使用的sdk是否符合需求 可在使用场景中,打开微信官方提供的 微信SDKDemo 链接,或企业

    2024年02月07日
    浏览(48)
  • 微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式

    在项目进行JSSDK使用的过程中,出现了很多问题,其中报错invalid url domain 以及 invalid signature最多,也最头疼,部分坑在文档里也并没有写清楚,这里就简单说下这两个报错的原因和解决方式 当报错invalid url domain时 其实离成功不远了,错误原因也很直白,就是url并没有在公众

    2024年02月08日
    浏览(40)
  • 无条件抽奖和条件抽奖(互动功能发起端JS-SDK)

    允许开始前对抽奖进行奖品、中奖人数、中奖人员等设置,完成设置后可以开始抽奖。 本功能只支持讲师、嘉宾、助教、管理员这四种角色进行抽奖的发起和停止。 支持自定义设置中奖用户信息采集字段。 支持设置预设中奖用户。 支持设置定时开奖 可查看中奖名单     在

    2024年02月08日
    浏览(36)
  • 微信小程序拍照页面自定义demo

    api文档

    2024年02月07日
    浏览(39)
  • vue实现调用手机拍照、录像功能

    目录 前言 准备工作 在这个示例中,我们将使用Vue.js框架来实现我们的目标。如果你还不熟悉Vue.js,推荐先学习一下Vue.js的基础知识。 接下来,我们需要创建一个基于Vue.js的项目。你可以使用Vue CLI来创建一个全新的Vue项目:# 安装Vue CLI # 创建一个全新的Vue项目 实现拍照功能

    2024年02月05日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包