插件
1、购买原生插件,https://ext.dcloud.net.cn/plugin?id=16049, 购买普通授权版
2、购买成功,在项目的uni_moudles目录下,会多出一个pow-amap目录
3、创建 Android平台、iOS平台、Web服务三种类型的KEY
4、manifest.json 配置 APP常用其它配置,将minSdkVersion 设置为 21,需要使用高德原生插件,必须大于等于21,也就是不再支持android 5.0以下的版本
5、manifest.json 配置 APP模块配置->Geolocation->系统定位,并勾选ios和android,不能选高德地图,会和高德导航插件冲突
6、拷贝代码根目录AndroidManifest.xml 到项目根目录,将第5行 android:value="" 里的值改成高德Android平台对应的app_key,第三行 package="" 里的包名改成项目的包名
7、打自定义基座
文件操作
将uni_modules/ai-speak目录,复制到uni_modules目录中,如果不存在则创建目录
将nativeplugins/YL-SpeechRecognition目录,复制到nativeplugins目录中,如果不存在则创建目录
在项目根目录,创建config目录,并添加app.js文件
app.js 代码
export const VOICE_ASSISTANT_DEBUG = false;
export const VOICE_ASSISTANT_PLATFORM = 'develop'; //运行环境,develop:开发环境 production:生产环境
export const VOICE_ASSISTANT_APP_ID = 'APP_ID';
export const VOICE_ASSISTANT_APP_SECRET = 'APP_SECRET';
export const VOICE_ASSISTANT_GAODE_IOS = 'xxxxxx'; //高德IOS平台的app_key
export const VOICE_ASSISTANT_GAODE_WEBSERVER = 'xxxxx'; // 高德web服务 app_key
添加本地插件
打开manifest.json,选择“App原生插件配置”,点击“选择本地插件”,勾选YL-SpeechRecognition
项目初始化
npm init -y
npm i crypto-js --save
npm i pinyin-match --save
在需要调用小宝的页面中的view标签内插入代码
<template>
<view>
<ai-speak ref="aiSpeak"></ai-speak>
...........
</view>
</template>
javascript部分添加代码
<script>
import aiSpeak from '@/uni_modules/ai-speak/components/ai-speak/ai-speak.vue';
export default {
onReady() {
if (this.$refs.aiSpeak) {
//设置未激活小宝时,悬浮头像大小和位置,如不需调整,则不调用此代码
this.$refs.aiSpeak.setHeaderStyle({
'width': '40px',
'height': '40px',
'bottom': '100px',
'right': '20px',
'top': '',
'left': '',
});
//设置唤醒小宝弹出框距离顶部占位距离,如不需调整,则不调用此代码
this.$refs.aiSpeak.setCardStyle({
"height": uni.getSystemInfoSync().statusBarHeight + 'px';
});
//设置悬浮话筒位置
this.$refs.aiSpeak.setVoiceStyle({
'width': '86rpx',
'height': '86rpx',
'x': uni.getSystemInfoSync().windowWidth - 60, //x坐标
'y': uni.getSystemInfoSync().statusBarHeight + 20 //y坐标
});
/**
* 搜索商品回调设置
* @param {string} keywords 关键词,多个关键词将以半角逗号隔开
*/
this.$refs.aiSpeak.setSearch(function(keywords) {
//参数keywords为搜索的关键词,多个关键词以半角逗号隔开。例如:白酒,啤酒
console.log('开始搜索关键词为' + keywords + '的商品');
});
}
},
onShow() {
this.$nextTick(function() {
if (this.$refs.aiSpeak) {
this.$refs.aiSpeak.show();
}
});
},
onHide() {
if (this.$refs.aiSpeak) {
this.$refs.aiSpeak.destory();
}
}
}
</script>