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 () {
				// 用戶取消分享後執行的回調函數
			}
		});
	})
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章