> 全局组件&常用 API


## 全局组件

全局组件主要是内置组件和扩展组件。
内置组件
所有的视图组件，包括 view、swiper 等，本身不显示任何可视化元素，用途都是为了包裹其他真正显示的组件，可以直接在 vue 页面中使用。
常见有：

#### uniapp 组件

> vue 组件 
> nvue 组件 
> 小程序组件

#### 扩展组件

> uni-ui 是 DCloud 提供的一个跨端 ui 库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 ui 框架，不包括基础组件，它是基础组件的补充，有些组件需要到插件市场下载才可以使用。

~ 列表组件 
~ 表单组件 
~ 表格组件 
~ 加载更多组件 
~ 自定义导航栏组件 
~ 弹出层组件

## 常用 API

#### 基础

- onPageNotFound，页面不存在事件
- onError，错误事件
- onAppShow，页面前台事件
- onAppHide，页面后台事件
- addInterceptor，拦截器

#### 网络

- request，发起请求
- uploadFile，上传文件
- downloadFile，下载文件
- connectSocket，创建一个 websocket 连接
- onSocketOpen，ws 打开事件
- onSocketError，错误事件
- sendSocketMessage，发送 ws 消息
- onSocketMessage，接收 ws 消息
- closeSocket，关闭 ws
- onSocketClose，监听关闭 ws

#### 页面路由

- navigateTo，保留当前页面，跳转到其他页面
- redirectTo，关闭当前页面，跳转到其他页面
- reLaunch，关闭所有页面，跳转到其他页面
- switchTab，跳转到 tabBar 底部导航页面
- navigateBack，返回上一个页面或多级页面

#### 数据缓存

- setStorage，将数据存储在本地缓存中的指定 key 中，覆盖原来该 key 的内容
- getStorage，从本地缓存中获取指定 key 的内容
- removeStorage，从本地缓存中移除指定 key 及内容
- clearStorage，清除本地缓存
- getStorageInfo，获取本地缓存信息

#### 界面

- showToast，显示消息提示框
- hideToast，隐藏消息提示框
- showLoading，显示加载提示框
- hideLoading，隐藏加载提示框
- showModal，显示模态弹出框
- showActionSheet，从底部弹出操作菜单
- onPullDownRefresh，下拉刷新
- createSelectorQuery，节点信息

#### 文件

- chooseImage，选择图片
- saveImageToPhotosAlbum，保存图片到相册
- chooseFile，选择文件
- saveFile，保存文件到本地
- removeSavedFile，删除本地保存的文件
- getSavedFileList，获取本地保存的文件列表
- getFileInfo，获取文件信息
- openDocument，新页面打开文档

uniapp实用-组件&Api

## 原因分析

通常vue在发版之后，由于局部文件的改动，对应组件的编译文件后缀会发生变更。 
**在不强制刷新客户端使用的浏览器的场景下，点击涉及到的组件模块内容，会发生文件路径不存在，发生点击无响应的情况**

> 类似以下报错 
> Failed to fetch dor.83aa61 dynamically imported module



## 解决方案

监测分析错误场景 

1. 可以使用window对象上的unhandledrejection事件来监听未处理的Promise拒绝，从而捕获这个类型错误。

2. 可以在事件处理函数中检查错误对象的message属性来确定这个特定异常。


```js
window.addEventListener("unhandledrejection", function(event) {
 if(event.reason instanceof TypeError && event.reason.message.startsWith("Failed to fetch")) {
 // 在这里处理TypeError: Failed to fetch dor.83aa61 错误
 console.error("捕获到 TypeError: Failed to fetch dor.83aa61 错误:", event.reason);
 }
});
```
因此，在捕获之后进行重新强制加载相关资源即可 

强制重新加载需要入参true 

```js
window.location.reload(true)
```

## 方案优化

通常一个稳定项目发版的情况大概率存在于一个周期一次。在设定强制加载的时候，可以判断一天内是否已经执行，来判别是否继续强制加载，以避免出现异常加载的问题

