> 条件编译&写法



## 条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

- #ifdef：if defined 仅在某平台存在;
- #ifndef：if not defined 除了某平台均存在;
- %PLATFORM%：平台名称;

| %PLATFORM%值： | 生效条件 |
| --- | --- |
| H5 | |
| MP-WEIXIN | 微信小程序 |
| MP-ALIPAY | 支付宝小程序 |
| MP-BAIDU | 百度小程序 |
| MP-TOUTIAO | 抖音小程序 |
| MP-KUAISHOU | 快手小程序 |
| MP-JD | 京东小程序 |
| MP | 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ 小程序/360 小程序 |

> 支持的文件

- .vue、.pug
- .css、.scss、.less、.stylus
- .js、.ts
- pages.json

## 写法

> pages.json管理页面路由、和manifest.json管理应用配置。 
> vue/nvue 模板里使用 ，css 使用 /* 注释 */，js 使用 // 注释。

- 模板写法

```vue

平台特有的组件

```

- css 样式写法

```css
/* #ifdef %PLATFORM% */
平台特有样式
/* #endif */
```

- JS 写法

```js
// #ifdef %PLATFORM%
平台特有的API实现;
// #endif
```

- pages.json

```json
// #ifdef %PLATFORM%
{
 "pagePath": "pages/eg",
 "text": "案例"
}
// #endif
```

uniapp实用-条件编译&写法

> 全局组件&常用 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.onerror = function(message, source, lineno, colno, error) {
 // 判断是否是JavaScript文件引入报错
 try {
 if (source.endsWith('.js')) {
 console.log('Error:', message, source, lineno, colno, error);
 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)
 }
 }
 } catch (error) {
 console.log('Error:', error.message);
 }
};
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捕获的实时音频数据），你可以相应地修改代码来获取音频数据。