AI实践课堂学习笔记分享园地 | 讯飞AI大学

Day4  小程序实战-语音评测
1、语音评测
概述：通过智能语音技术自动对发音水平进行评价、发音错误、缺陷定位和问题分析的软件系统。

#Day 5+学习笔记+09/18

#Day 6+学习笔记+09/19
获取界面上的节点信息WXML节点信息节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

示例代码：

const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect(function(res){  res.top [color=rgba(0, 0, 0, 0.3)]// #the-id 节点的上边界坐标（相对于显示区域）})query.selectViewport().scrollOffset(function(res){  res.scrollTop [color=rgba(0, 0, 0, 0.3)]// 显示区域的竖直滚动位置})query.exec()

上述示例中， #the-id 是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见 SelectorQuery.select 的相关说明。

在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样可以确保在正确的范围内选择节点。

WXML节点布局相交状态

#Day 7+学习笔记+09/20
纯数据字段

纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。从小程序基础库版本 2.8.2 开始支持。

组件数据中的纯数据字段

有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。

此时，可以指定这样的数据字段为“纯数据字段”，它们将仅仅被记录在 this.data 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。

指定“纯数据字段”的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

#Day 1+学习笔记+09/14
一、小程序技术发展史：
2015年前：微信的WebView 逐渐成为移动Web的一个重要入口时就有页面开发相关的JS API 了,开发者依葫芦画瓢地使用,这逐渐成为微信中网页的事实标准。
2015年初：微信发布了一整套网页开发工具包,称之为JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。
2017/1/9：微信小程序发布：快速的加载；更强大的能力；原生的体验；易用且安全的微信数据开放；高效和简单的开发。
二、小程序与普通网页开发的区别：
渲染机制：
普通网页-网页开发渲染线程和脚本线程是互斥的；
小程序-逻辑层和渲染层是分开的；
运行环境：
普通网页-PC端：IE、Chrome 、QQ浏览器等,移动端：Safari 、Chrome 以及iOS、Android 系统中的各式WebView。
小程序-两大操作系统iOS和Android 的微信客户端，以及用于辅助开发的小程序开发者工具。
三、生成一个小程序：
1、注册小程序：https://mp.weixin.qq.com/wxopen/waregister?action=step1
2、获取小程序的 AppID：登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID：https://mp.weixin.qq.com/
3、下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

#Day 2+学习笔记+09/15
一、小程序代码购成：
1、JSON配置：小程序配置-app.json；工具配置-project.config.json；页面配置-page.Json。
2、WXML：相当于HTML,同样由标签、属性等构成。
主要区别：1、标签不一样；2、多了一些 wx:if 这样的属性及{{}}表达式。
3、WXSS：相当于CSS,
主要区别：1、支持rpx,不用考虑像素换算问题；2、提供全局样式和局部样式；3、仅支持部分css选择器。
4、JS：与vue.js写法相似，同时微信提供了大量的API供开发者调用。
二、小程序的生命周期：
应用的生命周期：
1、用户首次打开小程序，触发 onLaunch 方法（全局只触发一次）；
2、小程序初始化完成后，触发 onShow 方法，监听小程序显示；
3、小程序从前台进入后台，触发 onHide 方法；
4、小程序从后台进入前台，触发 onShow 方法；
5、小程序后台运行一定时间，或系统资源占用过高，会被摧毁。
页面生命周期：
1、小程序注册完成后，加载页面，触发 onLoad 方法；
2、页面载入后触发 onshow 方法,显示页面；
3、首次显示页面，会触发 onReady 方法，渲染页面元素和样式，一个页面只会调用一次；
4、当小程序后台运行或跳转到其他页面时，触发 onHide 方法；
5、当小程序从后台进入前台运行或重新进入页面时，触发 onShow 方法；
6、当使用重定向方法 wx.redirectTo() 或关闭当前页返回上一页 wx.navigateBack()，会触发 onUnload 方法。
*应用生命周期会影响页面生命周期。

#Day 3+学习笔记+09/16
小程序实战-游戏场景识别
使用录音管理器 RecorderManager 进行录音：
const recorderManager = wx.getRecorderManager()recorderManager.onStart(() => {  console.log('recorder start')})recorderManager.onPause(() => {  console.log('recorder pause')})recorderManager.onStop((res) => {  console.log('recorder stop', res)  const { tempFilePath } = res})recorderManager.onFrameRecorded((res) => {  const { frameBuffer } = res  console.log('frameBuffer.byteLength', frameBuffer.byteLength)})const options = {  duration: 10000,  sampleRate: 44100,  numberOfChannels: 1,  encodeBitRate: 192000,  format: 'aac',  frameSize: 50}recorderManager.start(options)




录音完成后，需要使用 uploadFile 将文件进行上传：
wx.chooseImage({  success (res) {    const tempFilePaths = res.tempFilePaths    wx.uploadFile({      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址      filePath: tempFilePaths[0],      name: 'file',      formData: {        'user': 'test'      },      success (res){        const data = res.data        //do something      }    })  }})

#Day 4+学习笔记+09/17
小程序实战-游戏场景识别
在主目录的 app.json 文件下的 pages 参数里添加 “pages/game/game” 参数，并将其设置为 pages 参数的第一个参数，这样，小程序的首页便成为了 game 项目。
在项目中新建文件夹 components，在 components 文件夹下新建文件夹 record ，在文件夹 record 下新建 Component 组件 record，录音识别功能主要在组件 record 里实现，game 项目进行调用就可以了。

#Day 5+学习笔记+09/18
小程序实战-语音测评
什么是语音评测：通过智能语音技术自动对发音水平进行评价、发音错误、缺陷定位和问题分析的软件系统。

核心技术：中文普通话发音水平自动评测技术、英文发音水平自动评测技术。
应用场景：应用于英语四六级考试、中高考口语考试、汉语普通话考试等场景；辅助教师课堂作业布置、协助日常教学、提升学生学习效率；应用于K12的语言学习软件、学习机等场景。
在上次的游戏场景识别项目上新建文件夹ice，语音测评项目内容都将放到ice下。

#Day 6+学习笔记+09/19
小程序实战-语音测评
小程序开发过程中，可以使用真机调试的方法来进行调试，有二维码真机调试和自动真机调试两种方法，调试起来还是很方便的，就是 一旦有错误，虽然知道错误提示，但是有时候解决错误还是比较复杂。