```js
window.addEventListener("unhandledrejection", function(event) {
 if(event.reason instanceof TypeError && event.reason.message.startsWith("Failed to fetch")) {
 // 在这里处理TypeError: Failed to fetch dor.83aa61 错误
 console.error("捕获到 TypeError: Failed to fetch dor.83aa61 错误:", event.reason);
 var today = new Date().toISOString().split('T')[0];
 if (localStorage.isDayOneAjaxError) {
 if (localStorage.isDayOneAjaxError === ('task_executed_' + today)) {
 console.log('今日已执行, 忽略')
 } else {
 localStorage.isDayOneAjaxError = ('task_executed_' + today)
 window.location.reload(true)
 }
 } else {
 // 强制从服务器重新加载页面
 localStorage.isDayOneAjaxError = ('task_executed_' + today)
 window.location.reload(true)
 }
 }
 });
```

解决vue发版后组件文件不存在的卡顿

# 会员卡

### 储值卡-余额

1. 激活绑定
2. 线下使用

### 积分

### 会员卡券


# 卡券




# 促销活动

### 满赠
### 买赠
### 积分购


关于聚合支付插件的探索

要实现在JavaScript中将音频数据存储在本地，你可以考虑使用File API和Blob对象。



1. 要将音频数据转换为字符串，你可以使用JavaScript中的FileReader和ArrayBuffer来实现。

```js
// 获取音频文件
var audioFile = ...; // 这里假设你已经有了音频文件

// 创建FileReader对象
var reader = new FileReader();

// 当读取完成时，触发onload事件
reader.onload = function() {
 // 获取读取的音频数据
 var arrayBuffer = reader.result;
 
 // 将ArrayBuffer转换为字符串
 var audioString = arrayBufferToString(arrayBuffer);
 
 // 输出字符串
 console.log(audioString);
};

// 读取音频文件
reader.readAsArrayBuffer(audioFile);

// 将ArrayBuffer转换为字符串的函数
function arrayBufferToString(arrayBuffer) {
 var binary = "";
 var bytes = new Uint8Array(arrayBuffer);
 var length = bytes.byteLength;
 
 for (var i = 0; i < length; i++) {
 binary += String.fromCharCode(bytes[i]);
 }
 
 return binary;
}
```

> 在上述代码中，首先获取音频文件，然后创建一个FileReader对象。当读取完成时，FileReader会触发onload事件，并将读取的音频数据存储在reader.result中的ArrayBuffer对象中。接着，通过调用arrayBufferToString函数将ArrayBuffer对象转换为字符串。最后，可以将字符串进行输出或进一步处理。

> 注意，上述代码中的audioFile是一个示例，请根据你的实际情况替换成你的音频文件对象。如果音频数据不是来自文件，而是来自其他来源（例如通过Web API捕获的实时音频数据），你可以相应地修改代码来获取音频数据。

关于web应用的音频本地存储

1. 语音识别和比对是通过将语音信号转化为文本，并与预先设置的文本进行对比来实现的。

2. 语音识别技术使用机器学习算法和声学模型来识别和转录语音信号。这些模型会将语音信号与已知的音频片段进行比较，以识别出最匹配的文本。

3. 而语音比对是对已转录的文本进行比较。通常会使用文本相似性算法，如Levenshtein距离或余弦相似度，来计算两个文本之间的相似度程度。根据相似度的阈值，可以判断两个文本是否相似或匹配。




### 1. 在JavaScript中，你可以使用Web语音API（Web Speech API）来进行语音识别

