微信JS-SDK运用得好的案例有哪些

JavaScript014

微信JS-SDK运用得好的案例有哪些,第1张

首先我们用到的两个微信JS-SDK的独特接口:

1、音频接口:

即通过js调用微信录音相关功能,包括录制、上传、播放,控制等。

2、智能接口:

所谓“智能”接口,目前只有一个“识别音频并返回识别结果接口”,即”声音转文字“。

我们的产品"语速达人”基本功能逻辑是这样的:

用户读出题词板文字,手机录音,实时识别用户的语速,在完成几秒钟测试后,计算出用户平均语速水平,与小伙伴们愉快的PK“打嘴仗“。

为了推广,希望基于Web做一个简单版的HTML5测试互动,用于微信传播。

很遗憾,这个功能在微信JS-SDK推出之前,是无法实现的:一方面JS调用设备录音功能受限,一方面通过JS进行实时语速识别的算法,性能会有问题,于是我们决定放弃了。

但是微信JS-SDk推出后,突然发现,这个测语速功能的实现一下变得非常简单。于是经过了简单的功能设计后,前端攻城师立即开干,与APP上线同步做出了一个”语速达人“网页版。

(1)Landing界面:

包括主视觉banner、挑战题目标题(摇一摇换一个题),以及一个”开始测试“按钮,

(2)开始测试:

点击开始测试后,会显示题词板。并在3秒倒计时后开始录音。

请注意!用户首次使用时,微信会在这里弹出提示“网页请求录音功能,是否允许”的提示,只有用户选择允许,录音接口才能正常调用。

(3)测试结果:

关键步骤来了!用户录音完成后,调用语音上传和智能识别接口,即可获得将语音转换后的文字。接口非常简单!

1、目前还没有用户在录音授权后的回调接口,JS无法掌握用户授权的情况,如果用户在第一次使用时,请求录音权限时点了”不允许“,功能就废了。

2、如果文字长的话,声音转文字还是比较慢的。

3、微信很大方,我们用到的几个接口都没有使用频次的限制。

4、JS-SDK的文档简单但是很有效,Token获取的逻辑刚开始读的时候有点晕晕的,读完了准备开始写后台程序时发现微信的工程师已经都准备好了,拿来改个Key直接就能用了。这里赞一下微信团队。

5、原本计划在每个语速挑战下面,显示一个已经挑战了的用户的列表,并放上他们挑战时的录音。这个功能在JS-SDK支持下也能实现,但是为了更好地呈现,需要微信服务号的权限,才能获取用户的头像和昵称。时间原因,没有做出这个功能。

6、吐槽一下:微信服务号300RMB/年,微信开放平台接入300RMB/年,帐号不互通,分开申请分开审核分开收钱~真心觉得鹅长有必要计较这点收入么。。。

PS:补充一个,

最近刚发现,有团队用语音接口做了”朋友圈发语音”的功能。

听起来很不错的功能,通过JS-SDK实现起来真是太容易了,我觉得也是精巧的使用典范吧。

1、在微信公众号添加安全域名(制作的H5页面的主域名);

测试阶段,本人是通过修改hosts文件,将对应域名解析为127.0.0.1 ; 然后将电脑和手机连接至同个局域网下。修改手机代理为电脑在局域网内的IP地址;这样手机就能正常进行测试;

2、引入jssdk   script    src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'

3、配置jssdk,成功后方可使用相关功能,方式如下

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: 'XX', // 必填,公众号的唯一标识

timestamp: XX, // 必填,生成签名的时间戳

nonceStr: xx, // 必填,生成签名的随机串

signature: xx, // 必填,签名,见附录1  

jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

})

第一次接触时看到网上的文章在此对signature没有过多的说明,这里我自己大概说一下,此参数是通过获取公众号的id及secret获取 access _token,然后通过 access _token获取jsapi_ticket,然后通过时间戳,随机串,当前页面url,通过sha1加密生成;(这里做下说明,此步骤由后台处理后返回给前端即可);

刚接触的时候领导认为纯前端可实现,这。。。确实可以实现,这里就不做过多说明了;至于要后端处理的原因大致为两点1、公众号id和secret在前端实现不安全  2、 access _token和jsapi_ticket每日有请求次数的限制,过期时间两小时,所以需要后台在服务器缓存,每两小时获取一次;

4、wx.config配置正确即可通过wx.ready来调用相应功能

wx.ready(function() {

wx.onMenuShareTimeline({   //分享朋友圈

title: 'X', // 分享标题

link: window.location.href, // 分享链接

imgUrl: url, // 分享图标

success: function() {

// 用户确认分享后执行的回调函数

console.log('分享成功了哟哟哟')

},

cancel: function() {

// 用户取消分享后执行的回调函数

}

})

wx.onMenuShareAppMessage({  // 好友分享

title: '', // 分享标题

desc: '', // 分享描述

link: window.location.href, // 分享链接

imgUrl: '', // 分享图标

success: function () {

// 用户确认分享后执行的回调函数

},

cancel: function () {

// 用户取消分享后执行的回调函数

}

})

})

总结:其实对于前端要处理的很少,只要从后台获取signature签名,调用方法即可实现;具体可看官方文档;首次接触的小伙伴不要被吓到,就是如此简单;