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

本文涉及的产品
.cn 域名,1个 12个月
简介: 学习微信网页开发工具包,高效利用微信生态能力

🎈 微信 JS-SDK

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

snipaste20220728_174808.jpg


🎈 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使用权限签名算法
<?phpclassJSSDK{
private$appId;
private$appSecret;
publicfunction__construct($appId, $appSecret)
    {
$this->appId=$appId;
$this->appSecret=$appSecret;
    }
publicfunctiongetSignPackage()
    {
$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;
    }
privatefunctioncreateNonceStr($length=16)
    {
$chars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str="";
for ($i=0; $i<$length; $i++) {
$str .=substr($chars, mt_rand(0, strlen($chars) -1), 1);
        }
return$str;
    }
privatefunctiongetJsApiTicket()
    {
// 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;
    }
privatefunctiongetAccessToken()
    {
// 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;
    }
privatefunctionhttpGet($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;
    }
privatefunctionget_php_file($filename)
    {
returntrim(substr(file_get_contents($filename), 15));
    }
privatefunctionset_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 开销
<?phprequire_once"jssdk.php";
$jssdk=newJSSDK("yourAppID", "yourAppSecret");
$signPackage=$jssdk->GetSignPackage();
?><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body></body><scriptsrc="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: '<?phpecho$signPackage["appId"];?>',
timestamp: <?phpecho$signPackage["timestamp"];?>,
nonceStr: '<?phpecho$signPackage["nonceStr"];?>',
signature: '<?phpecho$signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中        ]
    });
wx.ready(function () {
// 在这里调用 API    });
</script></html>


🎈 自定义微信分享

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

snipaste20220728_174844.jpg

wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?phpecho$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,不填默认为linkdataUrl: '', // 如果 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: <?phpecho$signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'downloadImage',
'getLocalImgData',
    ]
});
// 拍照或从手机相册中选图接口wx.chooseImage({
count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {
varlocalIds=res.localIds; // 返回选定照片的本地 ID 列表,localId可以作为 img 标签的 src 属性显示图片  }
});
// 预览图片接口wx.previewImage({
current: '', // 当前显示图片的 http 链接urls: [] // 需要预览的图片 http 链接列表});
// 上传图片接口wx.uploadImage({
localId: '', // 需要上传的图片的本地ID,由 chooseImage 接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {
varserverId=res.serverId; // 返回图片的服务器端ID  }
});
// 下载图片接口wx.downloadImage({
serverId: '', // 需要下载的图片的服务器端ID,由 uploadImage 接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {
varlocalId=res.localId; // 返回图片下载后的本地ID  }
});


🎈 录制音频处理

  • 可以使用 JS-SDK 实现录音上传录音播放语音等功能,可以在你的项目中大大增加用户的参与感
  • 比如可以通过录一段用户的语音,然后通过语音识别机器人自动回复,再通过 播放语音功能 将回复的内容播放出来,就简单形成了一个你问我答的小游戏
wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?phpecho$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) {
varlocalId=res.localId;
  }
});
// 监听录音自动停止接口wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {
varlocalId=res.localId;
  }
});
// 播放语音接口wx.playVoice({
localId: ''// 需要播放的音频的本地ID,由 stopRecord 接口获得});
// 暂停播放接口wx.pauseVoice({
localId: ''// 需要暂停的音频的本地ID,由 stopRecord 接口获得});
// 上传语音接口wx.uploadVoice({
localId: '', // 需要上传的音频的本地ID,由 stopRecord 接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {
varserverId=res.serverId; // 返回音频的服务器端ID  }
});


🎈 获取地理位置

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

snipaste20220728_175210.jpg

// 使用微信内置地图查看位置接口wx.openLocation({
latitude: 0, // 纬度,浮点数,范围为90 ~ -90longitude: 0, // 经度,浮点数,范围为180 ~ -180。name: '', // 位置名address: '', // 地址详情说明scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: ''// 在查看位置界面底部显示的超链接,可点击跳转});
// 获取地理位置接口wx.getLocation({
type: 'wgs84', // 默认为wgs84的 gps 坐标,如果要返回直接给 openLocation 用的火星坐标,可传入'gcj02'success: function (res) {
varlatitude=res.latitude; // 纬度,浮点数,范围为90 ~ -90varlongitude=res.longitude; // 经度,浮点数,范围为180 ~ -180。varspeed=res.speed; // 速度,以米/每秒计varaccuracy=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) {
varresult=res.resultStr; // 当needResult 为 1 时,扫码返回的结果  }
});
相关文章
|
8天前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
18 1
|
1月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
70 1
|
2月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
95 2
|
2月前
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
113 0
微信H5支付--微信JS-SDK支付--点金计划
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1100 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
131 1
|
3月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
107 12
|
3月前
|
Java 数据库连接 测试技术
自定义校验注解,优雅的实现手机号,身份证号的格式校验!
本文介绍了如何创建自定义校验注解来实现手机号和身份证号的格式校验,包括定义注解、实现校验逻辑、将注解应用于模型类,以及常用的校验器库和框架,旨在提高代码的可维护性和减少重复的校验逻辑。
|
4月前
|
小程序 安全 Java
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)