```js
// 检查浏览器是否支持Web语音API
if ('webkitSpeechRecognition' in window) {
 // 创建语音识别对象
 var recognition = new webkitSpeechRecognition();
 
 // 设置语言
 recognition.lang = 'en-US'; // 设置为英语，可以根据需要更改语言
 
 // 开始识别
 recognition.start();
 
 // 识别结果的回调函数
 recognition.onresult = function(event) {
 var transcript = event.results[0][0].transcript; // 获取识别到的文本
 console.log(transcript);
 };
 
} else {
 console.log('Web Speech API is not supported in this browser.');
}
```

> 它使用webkitSpeechRecognition对象来启动语音识别，并在识别结果的回调函数中获取识别到的文本。

> 至于语音比对，你可以使用JavaScript中的字符串比较函数来比较两个识别到的文本。例如，你可以使用toLowerCase()函数将文本转换为小写，并使用includes()函数来检查一个文本是否包含在另一个文本中。你还可以使用文本相似性算法，如Levenshtein距离算法或余弦相似度算法，来计算两个文本的相似度。请注意，语音识别和比对是复杂的任务，实现一个完整和准确的语音识别和比对系统可能需要更多的工作和技术。

### 2. Javascript如何打开麦克风

> 在JavaScript中，你可以使用WebRTC（Web实时通信）的getUserMedia方法来打开用户的麦克风。

```js
// 检查浏览器是否支持getUserMedia方法
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 // 请求获取用户的麦克风权限
 navigator.mediaDevices.getUserMedia({ audio: true })
 .then(function(stream) {
 console.log('麦克风已打开');
 // 在这里可以处理语音流(stream)
 })
 .catch(function(error) {
 console.log('无法打开麦克风：', error);
 });
} else {
 console.log('浏览器不支持getUserMedia方法');
}
```

> 上述代码会检查浏览器是否支持getUserMedia方法，然后请求用户的麦克风权限。如果用户同意，将会打开麦克风，并输出"麦克风已打开"到控制台。如果用户拒绝或发生错误，会输出相应的错误信息。

> 请注意，访问用户的麦克风需要使用安全的HTTPS协议，因此你可能需要在一个HTTPS环境中测试这段代码。

### 3. 语音流(stream)如何处理

> 可以使用Web Audio API或其他音频处理库来处理语音流。

```js
// 创建一个AudioContext对象
var audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 创建一个MediaStreamAudioSourceNode，连接到麦克风的语音流
var sourceNode = audioContext.createMediaStreamSource(stream);

// 创建一个ScriptProcessorNode，用于处理音频流
var scriptNode = audioContext.createScriptProcessor(4096, 1, 1);

// 指定处理音频流的回调函数
scriptNode.onaudioprocess = function(event) {
 // 获取输入的音频数据
 var inputBuffer = event.inputBuffer;
 
 // 处理音频数据
 // 在这里可以应用自定义的音频处理算法
 
 // 获取输出的音频数据
 var outputBuffer = event.outputBuffer;
 
 // 将输入的音频数据复制到输出的音频数据
 for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
 var inputData = inputBuffer.getChannelData(channel);
 var outputData = outputBuffer.getChannelData(channel);
 
 for (var sample = 0; sample < inputBuffer.length; sample++) {
 outputData[sample] = inputData[sample];
 }
 }
};

// 连接语音流到处理器节点
sourceNode.connect(scriptNode);
scriptNode.connect(audioContext.destination);

// 开始录制语音
// 在这里你可以执行其他操作，比如停止录制、保存录制等

// 停止录制语音
// 调用stream.getAudioTracks()[0].stop()来停止语音流的获取
```

> 注意，上述示例仅将输入数据复制到输出数据，实际上你可以在onaudioprocess回调函数中进行更复杂的音频处理操作。你可以使用Web Audio API提供的各种音频处理节点和方法，如BiquadFilterNode、ConvolverNode、AnalyserNode等，来实现各种音频效果和处理。

> 除了Web Audio API，也可以考虑使用其他音频处理库，如Matt Diamond的Recorder.js或Librosa（适用于Python）来处理音频流。这些库提供了更高级的音频功能和算法，适用于更复杂的音频处理任务。