h5页面嵌入微信进行语音识别和分享功能注意问题

我们要做与微信相关的功能一定是进入api文档来参照文档操作[https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115]
1、首先需要先登录微信公众平台进入
第一步: “公众号设置”的“功能设置”里填写“JS接口安全域名”加入域名。
第二步:将“JS接口安全域名”中txt文件下载下来加入到环境的根目录。
在这里插入图片描述
第二步:在“基本设置”里面设置白名单,将当前环境域名的“IP地址或域名”设为白名单
备注:登录后可在“开发者中心”查看对应的接口权限->网页授权->业务域名和JS接口安全域名。
2、在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3、首先需要将配置项填写完整

wx.config({
	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
	appId: '', // 必填,公众号的唯一标识
    timestamp: '', // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

此时需要注意通过接口调用时最好使用post请求,向后台传参发送url地址时需要encodeURIComponent编码,URL地址最好用location.href.split(‘#’)[0];以防分享时微信自动向路径后加参数。
1,语音录入功能

//开始录音
wx.startRecord({
    success: function() {},
    cancel: function(){
        $('.record-shade,.icon-wrapper').addClass('hide');
        alert("用户拒绝授权录音");
    }
});
//停止录音
wx.stopRecord();
//播放语音
wx.playVoice({
   localId: localId, // 需要播放的音频的本地ID,由stopRecord接口获得
    success: function() {},
    fail: function(res) {
        alert(resizeTo);
    }
});
//监听录音自动停止
wx.onVoiceRecordEnd({
	// 录音时间超过一分钟没有停止的时候会执行 complete 回调
	complete: function (res) {
		var localId = res.localId;
	}
});
// 暂停播放语音
wx.pauseVoice({
	localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
});
// 停止播放语音
wx.stopVoice({
	localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
});
// 监听语音播放完毕
wx.onVoicePlayEnd({
	success: function (res) {
		var localId = res.localId; // 返回音频的本地ID
	}
});
//语音转文字
wx.translateVoice({
    localId: localId, // 需要识别的音频的本地Id,由录音相关接口获得
    isShowProgressTips: 1, // 默认为1,显示进度提示
    success: function(res){
        alert(res.translateResult);// 语音识别的结果
    }
});

2,分享功能
分享图标使用路径:location.origin +'/fenxiang/images/imgUrl.jpg’完整路径

/**
 * 微信分享朋友、朋友圈操作
*/
var title = 'XXXXX';//标题
var desc = 'xxxxxxx';//分享描述
var imgUrl = location.origin +'/imgUrl.jpg';//分享图标
getWXdata();
function getWXdata(){
		$.ajax({
			url:'接口?url='+encodeURIComponent(location.href.split('#')[0]),
			type:'post',
			success:function(data){
				wx.config({
					debug:false,
					appId:data.appId,
					timestamp:data.timestamp,
					nonceStr:data.nonceStr,
					signature:data.signature,
					jsApiList:[
						'onMenuShareTimeline','onMenuShareAppMessage'
					]
				})
				ready();
			}
		})
	}
function ready(){
	wx.ready(function(){
		//分享到朋友圈
		wx.onMenuShareTimeline({
			title: title, // 分享标题
			link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: imgUrl, // 分享图标
			success: function () {
				// 用户确认分享后执行的回调函数
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
		//分享朋友
		wx.onMenuShareAppMessage({
			title: title, // 分享标题
		    desc: desc, // 分享描述
			link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: imgUrl, // 分享图标
			type: '', // 分享类型,music、video或link,不填默认为link
			dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
		    success: function () {
				// 用户确认分享后执行的回调函数
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
	})
}
其实作为H5想要做语音识别,自认为还说有各种弊端得,同时还是微信公众号里面,如果小程序得话,或许会简单一点,但是这里是在公众号里面开发,在这个过程中查阅个各种资料,其实里面得东西都大同小异,但是大多数并不全, 首先微信公众号里面得H5开发语音录入,试过各种方法,由于是java渣渣,页面技术只是了解简单得,因此在使用标签得时候,本身并不能适用于当前得需求,因此最后只能选择了微信自带得录音功能,使用微信提供的接口,(具体得接口使用还是去看微信接口得使用) 由于使用微信得接口得话,首先要上传到它得服务器上面去(虽然也有本地得文件储存id,但是好像并没有用),这里就涉及到了一个serverid,这个值是存在于微信临时素材库得id,后期要用它来获取录音得文件。 通过微信提供得获取临时素材文件得接口,得到了文件(具体方法网上一搜一大堆,后期我也会将完整得代码放进资源里面),但是这里有一个坑得问题,他的格式为.amr得格式,但是最后的目的是转换为文字,因此这里涉及到了格式转换 主要用了现成得技术,也是通过下载资源获取得jar以及实现得方法,将.amr转换为了MP3格式 然后就就是最后一部了,将mp3得音频文件转换为文字,我这里用的是讯飞得技术,当然百度得也可以, 其实整个需求得这个流程已经完成了,但是不得不说里面遇到得坑,由于是渣渣,除了人们总说的,转换为mp3得时候会报N/A得错误,我还遇到了unkowFormat这个错误。 这里只是记录一下自己在查询资料时没有一个符合自己需求得资料,同时也希望以后有这样需求得人,可以将思路捋的更加清楚,也可以进行交流.
在Vue H5页面中实现微信分享,可以按照以下步骤进行: 第一步,获取微信分享所需的相关配置: 在Vue项目中引入微信开放平台的JS-SDK,然后通过微信开放平台接口获取到当前页面分享配置信息,包括标题、描述、链接和图片等信息。 第二步,调用微信JS-SDK进行分享: 在Vue的组件中,通过引入微信JS-SDK提供的方法,如`wx.onMenuShareTimeline`和`wx.onMenuShareAppMessage`等,来实现对应的分享功能。可以将这些方法封装成一个单独的util文件,方便在项目中多次调用。 第三步,配置分享参数: 调用微信JS-SDK的分享方法前,需要将获取到的分享配置信息传入相应的参数中,如标题、链接、描述和分享图等。可以根据当前页面的不同内容来动态设置分享的参数。 第四步,设置微信签名: 在Vue页面中,可以使用`vue-router`插件进行路由控制,当进入到需要分享页面时,通过异步请求来获取当前页面分享配置信息和签名,然后将签名设置给微信JS-SDK。 第五步,调用分享方法: 在上面的配置完成后,即可通过微信JS-SDK提供的分享方法,如`wx.onMenuShareTimeline`和`wx.onMenuShareAppMessage`等,来实现对应的分享功能。可以按需选择分享到朋友圈、发送给好友或分享到QQ等渠道。 需要注意的是,Vue H5页面在与微信分享时,由于所处的环境和限制会有所不同,可能需要在不同的事件中触发分享,比如在路由切换完成后触发分享方法。 以上是实现Vue H5页面分享微信的一般步骤,具体实现还需要根据项目的需求和微信开放平台的接口文档进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个大土豆的日常

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值