提现功能需要添加
This commit is contained in:
29
uni_modules/TencentCloud-Push/changelog.md
Normal file
29
uni_modules/TencentCloud-Push/changelog.md
Normal file
@@ -0,0 +1,29 @@
|
||||
## 1.2.0(2025-03-31)
|
||||
- 适配出海手机支持 FCM 推送。
|
||||
## 1.1.0(2024-12-11)
|
||||
- 大幅减小插件包体积,优化产品体验。
|
||||
- 兼容 HBuilderX 4.36 的 Breaking changes。如果您需要 vivo/荣耀 的厂商推送,请参考 [文档](https://cloud.tencent.com/document/product/269/103522),正确配置 `manifestPlaceholders.json` 和 `mcn-services.json`。
|
||||
|
||||
## 1.0.0(2024-11-29)
|
||||
- 优化和 [TencentCloud-TUICallKit 插件](https://ext.dcloud.net.cn/plugin?id=9035) 融合时的产品体验。
|
||||
- 新增点击通知栏事件 NOTIFICATION_CLICKED,支持获取推送扩展信息。
|
||||
- 在线通道支持自定义铃音功能。
|
||||
|
||||
## 0.5.1(2024-11-07)
|
||||
- 优化和 [@tencentcloud/chat-uikit-uniapp](https://cloud.tencent.com/document/product/269/64507) 融合时的产品体验。
|
||||
- 优化和 [TencentCloud-TUICallKit 插件](https://ext.dcloud.net.cn/plugin?id=9035) 融合时的产品体验。
|
||||
- 新增接口 disablePostNotificationInForeground,此接口可实现应用在前台时,开/关通知栏通知(默认开)。
|
||||
- 新增接口 createNotificationChannel,支持 FCM/OPPO 自定义铃音。
|
||||
|
||||
## 0.4.0(2024-10-17)
|
||||
- 支持与 [TencentCloud-TUICallKit 插件](https://ext.dcloud.net.cn/plugin?id=9035) 融合打包。
|
||||
|
||||
## 0.3.0(2024-10-12)
|
||||
- 新增接口 addPushListener/removePushListener,支持获取在线推送消息,支持推送消息撤回通知。
|
||||
|
||||
## 0.2.0(2024-09-18)
|
||||
- 支持 FCM
|
||||
- 支持 hihonor
|
||||
|
||||
## 0.1.0(2024-09-10)
|
||||
- 使用 uts 开发,基于腾讯云推送服务(Push),支持 iOS 和 Android 推送,同时适配各大厂商推送。
|
||||
0
uni_modules/TencentCloud-Push/index.js
Normal file
0
uni_modules/TencentCloud-Push/index.js
Normal file
90
uni_modules/TencentCloud-Push/package.json
Normal file
90
uni_modules/TencentCloud-Push/package.json
Normal file
@@ -0,0 +1,90 @@
|
||||
{
|
||||
"name": "@tencentcloud/uni-app-push",
|
||||
"id": "TencentCloud-Push",
|
||||
"main": "index.js",
|
||||
"displayName": "【官方】uni-app 腾讯云推送服务(Push)",
|
||||
"version": "1.2.0",
|
||||
"description": "使用 uts 开发,基于腾讯云推送服务(Push),支持 iOS 和 Android 推送,同时适配各大厂商推送。",
|
||||
"license": "ISC",
|
||||
"keywords": [
|
||||
"腾讯云",
|
||||
"Push",
|
||||
"推送",
|
||||
"Android/iOS",
|
||||
"谷歌FCM"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.6.8"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "uts",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "腾讯云即时通信IM隐私保护指引: https://web.sdk.qcloud.com/document/Tencent-IM-Privacy-Protection-Guidelines.html\n移动推送隐私保护指引: https://privacy.qq.com/document/preview/8565a4a2d26e480187ed86b0cc81d727",
|
||||
"permissions": "本地存储空间"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-android": "y",
|
||||
"app-ios": "y",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
299
uni_modules/TencentCloud-Push/readme-npm.md
Normal file
299
uni_modules/TencentCloud-Push/readme-npm.md
Normal file
@@ -0,0 +1,299 @@
|
||||
# TencentCloud-Push
|
||||
|
||||
## 简介
|
||||
|
||||
使用 uts 开发,基于腾讯云推送服务(Push),支持 iOS 和 Android 推送,同时适配各大厂商推送。
|
||||
|
||||
腾讯云推送服务(Push)提供一站式 App 推送解决方案,助您轻松提升用户留存和互动活跃度,支持与腾讯云即时通信 IM SDK、实时音视频 TRTC SDK、音视频通话 SDK、直播 SDK等音视频终端产品协同集成,在不同场景联合使用,提升业务整体功能体验。
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/60d714484e54b284cfa440adcc885349.png" width="618" height="456">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/864c391ecf6f2724d26e368e4f09e466.png" width="618" height="444">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/6af60f4b20dd46323e8f901a161a80a9.png" width="618" height="454">
|
||||
|
||||
#### 数据可视化,辅助运营策略
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/6c422f64900053c38a6bf66fe1103b3f.png" width="618" height="334">
|
||||
|
||||
#### 支持推送消息全链路问题排查
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/156d43ed48971f9bf865ad0c4e2342e3.png" width="618" height="443">
|
||||
|
||||
#### 六地服务部署,严守数据安全
|
||||
|
||||
提供了中国、东南亚(新加坡、印尼雅加达)、东北亚(韩国首尔)、欧洲(德国法兰克福)以及北美(美国硅谷)数据存储中心供选择,每个数据中心均支持全球接入。如果您的应用在境外上线且用户主要在境外,您可以根据消息传输需求及合规要求,选择适合您业务的境外数据中心,保障您的数据安全。
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/2ffc1a103a42d9c01cfb819cd92bbd1d.png" widht="618" height="308">
|
||||
|
||||
## 快速跑通
|
||||
|
||||
### 步骤1:创建应用
|
||||
|
||||
进入 [控制台](https://console.cloud.tencent.com/im) ,单击创建应用,填写应用名称,选择数据中心,单击确定,完成应用创建。
|
||||
|
||||

|
||||
|
||||
### 步骤2:开通推送服务 Push
|
||||
|
||||
进入 [推送服务 Push](https://console.cloud.tencent.com/im/push-plugin-push-identifier),单击立即购买或免费试用 。(每个应用可免费试用一次,有效期7天)
|
||||
|
||||

|
||||
|
||||
### 步骤3:下载腾讯云推送服务(Push)并复制 Push SDK 到您的项目中
|
||||
|
||||
1. 下载腾讯云推送服务(Push)。
|
||||
```
|
||||
npm install @tencentcloud/uni-app-push
|
||||
```
|
||||
|
||||
2. 复制 Push SDK 到您的项目中。
|
||||
|
||||
【macOS 端】
|
||||
|
||||
``` bash
|
||||
mkdir -p ./uni_modules/TencentCloud-Push && rsync -av ./node_modules/@tencentcloud/uni-app-push/ ./uni_modules/TencentCloud-Push
|
||||
```
|
||||
【Window 端】
|
||||
|
||||
``` bash
|
||||
xcopy .\node_modules\@tencentcloud\uni-app-push .\uni_modules\TencentCloud-Push /i /e
|
||||
```
|
||||
|
||||
### 步骤4:在 App.vue 中引入并注册腾讯云推送服务(Push)
|
||||
|
||||
将 SDKAppID 和 appKey 替换为您在IM 控制台 - 推送服务 Push - 接入设置页面 获取的应用的信息。如图所示:
|
||||
|
||||

|
||||
|
||||
```ts
|
||||
// 集成 TencentCloud-Push
|
||||
import * as Push from '@/uni_modules/TencentCloud-Push';
|
||||
const SDKAppID = 0; // 您的 SDKAppID
|
||||
const appKey = ''; // 客户端密钥
|
||||
Push.registerPush(SDKAppID, appKey, (data) => {
|
||||
console.log('registerPush ok', data);
|
||||
Push.getRegistrationID((registrationID) => {
|
||||
console.log('getRegistrationID ok', registrationID);
|
||||
});
|
||||
}, (errCode, errMsg) => {
|
||||
console.error('registerPush failed', errCode, errMsg);
|
||||
}
|
||||
);
|
||||
|
||||
// 监听通知栏点击事件,获取推送扩展信息
|
||||
Push.addPushListener(Push.EVENT.NOTIFICATION_CLICKED, (res) => {
|
||||
// res 为推送扩展信息
|
||||
console.log('notification clicked', res);
|
||||
});
|
||||
|
||||
// 监听在线推送
|
||||
Push.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {
|
||||
// res 为消息内容
|
||||
console.log('message received', res);
|
||||
});
|
||||
|
||||
// 监听在线推送被撤回
|
||||
Push.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {
|
||||
// res 为被撤回的消息 ID
|
||||
console.log('message revoked', res);
|
||||
});
|
||||
```
|
||||
|
||||
### <span id="step5">步骤5:测试推送(测试前请务必打开手机通知权限,允许应用通知。)</span>
|
||||
|
||||
单击 HBuilderX 的 【运行 > 运行到手机或模拟器 > 制作自定义调试基座】,使用云端证书制作 Android 或 iOS 自定义调试基座。
|
||||
|
||||

|
||||
|
||||
自定义调试基座打好后,安装到手机运行。
|
||||
|
||||
[登录](https://console.cloud.tencent.com/im/push-plugin-push-check) 控制台,使用测试工具进行在线推送测试。
|
||||

|
||||
|
||||
## 厂商推送配置
|
||||
> - 请注意!HBuilderX 4.36 发布了不向下兼容的更新,如果您使用的是 HBuilderX 4.36 或者更高版本,且需要 vivo/荣耀 的厂商推送,
|
||||
请升级推送版本到 1.1.0 或更高版本,并参考文档正确配置 `manifestPlaceholders.json` 和 `mcs-services.json`。
|
||||
> - 请在 `nativeResources` 目录下进行推送配置。若项目根目录尚未创建该文件夹,请新建一个名为 `nativeResources` 的文件夹。
|
||||
> - 离线推送厂商配置完成后,需要打包自定义基座。参考:[[快速跑通]>[步骤5:测试推送(测试前请务必打开手机通知权限,允许应用通知。)]](#user-content-step5)
|
||||
|
||||
### 【Android】
|
||||
|
||||
1. 新建 nativeResources/android/assets 目录。
|
||||
|
||||
2. 在 [推送服务 Push > 接入设置 > 一键式快速配置](https://console.cloud.tencent.com/im/push-plugin-push-identifier) 下载 `timpush-configs.json` 文件,配置到 nativeResources/android/assets 目录下。
|
||||
|
||||
3. For 华为:
|
||||
|
||||
配置 `agconnect-services.json` (此文件获取详见 [厂商配置 > uniapp > 华为 > 步骤4:获取应用信息](https://cloud.tencent.com/document/product/269/103769))到 nativeResources/android 目录下。
|
||||
|
||||
4. For Google FCM:
|
||||
|
||||
4.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `project.plugins`,添加 `"com.google.gms.google-services"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"project": {
|
||||
"plugins": [
|
||||
...
|
||||
"com.google.gms.google-services"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4.2. 配置 `google-services.json` 文件到 nativeResources/android/ 目录。
|
||||
|
||||
5. For 荣耀:
|
||||
|
||||
5.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `dependencies`,添加 `"com.tencent.timpush:honor:8.3.6498"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"dependencies": [
|
||||
...
|
||||
"com.tencent.timpush:honor:8.3.6498"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
5.2. 配置 `mcs-services.json` 文件到 nativeResources/android 目录下。
|
||||
|
||||
5.3. 配置 `appID` 到 nativeResources/android/manifestPlaceholders.json 中的 `"HONOR_APPID"`,如下:
|
||||
```
|
||||
{
|
||||
"HONOR_APPID": ""
|
||||
}
|
||||
```
|
||||
|
||||
6. For vivo:
|
||||
|
||||
6.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `dependencies`,添加 `"com.tencent.timpush:vivo:8.3.6498"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"dependencies": [
|
||||
...
|
||||
"com.tencent.timpush:vivo:8.3.6498"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
6.2. 配置 `appID` 和 `appKey` 到 nativeResources/android/manifestPlaceholders.json 中的 `VIVO_APPKEY` 和 `VIVO_APPID`,如下:
|
||||
```
|
||||
{
|
||||
"VIVO_APPKEY": "",
|
||||
"VIVO_APPID": "",
|
||||
}
|
||||
```
|
||||
|
||||
### 【iOS】
|
||||
|
||||
1. 新建 nativeResources/ios/Resources 目录。
|
||||
|
||||
2. 在 nativeResources/ios/Resources 中**新建 timpush-configs.json 文件**。
|
||||
|
||||
3. 并将在 [IM控制台 > 推送服务 Push > 接入设置](https://console.cloud.tencent.com/im/push-plugin-push-identifier) 获取的证书ID,补充到 timpush-configs.json 文件中。
|
||||
|
||||
```
|
||||
{
|
||||
"businessID":"xxx"
|
||||
}
|
||||
```
|
||||
|
||||
## 接口
|
||||
|
||||
| API | 描述|
|
||||
|----|---|
|
||||
| registerPush | 注册推送服务 (必须在 App 用户同意了隐私政策,并且允许为 App 用户提供推送服务后,再调用该接口使用推送服务)。<br>首次注册成功后,TencentCloud-Push SDK 生成该设备的标识 - RegistrationID。<br> 业务侧可以把这个 RegistrationID 保存到业务服务器。业务侧根据 RegistrationID 向设备推送消息或者通知。|
|
||||
| unRegisterPush | 反注册关闭推送服务。|
|
||||
| setRegistrationID | 设置注册推送服务使用的推送 ID 标识,即 RegistrationID。<br/>如果业务侧期望业务账号 ID 和推送 ID 一致,方便使用,可使用此接口,此时需注意,此接口需在 registerPush(注册推送服务)之前调用。|
|
||||
| getRegistrationID | 注册推送服务成功后,获取推送 ID 标识,即 RegistrationID。|
|
||||
| getNotificationExtInfo | 获取推送扩展信息。|
|
||||
| getNotificationExtInfo | 收到离线推送时,点击通知栏拉起 app,调用此接口可获取推送扩展信息。|
|
||||
| addPushListener | 添加 Push 监听器。|
|
||||
| removePushListener | 移除 Push 监听器。|
|
||||
| disablePostNotificationInForeground | 应用在前台时,开/关通知栏通知。|
|
||||
| createNotificationChannel | 创建客户端通知 channel。|
|
||||
|
||||
|
||||
```ts
|
||||
registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|SDKAppID|number|是|推送(Push)应用 ID|
|
||||
|appKey|string|是|推送(Push)应用客户端密钥|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|onError|function|否|接口调用失败的回调函数|
|
||||
|
||||
```ts
|
||||
unRegisterPush(onSuccess: () => void, onError?: (errCode: number, errMsg: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|onError|function|否|接口调用失败的回调函数|
|
||||
|
||||
```ts
|
||||
setRegistrationID(registrationID: string, onSuccess: () => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|registrationID|string|是|设备的推送标识 ID,卸载重装会改变。|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
|
||||
```ts
|
||||
getRegistrationID(onSuccess: (registrationID: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
```ts
|
||||
getNotificationExtInfo(onSuccess: (extInfo: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
```ts
|
||||
addPushListener(eventName: string, listener: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|eventName|string|是|推送事件类型|
|
||||
|listener|function|是|推送事件处理方法|
|
||||
|
||||
```ts
|
||||
removePushListener(eventName: string, listener?: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|eventName|string|是|推送事件类型|
|
||||
|listener|function|否|推送事件处理方法|
|
||||
|
||||
```ts
|
||||
disablePostNotificationInForeground(disable: boolean);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|disable|boolean|是|应用在前台时,开/关通知栏通知,默认开<br/> - true: 应用在前台时,关闭通知栏通知。<br/> - false: 应用在前台时,开启通知栏通知。|
|
||||
|
||||
```ts
|
||||
createNotificationChannel(options: any, listener: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|options.channelID|string|是|自定义 channel 的 ID|
|
||||
|options.channelName|string|是|自定义 channel 的名称|
|
||||
|options.channelDesc|string|否|自定义 channel 的描述|
|
||||
|options.channelSound|string|否|自定义 channel 的铃音,音频文件名,不带后缀,音频文件需要放到 xxx/nativeResources/android/res/raw 中。<br/> 例如:<br/> `options.channelSound = private_ring`,即设置 `xxx/nativeResources/android/res/raw/private_ring.mp3` 为自定义铃音|
|
||||
|listener|function|是|接口调用成功的回调函数|
|
||||
285
uni_modules/TencentCloud-Push/readme.md
Normal file
285
uni_modules/TencentCloud-Push/readme.md
Normal file
@@ -0,0 +1,285 @@
|
||||
# TencentCloud-Push
|
||||
|
||||
## 简介
|
||||
|
||||
使用 uts 开发,基于腾讯云推送服务(Push),支持 iOS 和 Android 推送,同时适配各大厂商推送。
|
||||
|
||||
腾讯云推送服务(Push)提供一站式 App 推送解决方案,助您轻松提升用户留存和互动活跃度,支持与腾讯云即时通信 IM SDK、实时音视频 TRTC SDK、音视频通话 SDK、直播 SDK等音视频终端产品协同集成,在不同场景联合使用,提升业务整体功能体验。
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/60d714484e54b284cfa440adcc885349.png" width="618" height="456">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/864c391ecf6f2724d26e368e4f09e466.png" width="618" height="444">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/6af60f4b20dd46323e8f901a161a80a9.png" width="618" height="454">
|
||||
|
||||
#### 数据可视化,辅助运营策略
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/6c422f64900053c38a6bf66fe1103b3f.png" width="618" height="334">
|
||||
|
||||
#### 支持推送消息全链路问题排查
|
||||
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/156d43ed48971f9bf865ad0c4e2342e3.png" width="618" height="443">
|
||||
|
||||
#### 六地服务部署,严守数据安全
|
||||
|
||||
提供了中国、东南亚(新加坡、印尼雅加达)、东北亚(韩国首尔)、欧洲(德国法兰克福)以及北美(美国硅谷)数据存储中心供选择,每个数据中心均支持全球接入。如果您的应用在境外上线且用户主要在境外,您可以根据消息传输需求及合规要求,选择适合您业务的境外数据中心,保障您的数据安全。
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/image/document/2ffc1a103a42d9c01cfb819cd92bbd1d.png" widht="618" height="308">
|
||||
|
||||
## 快速跑通
|
||||
|
||||
### 步骤1:创建应用
|
||||
|
||||
进入 [控制台](https://console.cloud.tencent.com/im) ,单击创建应用,填写应用名称,选择数据中心,单击确定,完成应用创建。
|
||||
|
||||

|
||||
|
||||
### 步骤2:开通推送服务 Push
|
||||
|
||||
进入 [推送服务 Push](https://console.cloud.tencent.com/im/push-plugin-push-identifier),单击立即购买或免费试用 。(每个应用可免费试用一次,有效期7天)
|
||||
|
||||

|
||||
|
||||
### 步骤3:将 [uni-app 腾讯云推送服务(Push)](https://ext.dcloud.net.cn/plugin?id=20169)插件导入 HbuilderX 中的工程。如图所示:
|
||||
|
||||

|
||||

|
||||

|
||||
|
||||
### 步骤4:在 App.vue 中引入并注册腾讯云推送服务(Push)
|
||||
|
||||
将 SDKAppID 和 appKey 替换为您在IM 控制台 - 推送服务 Push - 接入设置页面 获取的应用的信息。如图所示:
|
||||
|
||||

|
||||
|
||||
```ts
|
||||
// 集成 TencentCloud-Push
|
||||
import * as Push from '@/uni_modules/TencentCloud-Push';
|
||||
const SDKAppID = 0; // 您的 SDKAppID
|
||||
const appKey = ''; // 客户端密钥
|
||||
Push.registerPush(SDKAppID, appKey, (data) => {
|
||||
console.log('registerPush ok', data);
|
||||
Push.getRegistrationID((registrationID) => {
|
||||
console.log('getRegistrationID ok', registrationID);
|
||||
});
|
||||
}, (errCode, errMsg) => {
|
||||
console.error('registerPush failed', errCode, errMsg);
|
||||
}
|
||||
);
|
||||
|
||||
// 监听通知栏点击事件,获取推送扩展信息
|
||||
Push.addPushListener(Push.EVENT.NOTIFICATION_CLICKED, (res) => {
|
||||
// res 为推送扩展信息
|
||||
console.log('notification clicked', res);
|
||||
});
|
||||
|
||||
// 监听在线推送
|
||||
Push.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {
|
||||
// res 为消息内容
|
||||
console.log('message received', res);
|
||||
});
|
||||
|
||||
// 监听在线推送被撤回
|
||||
Push.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {
|
||||
// res 为被撤回的消息 ID
|
||||
console.log('message revoked', res);
|
||||
});
|
||||
```
|
||||
|
||||
### <span id="step5">步骤5:测试推送(测试前请务必打开手机通知权限,允许应用通知。)</span>
|
||||
|
||||
单击 HBuilderX 的 【运行 > 运行到手机或模拟器 > 制作自定义调试基座】,使用云端证书制作 Android 或 iOS 自定义调试基座。
|
||||
|
||||

|
||||
|
||||
自定义调试基座打好后,安装到手机运行。
|
||||
|
||||
[登录](https://console.cloud.tencent.com/im/push-plugin-push-check) 控制台,使用测试工具进行在线推送测试。
|
||||

|
||||
|
||||
|
||||
## 厂商推送配置
|
||||
|
||||
> - 请注意!HBuilderX 4.36 发布了不向下兼容的更新,如果您使用的是 HBuilderX 4.36 或者更高版本,且需要 vivo/荣耀 的厂商推送,
|
||||
请升级推送版本到 1.1.0 或更高版本,并参考文档正确配置 `manifestPlaceholders.json` 和 `mcs-services.json`。
|
||||
> - 请在 `nativeResources` 目录下进行推送配置。若项目根目录尚未创建该文件夹,请新建一个名为 `nativeResources` 的文件夹。
|
||||
> - 厂商推送配置完成后,需要打包自定义基座。参考:[[快速跑通]>[步骤5:测试推送(测试前请务必打开手机通知权限,允许应用通知。)]](#step5)
|
||||
|
||||
#### 【Android】
|
||||
|
||||
1. 新建 nativeResources/android/assets 目录。
|
||||
|
||||
2. 在 [推送服务 Push > 接入设置 > 一键式快速配置](https://console.cloud.tencent.com/im/push-plugin-push-identifier) 下载 `timpush-configs.json` 文件,配置到 nativeResources/android/assets 目录下。
|
||||
|
||||
3. For 华为:
|
||||
|
||||
配置 `agconnect-services.json` (此文件获取详见 [厂商配置 > uniapp > 华为 > 步骤4:获取应用信息](https://cloud.tencent.com/document/product/269/103769))到 nativeResources/android 目录下。
|
||||
|
||||
4. For Google FCM:
|
||||
|
||||
4.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `project.plugins`,添加 `"com.google.gms.google-services"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"project": {
|
||||
"plugins": [
|
||||
...
|
||||
"com.google.gms.google-services"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4.2. 配置 `google-services.json` 文件到 nativeResources/android/ 目录。
|
||||
|
||||
5. For 荣耀:
|
||||
|
||||
5.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `dependencies`,添加 `"com.tencent.timpush:honor:8.3.6498"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"dependencies": [
|
||||
...
|
||||
"com.tencent.timpush:honor:8.3.6498"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
5.2. 配置 `mcs-services.json` 文件到 nativeResources/android 目录下。
|
||||
|
||||
5.3. 配置 `appID` 到 nativeResources/android/manifestPlaceholders.json 中的 `"HONOR_APPID"`,如下:
|
||||
```
|
||||
{
|
||||
"HONOR_APPID": ""
|
||||
}
|
||||
```
|
||||
|
||||
6. For vivo:
|
||||
|
||||
6.1. 编辑 uni_modules/TencentCloud-Push/utssdk/app-android/config.json 的 `dependencies`,添加 `"com.tencent.timpush:vivo:8.3.6498"`,如下:
|
||||
```
|
||||
{
|
||||
...
|
||||
"dependencies": [
|
||||
...
|
||||
"com.tencent.timpush:vivo:8.3.6498"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
6.2. 配置 `appID` 和 `appKey` 到 nativeResources/android/manifestPlaceholders.json 中的 `VIVO_APPKEY` 和 `VIVO_APPID`,如下:
|
||||
```
|
||||
{
|
||||
"VIVO_APPKEY": "",
|
||||
"VIVO_APPID": "",
|
||||
}
|
||||
```
|
||||
|
||||
#### 【iOS】
|
||||
|
||||
1. 新建 nativeResources/ios/Resources 目录。
|
||||
|
||||
2. 在 nativeResources/ios/Resources 目录下新建 `timpush-configs.json` 文件。
|
||||
|
||||
3. 将在 [IM控制台 > 推送服务 Push > 接入设置](https://console.cloud.tencent.com/im/push-plugin-push-identifier) 获取的证书ID,补充到 `timpush-configs.json` 文件中。
|
||||
|
||||
```
|
||||
{
|
||||
"businessID":"xxx"
|
||||
}
|
||||
```
|
||||
|
||||
## 接口
|
||||
|
||||
| API | 描述|
|
||||
|----|---|
|
||||
| registerPush | 注册推送服务 (必须在 App 用户同意了隐私政策,并且允许为 App 用户提供推送服务后,再调用该接口使用推送服务)。<br>首次注册成功后,TencentCloud-Push SDK 生成该设备的标识 - RegistrationID。<br> 业务侧可以把这个 RegistrationID 保存到业务服务器。业务侧根据 RegistrationID 向设备推送消息或者通知。|
|
||||
| unRegisterPush | 反注册关闭推送服务。|
|
||||
| setRegistrationID | 设置注册推送服务使用的推送 ID 标识,即 RegistrationID。<br/>如果业务侧期望业务账号 ID 和推送 ID 一致,方便使用,可使用此接口,此时需注意,此接口需在 registerPush(注册推送服务)之前调用。|
|
||||
| getRegistrationID | 注册推送服务成功后,获取推送 ID 标识,即 RegistrationID。|
|
||||
| getNotificationExtInfo | 收到离线推送时,点击通知栏拉起 app,调用此接口可获取推送扩展信息。|
|
||||
| addPushListener | 添加 Push 监听器。|
|
||||
| removePushListener | 移除 Push 监听器。|
|
||||
| disablePostNotificationInForeground | 应用在前台时,开/关通知栏通知(默认开)。|
|
||||
| createNotificationChannel | 创建客户端通知 channel。|
|
||||
|
||||
```ts
|
||||
registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|SDKAppID|number|是|推送(Push)应用 ID|
|
||||
|appKey|string|是|推送(Push)应用客户端密钥|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|onError|function|否|接口调用失败的回调函数|
|
||||
|
||||
```ts
|
||||
unRegisterPush(onSuccess: () => void, onError?: (errCode: number, errMsg: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|onError|function|否|接口调用失败的回调函数|
|
||||
|
||||
```ts
|
||||
setRegistrationID(registrationID: string, onSuccess: () => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|registrationID|string|是|设备的推送标识 ID,卸载重装会改变。|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
|
||||
```ts
|
||||
getRegistrationID(onSuccess: (registrationID: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
```ts
|
||||
getNotificationExtInfo(onSuccess: (extInfo: string) => void): void;
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|onSuccess|function|是|接口调用成功的回调函数|
|
||||
|
||||
```ts
|
||||
addPushListener(eventName: string, listener: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|eventName|string|是|推送事件类型|
|
||||
|listener|function|是|推送事件处理方法|
|
||||
|
||||
```ts
|
||||
removePushListener(eventName: string, listener?: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|eventName|string|是|推送事件类型|
|
||||
|listener|function|否|推送事件处理方法|
|
||||
|
||||
```ts
|
||||
disablePostNotificationInForeground(disable: boolean);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|disable|boolean|是|应用在前台时,开/关通知栏通知,默认开<br/> - true: 应用在前台时,关闭通知栏通知。<br/> - false: 应用在前台时,开启通知栏通知。|
|
||||
|
||||
```ts
|
||||
createNotificationChannel(options: any, listener: (data: any) => void);
|
||||
```
|
||||
|
||||
|属性|类型|必填|说明|
|
||||
|----|---|----|----|
|
||||
|options.channelID|string|是|自定义 channel 的 ID|
|
||||
|options.channelName|string|是|自定义 channel 的名称|
|
||||
|options.channelDesc|string|否|自定义 channel 的描述|
|
||||
|options.channelSound|string|否|自定义 channel 的铃音,音频文件名,不带后缀,音频文件需要放到 xxx/nativeResources/android/res/raw 中。<br/> 例如:<br/> `options.channelSound = private_ring`,即设置 `xxx/nativeResources/android/res/raw/private_ring.mp3` 为自定义铃音|
|
||||
|listener|function|是|接口调用成功的回调函数|
|
||||
27
uni_modules/TencentCloud-Push/utssdk/app-android/config.json
Normal file
27
uni_modules/TencentCloud-Push/utssdk/app-android/config.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"minSdkVersion": "21",
|
||||
"dependencies": [
|
||||
"com.google.android.material:material:1.3.0",
|
||||
"com.google.code.gson:gson:2.9.1",
|
||||
"commons-codec:commons-codec:1.15",
|
||||
"com.github.bumptech.glide:glide:4.12.0",
|
||||
"com.tencent.timpush:timpush:8.5.6864",
|
||||
"com.tencent.liteav.tuikit:tuicore:8.5.6864",
|
||||
"com.tencent.timpush:huawei:8.5.6864",
|
||||
"com.tencent.timpush:xiaomi:8.5.6864",
|
||||
"com.tencent.timpush:oppo:8.5.6864",
|
||||
"com.tencent.timpush:meizu:8.5.6864",
|
||||
"com.tencent.timpush:fcm:8.5.6864"
|
||||
],
|
||||
"project": {
|
||||
"plugins": [
|
||||
"com.huawei.agconnect",
|
||||
"com.hihonor.mcs.asplugin"
|
||||
],
|
||||
"dependencies": [
|
||||
"com.huawei.agconnect:agcp:1.9.1.301",
|
||||
"com.google.gms:google-services:4.3.15",
|
||||
"com.hihonor.mcs:asplugin:2.0.1.300"
|
||||
]
|
||||
}
|
||||
}
|
||||
152
uni_modules/TencentCloud-Push/utssdk/app-android/index.uts
Normal file
152
uni_modules/TencentCloud-Push/utssdk/app-android/index.uts
Normal file
@@ -0,0 +1,152 @@
|
||||
import { UTSAndroid } from 'io.dcloud.uts';
|
||||
import Context from 'android.content.Context';
|
||||
import TIMPushManager from 'com.tencent.qcloud.tim.push.TIMPushManager';
|
||||
import TIMPushConfig from 'com.tencent.qcloud.tim.push.config.TIMPushConfig';
|
||||
import { PushCallbackOptions } from './push-callback-options.uts';
|
||||
import { PushListenerOptions } from './push-listener-options.uts';
|
||||
import PushCallback from './push-callback.uts';
|
||||
import PushListener from './push-listener.uts';
|
||||
|
||||
const context: Context | null = UTSAndroid.getAppContext();
|
||||
console.warn('Push | package.name:', context?.getPackageName());
|
||||
TIMPushConfig.getInstance().setRunningPlatform(2);
|
||||
const Push = TIMPushManager.getInstance();
|
||||
|
||||
export class EVENT {
|
||||
static MESSAGE_RECEIVED: string = 'message_received'
|
||||
static MESSAGE_REVOKED: string = 'message_revoked'
|
||||
static NOTIFICATION_CLICKED: string = 'notification_clicked'
|
||||
}
|
||||
|
||||
let disableNotification = false;
|
||||
export function disablePostNotificationInForeground(disable: boolean): void {
|
||||
console.log('Push | disablePostNotificationInForeground', disable);
|
||||
disableNotification = disable;
|
||||
Push.disablePostNotificationInForeground(disableNotification);
|
||||
}
|
||||
|
||||
export function registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void): void {
|
||||
if (SDKAppID == 0) {
|
||||
onError?.(9010001, 'Invalid SDKAppID');
|
||||
} else if (appKey == '') {
|
||||
onError?.(9010002, 'Invalid appKey');
|
||||
}
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'registerPush',
|
||||
success: (res?: any) => {
|
||||
Push.disablePostNotificationInForeground(disableNotification);
|
||||
// 强转下类型,避免类型推断错误
|
||||
let token: string = res as string;
|
||||
onSuccess(token);
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
onError?.(errCode, errMsg);
|
||||
}
|
||||
};
|
||||
// 注意!!! 这里不要写成 new PushCallback({ api, success, fail }),否则会因类型推断不一致导致编译错误
|
||||
Push.registerPush(context, SDKAppID.toInt(), appKey, new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
export function setRegistrationID(registrationID: string, onSuccess: () => void): void {
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'setRegistrationID',
|
||||
success: (res?: any) => {
|
||||
onSuccess();
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
// 空实现
|
||||
}
|
||||
};
|
||||
// 注意!!! 这里不要写成 new PushCallback({ api, success, fail }),否则会因类型推断不一致导致编译错误
|
||||
Push.setRegistrationID(registrationID, new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
export function getRegistrationID(onSuccess: (registrationID: string) => void): void {
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'getRegistrationID',
|
||||
success: (res?: any) => {
|
||||
// 强转下类型,避免类型推断错误
|
||||
let registrationID: string = res as string;
|
||||
onSuccess(registrationID);
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
// 空实现
|
||||
}
|
||||
};
|
||||
// 注意!!! 这里不要写成 new PushCallback({ api, success, fail }),否则会因类型推断不一致导致编译错误
|
||||
Push.getRegistrationID(new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
export function unRegisterPush(onSuccess: () => void, onError?: (errCode: number, errMsg: string) => void): void {
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'unRegisterPush',
|
||||
success: (res?: any) => {
|
||||
onSuccess();
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
// 空实现
|
||||
},
|
||||
};
|
||||
// 注意!!! 这里不要写成 new PushCallback({ api, success, fail }),否则会因类型推断不一致导致编译错误
|
||||
Push.unRegisterPush(new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
export function createNotificationChannel(options: any, onSuccess: (extInfo: string) => void): void {
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'createNotificationChannel',
|
||||
success: (res?: any) => {
|
||||
let ret: string = res as string;
|
||||
onSuccess(ret);
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
// 空实现
|
||||
},
|
||||
};
|
||||
Push.callExperimentalAPI('createNotificationChannel', JSON.stringify(options), new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
export function getNotificationExtInfo(onSuccess: (extInfo: string) => void): void {
|
||||
const pushCbOptions: PushCallbackOptions = {
|
||||
apiName: 'getNotificationExtInfo',
|
||||
success: (res?: any) => {
|
||||
let ret: string = res as string;
|
||||
onSuccess(ret);
|
||||
},
|
||||
fail: (errCode: number, errMsg: string) => {
|
||||
// 空实现
|
||||
},
|
||||
};
|
||||
Push.callExperimentalAPI('getNotificationExtInfo', null, new PushCallback(pushCbOptions));
|
||||
}
|
||||
|
||||
const listenerMap = new Map<string, Array<(res: any) => void>>();
|
||||
|
||||
const pushListenerOptions: PushListenerOptions = {
|
||||
listener: (eventName: string, data: any) => {
|
||||
listenerMap.get(eventName)?.forEach(item => {
|
||||
item(data);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const pushListener = new PushListener(pushListenerOptions);
|
||||
|
||||
@UTSJS.keepAlive
|
||||
export function addPushListener(eventName: string, listener: (res: any) => void): void {
|
||||
if(listenerMap.size === 0) {
|
||||
Push.addPushListener(pushListener);
|
||||
}
|
||||
const listeners:Array<(res: any) => void> = [listener];
|
||||
listenerMap.get(eventName)?.forEach(item => {
|
||||
listeners.push(item);
|
||||
})
|
||||
listenerMap.set(eventName, listeners);
|
||||
}
|
||||
|
||||
|
||||
export function removePushListener(eventName: string, listener?: (res: any) => void): void {
|
||||
listenerMap.delete(eventName);
|
||||
if(listenerMap.size === 0) {
|
||||
Push.removePushListener(pushListener);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export type PushCallbackOptions = {
|
||||
apiName: string
|
||||
success: (res?: any) => void
|
||||
fail: (errCode: number, errMsg: string) => void
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import TIMPushCallback from 'com.tencent.qcloud.tim.push.TIMPushCallback';
|
||||
import { PushCallbackOptions } from './push-callback-options.uts';
|
||||
|
||||
const LOG_PREFIX: string = 'Push |';
|
||||
export default class PushCallback implements TIMPushCallback<any> {
|
||||
private apiName: string;
|
||||
private success: (data?: any) => void;
|
||||
private fail: (errCode: number, errMsg: string) => void;
|
||||
|
||||
constructor(options: PushCallbackOptions) {
|
||||
this.apiName = options.apiName;
|
||||
this.success = options.success;
|
||||
this.fail = options.fail;
|
||||
}
|
||||
|
||||
override onSuccess(data?: any) {
|
||||
console.log(`${LOG_PREFIX} ${this.apiName} ok, data:`, data);
|
||||
if (data == null) {
|
||||
this.success?.('');
|
||||
} else {
|
||||
this.success?.(data);
|
||||
}
|
||||
}
|
||||
|
||||
override onError(errCode: Int, errMsg: string, data?: any) {
|
||||
this.fail?.(errCode as number, errMsg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export type PushListenerOptions = {
|
||||
listener: (eventType: string, data: any) => void
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import TIMPushListener from 'com.tencent.qcloud.tim.push.TIMPushListener';
|
||||
import TIMPushMessage from 'com.tencent.qcloud.tim.push.TIMPushMessage';
|
||||
import { PushListenerOptions } from './push-listener-options.uts';
|
||||
|
||||
const LOG_PREFIX: string = 'Push | PushListener';
|
||||
export default class PushListener implements TIMPushListener {
|
||||
private listener: (eventType: string, data: any) => void;
|
||||
|
||||
constructor(options: PushListenerOptions) {
|
||||
this.listener = options.listener;
|
||||
console.log(`${LOG_PREFIX} ok`);
|
||||
}
|
||||
|
||||
override onRecvPushMessage(message: TIMPushMessage) {
|
||||
this.listener('message_received', { data: message });
|
||||
}
|
||||
|
||||
override onRevokePushMessage(messageID: string) {
|
||||
this.listener('message_revoked', { data: messageID });
|
||||
}
|
||||
|
||||
override onNotificationClicked(ext: string) {
|
||||
this.listener('notification_clicked', { data: ext });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>aps-environment</key>
|
||||
<string>development</string>
|
||||
</dict>
|
||||
</plist>
|
||||
11
uni_modules/TencentCloud-Push/utssdk/app-ios/config.json
Normal file
11
uni_modules/TencentCloud-Push/utssdk/app-ios/config.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"deploymentTarget": "9.0",
|
||||
"dependencies-pods": [
|
||||
{
|
||||
"name": "TXIMSDK_Plus_iOS_XCFramework",
|
||||
"version": "8.5.6864"
|
||||
}, {
|
||||
"name": "TIMPush",
|
||||
"version": "8.5.6864"
|
||||
}]
|
||||
}
|
||||
125
uni_modules/TencentCloud-Push/utssdk/app-ios/index.uts
Normal file
125
uni_modules/TencentCloud-Push/utssdk/app-ios/index.uts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { TIMPushManager } from "TIMPush"
|
||||
import { NSObject } from "DCloudUTSFoundation"
|
||||
import PushListener from './push-listener.uts'
|
||||
import { PushListenerOptions } from './push-listener-options.uts'
|
||||
|
||||
const LOG_PREFIX = 'Push |';
|
||||
|
||||
export class EVENT {
|
||||
static MESSAGE_RECEIVED: string = 'message_received'
|
||||
static MESSAGE_REVOKED: string = 'message_revoked'
|
||||
static NOTIFICATION_CLICKED: string = 'notification_clicked'
|
||||
}
|
||||
|
||||
function setRunningPlatform(): void {
|
||||
console.log(LOG_PREFIX, 'setRunningPlatform');
|
||||
const param = new NSString("{\"runningPlatform\":2}");
|
||||
TIMPushManager.callExperimentalAPI('setPushConfig', param = param, succ = (ext?: NSObject): void => {
|
||||
let platform: string = ext as string;
|
||||
console.log(LOG_PREFIX, 'setRunningPlatform ok. platform:', platform);
|
||||
}, fail = (code?: Int32 ,desc?:String): void => {
|
||||
console.log(LOG_PREFIX, `setRunningPlatform fail. code: ${code}, desc: ${desc}`);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
let disableNotification = false;
|
||||
|
||||
export function disablePostNotificationInForeground(_disable: boolean): void {
|
||||
console.log(LOG_PREFIX, 'disablePostNotificationInForeground', _disable);
|
||||
disableNotification = _disable;
|
||||
TIMPushManager.disablePostNotificationInForeground(disable = disableNotification);
|
||||
}
|
||||
|
||||
export function registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void): void {
|
||||
if (SDKAppID == 0) {
|
||||
onError?.(9010001, 'Invalid SDKAppID');
|
||||
} else if (appKey == '') {
|
||||
onError?.(9010002, 'Invalid appKey');
|
||||
}
|
||||
setRunningPlatform();
|
||||
TIMPushManager.registerPush(SDKAppID.toInt32(), appKey = appKey, succ = (deviceToken?: Data): void => {
|
||||
TIMPushManager.disablePostNotificationInForeground(disable = disableNotification);
|
||||
console.log('devicetoken ->', deviceToken, deviceToken?.count);
|
||||
onSuccess('');
|
||||
}, fail = (code?: Int32 ,desc?:String): void => {
|
||||
onError?.(code as number, desc as string);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function unRegisterPush(onSuccess: () => void, onError: (errCode: number, errMsg: string) => void): void {
|
||||
TIMPushManager.unRegisterPush((): void => {
|
||||
onSuccess();
|
||||
}, fail = (code?: Int32 ,desc?:String): void => {
|
||||
onError(code as number, desc as string);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function setRegistrationID(registrationID: string, onSuccess: () => void): void {
|
||||
console.log(LOG_PREFIX, 'setRegistrationID', `registrationID:${registrationID}`);
|
||||
TIMPushManager.setRegistrationID(registrationID, callback = (): void => {
|
||||
console.log(LOG_PREFIX, 'setRegistrationID ok');
|
||||
onSuccess();
|
||||
});
|
||||
}
|
||||
|
||||
export function getRegistrationID(onSuccess: (registrationID: string) => void): void {
|
||||
TIMPushManager.getRegistrationID((value ?: string): void => {
|
||||
// 这里需要转一下,否则会有问题
|
||||
let ret: string = value as string;
|
||||
onSuccess(ret);
|
||||
});
|
||||
}
|
||||
|
||||
export function createNotificationChannel(options: any, onSuccess: (data: string) => void): void {
|
||||
// 空实现
|
||||
}
|
||||
|
||||
// 注意!!!这里的 extInfo 不能写成 ext,否则会跟内部的 ext?:NSObject 有冲突;也不能写成 extension,否则会导致编译错误
|
||||
export function getNotificationExtInfo(onSuccess: (extInfo: string) => void): void {
|
||||
console.log(LOG_PREFIX, 'getNotificationExtInfo');
|
||||
TIMPushManager.callExperimentalAPI('getNotificationExtInfo', param = {}, succ = (ext?: NSObject): void => {
|
||||
let str: string = ext as string;
|
||||
console.log(LOG_PREFIX, 'getNotificationExtInfo ok. ext:', str);
|
||||
onSuccess(str);
|
||||
}, fail = (code?: Int32 ,desc?:String): void => {
|
||||
// 空实现
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const listenerMap = new Map<string, Array<(res: any) => void>>();
|
||||
|
||||
const pushListenerOptions: PushListenerOptions = {
|
||||
listener: (eventName: string, data: any) => {
|
||||
listenerMap.get(eventName)?.forEach(item => {
|
||||
item(data);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const pushListener = new PushListener(pushListenerOptions);
|
||||
|
||||
@UTSJS.keepAlive
|
||||
export function addPushListener(eventName: string, _listener: (res: any) => void): void {
|
||||
console.log(LOG_PREFIX, 'addPushListener', eventName);
|
||||
if(listenerMap.size === 0) {
|
||||
TIMPushManager.addPushListener(listener = pushListener);
|
||||
}
|
||||
const listeners:Array<(res: any) => void> = [_listener];
|
||||
listenerMap.get(eventName)?.forEach(item => {
|
||||
listeners.push(item);
|
||||
})
|
||||
listenerMap.set(eventName, listeners);
|
||||
}
|
||||
|
||||
export function removePushListener(eventName: string, _listener?: (res: any) => void): void {
|
||||
console.log(LOG_PREFIX, 'removePushListener', eventName);
|
||||
listenerMap.delete(eventName);
|
||||
if(listenerMap.size === 0) {
|
||||
TIMPushManager.removePushListener(listener = pushListener);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export type PushListenerOptions = {
|
||||
listener: (eventType: string, data: any) => void
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { TIMPushListener, TIMPushMessage} from "TIMPush"
|
||||
import { PushListenerOptions } from './push-listener-options.uts';
|
||||
|
||||
const LOG_PREFIX: string = 'Push | PushListener';
|
||||
export default class PushListener implements TIMPushListener {
|
||||
private listener: (eventType: string, data: any) => void;
|
||||
|
||||
constructor(options: PushListenerOptions) {
|
||||
this.listener = options.listener;
|
||||
console.log(`${LOG_PREFIX} ok`);
|
||||
}
|
||||
|
||||
onRecvPushMessage(message: TIMPushMessage) {
|
||||
this.listener('message_received', { data: message });
|
||||
}
|
||||
|
||||
onRevokePushMessage(messageID: string) {
|
||||
this.listener('message_revoked', { data: messageID });
|
||||
}
|
||||
|
||||
onNotificationClicked(ext: string) {
|
||||
this.listener('notification_clicked', { data: ext });
|
||||
}
|
||||
}
|
||||
11
uni_modules/TencentCloud-Push/utssdk/interface.uts
Normal file
11
uni_modules/TencentCloud-Push/utssdk/interface.uts
Normal file
@@ -0,0 +1,11 @@
|
||||
interface Push {
|
||||
setRegistrationID(registrationID: string, onSuccess: () => void): void,
|
||||
registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void): void,
|
||||
getRegistrationID(onSuccess: (registrationID: string) => void): void,
|
||||
unRegisterPush(onSuccess: () => void, onError?: (errCode: number, errMsg: string) => void): void,
|
||||
getNotificationExtInfo(onSuccess: (extInfo: string) => void): void
|
||||
addPushListener(eventName: string, listener: (res: any) => void): void
|
||||
removePushListener(eventName: string, listener?: (res: any) => void): void
|
||||
disablePostNotificationInForeground(disable: boolean): void
|
||||
createNotificationChannel(options: any, onSuccess: (data: string) => void): void
|
||||
}
|
||||
17
uni_modules/uni-combox/changelog.md
Normal file
17
uni_modules/uni-combox/changelog.md
Normal file
@@ -0,0 +1,17 @@
|
||||
## 1.0.2(2024-09-21)
|
||||
- 新增 clearAble属性
|
||||
## 1.0.1(2021-11-23)
|
||||
- 优化 label、label-width 属性
|
||||
## 1.0.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
|
||||
## 0.1.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 0.0.6(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 0.0.5(2021-04-21)
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 0.0.4(2021-02-05)
|
||||
- 优化 组件引用关系,通过uni_modules引用组件
|
||||
## 0.0.3(2021-02-04)
|
||||
- 调整为uni_modules目录规范
|
||||
284
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
Normal file
284
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
|
||||
<view v-if="label" class="uni-combox__label" :style="labelStyle">
|
||||
<text>{{label}}</text>
|
||||
</view>
|
||||
<view class="uni-combox__input-box">
|
||||
<input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac"
|
||||
v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
|
||||
<uni-icons v-if="!inputVal || !clearAble" :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
|
||||
</uni-icons>
|
||||
<uni-icons v-if="inputVal && clearAble" type="clear" size="24" color="#999" @click="clean">
|
||||
</uni-icons>
|
||||
</view>
|
||||
<view class="uni-combox__selector" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
|
||||
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
|
||||
@click="onSelectorClick(index)">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Combox 组合输入框
|
||||
* @description 组合输入框一般用于既可以输入也可以选择的场景
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261
|
||||
* @property {String} label 左侧文字
|
||||
* @property {String} labelWidth 左侧内容宽度
|
||||
* @property {String} placeholder 输入框占位符
|
||||
* @property {Array} candidates 候选项列表
|
||||
* @property {String} emptyTips 筛选结果为空时显示的文字
|
||||
* @property {String} value 组合框的值
|
||||
*/
|
||||
export default {
|
||||
name: 'uniCombox',
|
||||
emits: ['input', 'update:modelValue'],
|
||||
props: {
|
||||
clearAble: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
candidates: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: '无匹配项'
|
||||
},
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
inputVal: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labelStyle() {
|
||||
if (this.labelWidth === 'auto') {
|
||||
return ""
|
||||
}
|
||||
return `width: ${this.labelWidth}`
|
||||
},
|
||||
filterCandidates() {
|
||||
return this.candidates.filter((item) => {
|
||||
return item.toString().indexOf(this.inputVal) > -1
|
||||
})
|
||||
},
|
||||
filterCandidatesLength() {
|
||||
return this.filterCandidates.length
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
handler(newVal) {
|
||||
this.inputVal = newVal
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
this.inputVal = newVal
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
toggleSelector() {
|
||||
this.showSelector = !this.showSelector
|
||||
},
|
||||
onFocus() {
|
||||
this.showSelector = true
|
||||
},
|
||||
onBlur() {
|
||||
setTimeout(() => {
|
||||
this.showSelector = false
|
||||
}, 153)
|
||||
},
|
||||
onSelectorClick(index) {
|
||||
this.inputVal = this.filterCandidates[index]
|
||||
this.showSelector = false
|
||||
this.$emit('input', this.inputVal)
|
||||
this.$emit('update:modelValue', this.inputVal)
|
||||
},
|
||||
onInput() {
|
||||
setTimeout(() => {
|
||||
this.$emit('input', this.inputVal)
|
||||
this.$emit('update:modelValue', this.inputVal)
|
||||
})
|
||||
},
|
||||
clean() {
|
||||
this.inputVal = ''
|
||||
this.onInput()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-combox {
|
||||
font-size: 14px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// height: 40px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
// border-bottom: solid 1px #DDDDDD;
|
||||
}
|
||||
|
||||
.uni-combox__label {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.uni-combox__input-box {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-combox__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.uni-combox__input-plac {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-combox__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.uni-combox__selector-scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-combox__selector-empty,
|
||||
.uni-combox__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
// border-bottom: solid 1px #DDDDDD;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.uni-combox__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.uni-combox__selector-empty:last-child,
|
||||
.uni-combox__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// picker 弹出层通用的指示小三角
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.uni-combox__no-border {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
88
uni_modules/uni-combox/package.json
Normal file
88
uni_modules/uni-combox/package.json
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uni-combox",
|
||||
"displayName": "uni-combox 组合框",
|
||||
"version": "1.0.2",
|
||||
"description": "可以选择也可以输入的表单项 ",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"combox",
|
||||
"组合框",
|
||||
"select"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-combox/readme.md
Normal file
11
uni_modules/uni-combox/readme.md
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
## Combox 组合框
|
||||
> **组件名:uni-combox**
|
||||
> 代码块: `uCombox`
|
||||
|
||||
|
||||
组合框组件。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
51
uni_modules/uni-data-checkbox/changelog.md
Normal file
51
uni_modules/uni-data-checkbox/changelog.md
Normal file
@@ -0,0 +1,51 @@
|
||||
## 1.0.6(2024-10-22)
|
||||
- 新增 当 multiple 为 false 且传递的 value 为 数组时,使用数组第一项用作反显
|
||||
## 1.0.5(2024-03-20)
|
||||
- 修复 单选模式下选中样式不生效的bug
|
||||
## 1.0.4(2024-01-27)
|
||||
- 修复 修复错别字chagne为change
|
||||
## 1.0.3(2022-09-16)
|
||||
- 可以使用 uni-scss 控制主题色
|
||||
## 1.0.2(2022-06-30)
|
||||
- 优化 在 uni-forms 中的依赖注入方式
|
||||
## 1.0.1(2022-02-07)
|
||||
- 修复 multiple 为 true 时,v-model 的值为 null 报错的 bug
|
||||
## 1.0.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||
## 0.2.5(2021-08-23)
|
||||
- 修复 在uni-forms中 modelValue 中不存在当前字段,当前字段必填写也不参与校验的问题
|
||||
## 0.2.4(2021-08-17)
|
||||
- 修复 单选 list 模式下 ,icon 为 left 时,选中图标不显示的问题
|
||||
## 0.2.3(2021-08-11)
|
||||
- 修复 在 uni-forms 中重置表单,错误信息无法清除的问题
|
||||
## 0.2.2(2021-07-30)
|
||||
- 优化 在uni-forms组件,与label不对齐的问题
|
||||
## 0.2.1(2021-07-27)
|
||||
- 修复 单选默认值为0不能选中的Bug
|
||||
## 0.2.0(2021-07-13)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 0.1.11(2021-07-06)
|
||||
- 优化 删除无用日志
|
||||
## 0.1.10(2021-07-05)
|
||||
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
|
||||
## 0.1.9(2021-07-05)
|
||||
- 修复 nvue 黑框样式问题
|
||||
## 0.1.8(2021-06-28)
|
||||
- 修复 selectedTextColor 属性不生效的Bug
|
||||
## 0.1.7(2021-06-02)
|
||||
- 新增 map 属性,可以方便映射text/value属性
|
||||
## 0.1.6(2021-05-26)
|
||||
- 修复 不关联服务空间的情况下组件报错的Bug
|
||||
## 0.1.5(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 0.1.4(2021-04-09)
|
||||
- 修复 nvue 下无法选中的问题
|
||||
## 0.1.3(2021-03-22)
|
||||
- 新增 disabled属性
|
||||
## 0.1.2(2021-02-24)
|
||||
- 优化 默认颜色显示
|
||||
## 0.1.1(2021-02-24)
|
||||
- 新增 支持nvue
|
||||
## 0.1.0(2021-02-18)
|
||||
- “暂无数据”显示居中
|
||||
@@ -0,0 +1,316 @@
|
||||
|
||||
const events = {
|
||||
load: 'load',
|
||||
error: 'error'
|
||||
}
|
||||
const pageMode = {
|
||||
add: 'add',
|
||||
replace: 'replace'
|
||||
}
|
||||
|
||||
const attrs = [
|
||||
'pageCurrent',
|
||||
'pageSize',
|
||||
'collection',
|
||||
'action',
|
||||
'field',
|
||||
'getcount',
|
||||
'orderby',
|
||||
'where'
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
listData: this.getone ? {} : [],
|
||||
paginationInternal: {
|
||||
current: this.pageCurrent,
|
||||
size: this.pageSize,
|
||||
count: 0
|
||||
},
|
||||
errorMessage: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let db = null;
|
||||
let dbCmd = null;
|
||||
|
||||
if(this.collection){
|
||||
this.db = uniCloud.database();
|
||||
this.dbCmd = this.db.command;
|
||||
}
|
||||
|
||||
this._isEnded = false
|
||||
|
||||
this.$watch(() => {
|
||||
let al = []
|
||||
attrs.forEach(key => {
|
||||
al.push(this[key])
|
||||
})
|
||||
return al
|
||||
}, (newValue, oldValue) => {
|
||||
this.paginationInternal.pageSize = this.pageSize
|
||||
|
||||
let needReset = false
|
||||
for (let i = 2; i < newValue.length; i++) {
|
||||
if (newValue[i] != oldValue[i]) {
|
||||
needReset = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (needReset) {
|
||||
this.clear()
|
||||
this.reset()
|
||||
}
|
||||
if (newValue[0] != oldValue[0]) {
|
||||
this.paginationInternal.current = this.pageCurrent
|
||||
}
|
||||
|
||||
this._execLoadData()
|
||||
})
|
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this._debugDataList = []
|
||||
if (!window.unidev) {
|
||||
window.unidev = {
|
||||
clientDB: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
unidev.clientDB.data.push(this._debugDataList)
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-TOUTIAO
|
||||
let changeName
|
||||
let events = this.$scope.dataset.eventOpts
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
let event = events[i]
|
||||
if (event[0].includes('^load')) {
|
||||
changeName = event[1][0][0]
|
||||
}
|
||||
}
|
||||
if (changeName) {
|
||||
let parent = this.$parent
|
||||
let maxDepth = 16
|
||||
this._changeDataFunction = null
|
||||
while (parent && maxDepth > 0) {
|
||||
let fun = parent[changeName]
|
||||
if (fun && typeof fun === 'function') {
|
||||
this._changeDataFunction = fun
|
||||
maxDepth = 0
|
||||
break
|
||||
}
|
||||
parent = parent.$parent
|
||||
maxDepth--;
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// if (!this.manual) {
|
||||
// this.loadData()
|
||||
// }
|
||||
},
|
||||
// #ifdef H5
|
||||
beforeDestroy() {
|
||||
if (process.env.NODE_ENV === 'development' && window.unidev) {
|
||||
let cd = this._debugDataList
|
||||
let dl = unidev.clientDB.data
|
||||
for (let i = dl.length - 1; i >= 0; i--) {
|
||||
if (dl[i] === cd) {
|
||||
dl.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
loadData(args1, args2) {
|
||||
let callback = null
|
||||
if (typeof args1 === 'object') {
|
||||
if (args1.clear) {
|
||||
this.clear()
|
||||
this.reset()
|
||||
}
|
||||
if (args1.current !== undefined) {
|
||||
this.paginationInternal.current = args1.current
|
||||
}
|
||||
if (typeof args2 === 'function') {
|
||||
callback = args2
|
||||
}
|
||||
} else if (typeof args1 === 'function') {
|
||||
callback = args1
|
||||
}
|
||||
|
||||
this._execLoadData(callback)
|
||||
},
|
||||
loadMore() {
|
||||
if (this._isEnded) {
|
||||
return
|
||||
}
|
||||
this._execLoadData()
|
||||
},
|
||||
refresh() {
|
||||
this.clear()
|
||||
this._execLoadData()
|
||||
},
|
||||
clear() {
|
||||
this._isEnded = false
|
||||
this.listData = []
|
||||
},
|
||||
reset() {
|
||||
this.paginationInternal.current = 1
|
||||
},
|
||||
remove(id, {
|
||||
action,
|
||||
callback,
|
||||
confirmTitle,
|
||||
confirmContent
|
||||
} = {}) {
|
||||
if (!id || !id.length) {
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: confirmTitle || '提示',
|
||||
content: confirmContent || '是否删除该数据',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (!res.confirm) {
|
||||
return
|
||||
}
|
||||
this._execRemove(id, action, callback)
|
||||
}
|
||||
})
|
||||
},
|
||||
_execLoadData(callback) {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.errorMessage = ''
|
||||
|
||||
this._getExec().then((res) => {
|
||||
this.loading = false
|
||||
const {
|
||||
data,
|
||||
count
|
||||
} = res.result
|
||||
this._isEnded = data.length < this.pageSize
|
||||
|
||||
callback && callback(data, this._isEnded)
|
||||
this._dispatchEvent(events.load, data)
|
||||
|
||||
if (this.getone) {
|
||||
this.listData = data.length ? data[0] : undefined
|
||||
} else if (this.pageData === pageMode.add) {
|
||||
this.listData.push(...data)
|
||||
if (this.listData.length) {
|
||||
this.paginationInternal.current++
|
||||
}
|
||||
} else if (this.pageData === pageMode.replace) {
|
||||
this.listData = data
|
||||
this.paginationInternal.count = count
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this._debugDataList.length = 0
|
||||
this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
|
||||
}
|
||||
// #endif
|
||||
}).catch((err) => {
|
||||
this.loading = false
|
||||
this.errorMessage = err
|
||||
callback && callback()
|
||||
this.$emit(events.error, err)
|
||||
})
|
||||
},
|
||||
_getExec() {
|
||||
let exec = this.db
|
||||
if (this.action) {
|
||||
exec = exec.action(this.action)
|
||||
}
|
||||
|
||||
exec = exec.collection(this.collection)
|
||||
|
||||
if (!(!this.where || !Object.keys(this.where).length)) {
|
||||
exec = exec.where(this.where)
|
||||
}
|
||||
if (this.field) {
|
||||
exec = exec.field(this.field)
|
||||
}
|
||||
if (this.orderby) {
|
||||
exec = exec.orderBy(this.orderby)
|
||||
}
|
||||
|
||||
const {
|
||||
current,
|
||||
size
|
||||
} = this.paginationInternal
|
||||
exec = exec.skip(size * (current - 1)).limit(size).get({
|
||||
getCount: this.getcount
|
||||
})
|
||||
|
||||
return exec
|
||||
},
|
||||
_execRemove(id, action, callback) {
|
||||
if (!this.collection || !id) {
|
||||
return
|
||||
}
|
||||
|
||||
const ids = Array.isArray(id) ? id : [id]
|
||||
if (!ids.length) {
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
|
||||
let exec = this.db
|
||||
if (action) {
|
||||
exec = exec.action(action)
|
||||
}
|
||||
|
||||
exec.collection(this.collection).where({
|
||||
_id: dbCmd.in(ids)
|
||||
}).remove().then((res) => {
|
||||
callback && callback(res.result)
|
||||
if (this.pageData === pageMode.replace) {
|
||||
this.refresh()
|
||||
} else {
|
||||
this.removeData(ids)
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.showModal({
|
||||
content: err.message,
|
||||
showCancel: false
|
||||
})
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
removeData(ids) {
|
||||
let il = ids.slice(0)
|
||||
let dl = this.listData
|
||||
for (let i = dl.length - 1; i >= 0; i--) {
|
||||
let index = il.indexOf(dl[i]._id)
|
||||
if (index >= 0) {
|
||||
dl.splice(i, 1)
|
||||
il.splice(index, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
_dispatchEvent(type, data) {
|
||||
if (this._changeDataFunction) {
|
||||
this._changeDataFunction(data, this._isEnded)
|
||||
} else {
|
||||
this.$emit(type, data, this._isEnded)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,853 @@
|
||||
<template>
|
||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||
<template v-if="!isLocal">
|
||||
<view class="uni-data-loading">
|
||||
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18"
|
||||
:content-text="contentText"></uni-load-more>
|
||||
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
|
||||
@change="change">
|
||||
<label class="checklist-box"
|
||||
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''"
|
||||
:checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
|
||||
class="checkbox__inner" :style="item.styleIcon">
|
||||
<view class="checkbox__inner-icon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="change">
|
||||
<label class="checklist-box"
|
||||
:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
|
||||
:checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||
:style="item.styleBackgroud">
|
||||
<view class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染 checkbox 和 radio
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} mode = [default| list | button | tag] 显示模式
|
||||
* @value default 默认横排模式
|
||||
* @value list 列表模式
|
||||
* @value button 按钮模式
|
||||
* @value tag 标签模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {Array|String|Number} value 默认值
|
||||
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
|
||||
* @property {Number|String} min 最小选择个数 ,multiple为true时生效
|
||||
* @property {Number|String} max 最大选择个数 ,multiple为true时生效
|
||||
* @property {Boolean} wrap 是否换行显示
|
||||
* @property {String} icon = [left|right] list 列表模式下icon显示位置
|
||||
* @property {Boolean} selectedColor 选中颜色
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
|
||||
* @property {Boolean} selectedTextColor 选中文本颜色,如不填写则自动显示
|
||||
* @property {Object} map 字段映射, 默认 map={text:'text',value:'value'}
|
||||
* @value left 左侧显示
|
||||
* @value right 右侧显示
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniDataChecklist',
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
emits: ['input', 'update:modelValue', 'change'],
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// TODO vue3
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
map: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
text: 'text',
|
||||
value: 'value'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
handler(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mixinDatacomResData(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
value(newVal) {
|
||||
this.dataList = this.getDataList(newVal)
|
||||
// fix by mehaotian is_reset 在 uni-forms 中定义
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem && this.formItem.setValue(newVal)
|
||||
// }
|
||||
},
|
||||
modelValue(newVal) {
|
||||
this.dataList = this.getDataList(newVal);
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem && this.formItem.setValue(newVal)
|
||||
// }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
range: [],
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
},
|
||||
isLocal: true,
|
||||
styles: {
|
||||
selectedColor: '#2979ff',
|
||||
selectedTextColor: '#666',
|
||||
},
|
||||
isTop: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataValue() {
|
||||
if (this.value === '') return this.modelValue
|
||||
if (this.modelValue === '') return this.value
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.form = this.getForm('uniForms')
|
||||
// this.formItem = this.getForm('uniFormsItem')
|
||||
// this.formItem && this.formItem.setValue(this.value)
|
||||
|
||||
// if (this.formItem) {
|
||||
// this.isTop = 6
|
||||
// if (this.formItem.name) {
|
||||
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem.setValue(this.dataValue)
|
||||
// }
|
||||
// this.rename = this.formItem.name
|
||||
// this.form.inputChildrens.push(this)
|
||||
// }
|
||||
// }
|
||||
|
||||
if (this.localdata && this.localdata.length !== 0) {
|
||||
this.isLocal = true
|
||||
this.range = this.localdata
|
||||
this.dataList = this.getDataList(this.getSelectedValue(this.range))
|
||||
} else {
|
||||
if (this.collection) {
|
||||
this.isLocal = false
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.mixinDatacomGet().then(res => {
|
||||
this.mixinDatacomResData = res.result.data
|
||||
if (this.mixinDatacomResData.length === 0) {
|
||||
this.isLocal = false
|
||||
this.mixinDatacomErrorMessage = this.emptyText
|
||||
} else {
|
||||
this.isLocal = true
|
||||
}
|
||||
}).catch(err => {
|
||||
this.mixinDatacomErrorMessage = err.message
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getForm(name = 'uniForms') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
change(e) {
|
||||
const values = e.detail.value
|
||||
|
||||
let detail = {
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
this.range.forEach(item => {
|
||||
|
||||
if (values.includes(item[this.map.value] + '')) {
|
||||
detail.value.push(item[this.map.value])
|
||||
detail.data.push(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const range = this.range.find(item => (item[this.map.value] + '') === values)
|
||||
if (range) {
|
||||
detail = {
|
||||
value: range[this.map.value],
|
||||
data: range
|
||||
}
|
||||
}
|
||||
}
|
||||
// this.formItem && this.formItem.setValue(detail.value)
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', detail.value);
|
||||
// // TOTO 兼容 vue3
|
||||
this.$emit('update:modelValue', detail.value);
|
||||
this.$emit('change', {
|
||||
detail
|
||||
})
|
||||
if (this.multiple) {
|
||||
// 如果 v-model 没有绑定 ,则走内部逻辑
|
||||
// if (this.value.length === 0) {
|
||||
this.dataList = this.getDataList(detail.value, true)
|
||||
// }
|
||||
} else {
|
||||
this.dataList = this.getDataList(detail.value)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取渲染的新数组
|
||||
* @param {Object} value 选中内容
|
||||
*/
|
||||
getDataList(value) {
|
||||
// 解除引用关系,破坏原引用关系,避免污染源数据
|
||||
let dataList = JSON.parse(JSON.stringify(this.range))
|
||||
let list = []
|
||||
if (this.multiple) {
|
||||
if (!Array.isArray(value)) {
|
||||
value = []
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(value) && value.length) {
|
||||
value = value[0]
|
||||
}
|
||||
}
|
||||
dataList.forEach((item, index) => {
|
||||
item.disabled = item.disable || item.disabled || false
|
||||
if (this.multiple) {
|
||||
if (value.length > 0) {
|
||||
let have = value.find(val => val === item[this.map.value])
|
||||
item.selected = have !== undefined
|
||||
} else {
|
||||
item.selected = false
|
||||
}
|
||||
} else {
|
||||
item.selected = value === item[this.map.value]
|
||||
}
|
||||
|
||||
list.push(item)
|
||||
})
|
||||
return this.setRange(list)
|
||||
},
|
||||
/**
|
||||
* 处理最大最小值
|
||||
* @param {Object} list
|
||||
*/
|
||||
setRange(list) {
|
||||
let selectList = list.filter(item => item.selected)
|
||||
let min = Number(this.min) || 0
|
||||
let max = Number(this.max) || ''
|
||||
list.forEach((item, index) => {
|
||||
if (this.multiple) {
|
||||
if (selectList.length <= min) {
|
||||
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||
if (have !== undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
if (selectList.length >= max && max !== '') {
|
||||
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||
if (have === undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setStyles(item, index)
|
||||
list[index] = item
|
||||
})
|
||||
return list
|
||||
},
|
||||
/**
|
||||
* 设置 class
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
*/
|
||||
setStyles(item, index) {
|
||||
// 设置自定义样式
|
||||
item.styleBackgroud = this.setStyleBackgroud(item)
|
||||
item.styleIcon = this.setStyleIcon(item)
|
||||
item.styleIconText = this.setStyleIconText(item)
|
||||
item.styleRightIcon = this.setStyleRightIcon(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取选中值
|
||||
* @param {Object} range
|
||||
*/
|
||||
getSelectedValue(range) {
|
||||
if (!this.multiple) return this.dataValue
|
||||
let selectedArr = []
|
||||
range.forEach((item) => {
|
||||
if (item.selected) {
|
||||
selectedArr.push(item[this.map.value])
|
||||
}
|
||||
})
|
||||
return this.dataValue.length > 0 ? this.dataValue : selectedArr
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置背景样式
|
||||
*/
|
||||
setStyleBackgroud(item) {
|
||||
let styles = {}
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
if (this.selectedColor) {
|
||||
if (this.mode !== 'list') {
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
}
|
||||
if (this.mode === 'tag') {
|
||||
styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
|
||||
}
|
||||
}
|
||||
let classles = ''
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleIcon(item) {
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
styles['background-color'] = item.selected ? selectedColor : '#fff'
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
|
||||
if (!item.selected && item.disabled) {
|
||||
styles['background-color'] = '#F2F6FC'
|
||||
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
|
||||
}
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleIconText(item) {
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
|
||||
if (this.mode === 'tag') {
|
||||
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#666'
|
||||
} else {
|
||||
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#666'
|
||||
}
|
||||
if (!item.selected && item.disabled) {
|
||||
styles.color = '#999'
|
||||
}
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleRightIcon(item) {
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.mode === 'list') {
|
||||
styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
|
||||
return classles
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #2979ff !default;
|
||||
$border-color: #DCDFE6;
|
||||
$disable: 0.4;
|
||||
|
||||
@mixin flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-data-loading {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-data-checklist {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
flex: 1;
|
||||
|
||||
// 多选样式
|
||||
.checklist-group {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.is-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checklist-box {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
margin-right: 25px;
|
||||
|
||||
.hidden {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 文字样式
|
||||
.checklist-content {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.checklist-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.checkobx__list {
|
||||
border-right-width: 1px;
|
||||
border-right-color: #007aff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #007aff;
|
||||
border-bottom-style: solid;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
left: -5px;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 多选样式
|
||||
.checkbox__inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
/* #ifdef APP-NVUE */
|
||||
top: 2px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 1px;
|
||||
/* #endif */
|
||||
left: 5px;
|
||||
height: 8px;
|
||||
width: 4px;
|
||||
border-right-width: 1px;
|
||||
border-right-color: #fff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #fff;
|
||||
border-bottom-style: solid;
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 单选样式
|
||||
.radio__inner {
|
||||
@include flex;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.radio__inner-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认样式
|
||||
&.is--default {
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中
|
||||
&.is-checked {
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
.checkbox__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
&.is--button {
|
||||
margin-right: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px $border-color solid;
|
||||
border-radius: 3px;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
border: 1px #eee solid;
|
||||
opacity: $disable;
|
||||
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签样式
|
||||
&.is--tag {
|
||||
margin-right: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px $border-color solid;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.checklist-text {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
background-color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
|
||||
.checklist-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表样式
|
||||
&.is--list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 10px 15px;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
&.is-list-border {
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.checklist-content {
|
||||
.checkobx__list {
|
||||
opacity: 1;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
.checkbox__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/uni-data-checkbox/package.json
Normal file
87
uni_modules/uni-data-checkbox/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-data-checkbox",
|
||||
"displayName": "uni-data-checkbox 数据选择器",
|
||||
"version": "1.0.6",
|
||||
"description": "通过数据驱动的单选框和复选框",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"checkbox",
|
||||
"单选",
|
||||
"多选",
|
||||
"单选多选"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-load-more","uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
uni_modules/uni-data-checkbox/readme.md
Normal file
18
uni_modules/uni-data-checkbox/readme.md
Normal file
@@ -0,0 +1,18 @@
|
||||
|
||||
|
||||
## DataCheckbox 数据驱动的单选复选框
|
||||
> **组件名:uni-data-checkbox**
|
||||
> 代码块: `uDataCheckbox`
|
||||
|
||||
|
||||
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括:
|
||||
|
||||
1. 数据绑定型组件:给本组件绑定一个data,会自动渲染一组候选内容。再以往,开发者需要编写不少代码实现类似功能
|
||||
2. 自动的表单校验:组件绑定了data,且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范,搭配使用会自动实现表单校验
|
||||
3. 本组件合并了单选多选
|
||||
4. 本组件有若干风格选择,如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件,样式代码虽然不用自己写了,却会牺牲一定的样式自定义性
|
||||
|
||||
在uniCloud开发中,`DB Schema`中配置了enum枚举等类型后,在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中,会自动生成``uni-data-checkbox``组件并绑定好data
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
Reference in New Issue
Block a user