Skip to content

蒋秀川 / miniProject

Go to a project
Commit 81b755f5 by 陈岩
Options

feat: 小程序平台适配

1 parent 27b4c708
Inline Side-by-side
Showing 7 changed files with 1199 additions and 201 deletions
h5/src/router/index.js
...@@ -18,12 +18,17 @@ const routes = [ ...@@ -18,12 +18,17 @@ const routes = [
name: "AreaHeatMap", name: "AreaHeatMap",
component: () => import("@/views/areaHeat/index.vue"), component: () => import("@/views/areaHeat/index.vue"),
}, },
{
path: "/demo",
name: "Demo",
component: () => import("@/views/demo/index.vue"),
},
]; ];
// const isDev = process.env.NODE_ENV === "development"; // const isDev = process.env.NODE_ENV === "development";
const router = createRouter({ const router = createRouter({
// history: createWebHistory(!isDev ? "/apph5/" : ""), // history: createWebHistory(!isDev ? "/apph5/" : ""),
history: createWebHistory('/apph5/'), history: createWebHistory("/apph5/"),
routes, routes,
}); });
......
h5/src/static/css/index.css
...@@ -214,6 +214,7 @@ body.succ { ...@@ -214,6 +214,7 @@ body.succ {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
overflow-y: auto;
} }
.touchmove { .touchmove {
overflow: auto; overflow: auto;
......
h5/src/views/areaHeat/index.vue
<!-- <template>
<div class="heat-map-container">
<div class="heat-map" style="background-color: #f00">
<div class="canvas">
<img
:src="floorImage"
class="editFloorimg"
id="editFloorimg"
style="width: 100%"
/>
<canvas class="canvas-position" id="canvas-position"></canvas>
</div>
</div>
</div>
</template>
<script setup>
import { watch, ref, onMounted } from "vue";
import { Toast } from "vant";
import { useRoute } from "vue-router";
import heatmap from "@/api/heatMap";
/************** 图片相关 **************/
const $route = useRoute();
const floorImage = ref(""); // 楼层图片
const startDate = ref(""); // 开始日期
const endDate = ref(""); // 结束日期
const getFloorImage = async () => {
try {
const { data } = await heatmap.getStoreDataApi(storeId.value);
if (data.code === 200) {
return data.data?.mallPlan || "";
}
return "";
} catch (error) {
return "";
}
};
watch(
() => $route.query,
async (newVal) => {
const { token, mallId, startDate: sDate, endDate: eDate, key } = newVal;
if (token) {
window.localStorage.setItem("atoken", token);
}
startDate.value = sDate;
endDate.value = eDate;
Toast(startDate.value, endDate.value);
if (mallId) {
indicatorKey.value = key;
storeId.value = mallId;
const url = await getFloorImage();
if (!url) {
Toast.fail("未找到门店平面图");
return false;
}
floorImage.value = `https://store.keliuyun.com/images/${url}`;
// getFloorImage();
// if (floorImage.value) {
// getChannelList(mallId);
// }
}
},
{ immediate: true }
);
</script>
<style>
.canvas {
position: relative;
width: 100%;
}
.canvas .canvas-position {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.color-legend {
height: 70px;
margin-top: 30px;
}
.color-box {
float: left;
position: relative;
}
.color-block {
float: left;
width: 60px;
height: 40px;
}
.color-text {
width: 100%;
text-align: center;
font-size: 1em;
left: -15px;
position: absolute;
}
</style> -->
<template> <template>
<div class="heat-map-container"> <div class="heat-map-container">
<div class="heat-map" style="background-color: #fff"> <div class="heat-map" style="background-color: #fff">
......
h5/src/views/demo/demo.js 0 → 100644
const js = {
appid: "__UNI__XXXXXX，创建应用时云端分配的，不要修改。",
name: "应用名称，如uni-app",
description: "应用描述",
versionName: "1.0.0",
versionCode: "100",
uniStatistics: {
enable: false,
},
"app-plus": {
allowsInlineMediaPlayback: true, //可选，Boolean类型, 是否允许 h5 中视频非全屏播放，3.8.5版本开始默认值为 true （仅iOS生效）
mediaPlaybackRequiresUserAction: false, //可选，Boolean类型,可通过此属性配置 h5中的音视频是否可通过API自动播放，注意当设置为 false 时允许API控制自动播放，3.8.5版本开始默认值为 false（仅iOS生效 3.0.1 + 版本支持）
nvueCompiler: "weex", //可选，字符串类型，nvue页面编译模式，可取值uni-app、weex，参考：https://ask.dcloud.net.cn/article/36074
nvueStyleCompiler: "weex", //可选，字符串类型，nvue页面样式编译模式，可取值uni-app、weex，参考：https://ask.dcloud.net.cn/article/38751
renderer: "native", //可选，字符串类型，可不加载基于 webview 的运行框架，可取值native
compilerVersion: 2, //可选，数字类型，编译器版本，可取值2、3，参考：https://ask.dcloud.net.cn/article/36599
nvueLaunchMode: "normal", //可选，字符串类型，nvue首页启动模式，compilerVersion值为3时生效，可取值normal、fast，参考：https://ask.dcloud.net.cn/article/36749
nvue: {
//可选，JSON对象，nvue页面相关配置
"flex-direction": "row", //可选，字符串类型，nvue页面的flex-direction默认值，可取值row、row-reverse、column、column-reverse
},
optimization: {
//可选，JSON对象，分包配置
subPackages: true, //可选，Boolean类型，是否开启分包优化，参考：https://uniapp.dcloud.io/collocation/pages.html#subpackages
},
uniStatistics: {
//可选，JSON对象，uni统计配置
enable: true, //可选，Boolean类型，是否开启uni统计
},
screenOrientation: [
//可选，字符串数组类型，应用支持的横竖屏
"portrait-primary", //可选，字符串类型，支持竖屏
"portrait-secondary", //可选，字符串类型，支持反向竖屏
"landscape-primary", //可选，字符串类型，支持横屏
"landscape-secondary", //可选，字符串类型，支持反向横屏
],
splashscreen: {
//可选，JSON对象，splash界面配置
alwaysShowBeforeRender: true, //可选，Boolean类型，是否等待首页渲染完毕后再关闭启动界面
autoclose: true, //可选，Boolean类型，是否自动关闭启动界面
waiting: true, //可选，Boolean类型，是否在程序启动界面显示等待雪花
event: "loaded", //可选，字符串类型，可取值titleUpdate、rendering、loaded，uni-app项目已废弃
target: "defalt", //可选，字符串类型，可取值default、second，uni-app项目已废弃
dealy: 0, //可选，数字类型，延迟自动关闭启动时间，单位为毫秒，uni-app项目已废弃
ads: {
//可选，JSON对象，开屏广告配置
backaground: "#RRGGBB", //可选，字符串类型，格式为#RRGGBB，开屏广告背景颜色
image: "", //可选，字符串类型，底部图片地址，相对应用资源目录路径
},
androidTranslucent: false, //可选，Boolean类型，使用“自定义启动图”启动界面时是否显示透明过渡界面，可解决点击桌面图标延时启动应用的效果
},
modules: {
//可选，JSON对象，使用的模块
Bluetooth: {
//可选，JSON对象，Bluetooth(低功耗蓝牙)
description: "低功耗蓝牙",
},
Contacts: {
//可选，JSON对象，Contact(通讯录)
description: "通讯录",
},
FaceID: {
//可选，JSON对象，FaceID(人脸识别)，仅iOS支持
description: "人脸识别",
},
Fingerprint: {
//可选，JSON对象，Fingerprint(指纹识别)
description: "指纹识别",
},
Geolocation: {
//可选，JSON对象，Geolocation(定位)
description: "定位",
},
iBeacon: {
//可选，JSON对象，iBeacon
description: "iBeacon",
},
LivePusher: {
//可选，JSON对象，LivePusher(直播推流)
description: "直播推流",
},
Maps: {
//可选，JSON对象，Maps(地图)
description: "地图",
},
Messaging: {
//可选，JSON对象，Messaging(短彩邮件消息)
description: "短彩邮件消息",
},
OAuth: {
//可选，JSON对象，OAuth(登录鉴权)
description: "登录鉴权",
},
Payment: {
//可选，JSON对象，Payment(支付)
description: "iBeacon",
},
Push: {
//可选，JSON对象，Push(消息推送)
description: "iBeacon",
},
Share: {
//可选，JSON对象，Share(分享)
description: "iBeacon",
},
Speech: {
//可选，JSON对象，Speech(语音输入)
description: "iBeacon",
},
Statistic: {
//可选，JSON对象，Statistic(统计)
description: "iBeacon",
},
SQLite: {
//可选，JSON对象，SQLite(统计)
description: "iBeacon",
},
VideoPlayer: {
//可选，JSON对象，VideoPlayer(视频播放)
description: "iBeacon",
},
"Webview-x5": {
//可选，JSON对象，Android X5 Webview(腾讯TBS)，仅Android支持
description: "iBeacon",
},
UIWebview: {
//可选，JSON对象，UIWebview，仅iOS支持
description: "iBeacon",
},
},
webView: {
// 3.5.0 + 当系统webview低于指定版本时，会弹出提示。或者下载x5内核后继续启动，仅Android支持
minUserAgentVersion: "95.0.4638.75", // 最小webview版本
x5: {
// 此属性需要勾选 Android X5 Webview 模块，详细参见下面的说明
timeOut: 3000, // 超时时间
showTipsWithoutWifi: true, // 是否在非WiFi网络环境时，显示用户确认下载x5内核的弹窗。
allowDownloadWithoutWiFi: false, // 是否允许用户在非WiFi网络时进行x5内核的下载。（如果为true，就不会显示用户确认的弹窗。）
},
},
checkPermissionDenied: false, // 是否校验已拒绝权限 如果拒绝则不会再申请 默认false 不校验已拒绝权限
distribute: {
//必选，JSON对象，云端打包配置
android: {
//可选，JSON对象，Android平台云端打包配置
packagename: "", //必填，字符串类型，Android包名
keystore: "", //必填，字符串类型，Android签名证书文件路径
password: "", //必填，字符串类型，Android签名证书文件的密码
aliasname: "", //必填，字符串类型，Android签名证书别名
schemes: "", //可选，字符串类型，参考：https://uniapp.dcloud.io/tutorial/app-android-schemes
abiFilters: [
//可选，字符串数组类型，参考：https://uniapp.dcloud.io/tutorial/app-android-abifilters
"armeabi-v7a",
"arm64-v8a",
"x86",
"x86_64",
],
permissions: [
//可选，字符串数组类型，Android权限配置
'<uses-feature android:name="android.hardware.camera"/>',
],
custompermissions: false, //可选，Boolean类型，是否自定义Android权限配置
permissionExternalStorage: {
//可选，JSON对象，Android平台应用启动时申请读写手机存储权限策略
request: "always", //必填，字符串类型，申请读写手机存储权限策略，可取值none、once、always
prompt: "", //可选，字符串类型，当request设置为always值用户拒绝时弹出提示框上的内容
},
permissionPhoneState: {
//可选，JSON对象，Android平台应用启动时申请读取设备信息权限配置
request: "always", //必填，字符串类型，申请读取设备信息权限策略，可取值none、once、always
prompt: "", //可选，字符串类型，当request设置为always值用户拒绝时弹出提示框上的内容
},
minSdkVersion: 21, //可选，数字类型，Android平台最低支持版本，参考：https://uniapp.dcloud.io/tutorial/app-android-minsdkversion
targetSdkVersion: 30, //可选，数字类型，Android平台目标版本，参考：https://uniapp.dcloud.io/tutorial/app-android-targetsdkversion
enableResourceOptimizations: false, // 可选，Boolean类型，是否开启Android原生res资源文件优化
aaptOptions: [
//可选，字符串数组类型，Android平台云端打包时build.gradle的packagingOptions配置项
"noCompress 'png', 'jpg', 'jpeg'",
],
buildFeatures: {
//（HBuilderX3.5.0+版本支持）可选，JSON对象，Android平台云端打包时build.gradle的buildFeatures配置项
dataBinding: false, //可选，Boolean类型，是否设置dataBinding
viewBinding: false, //可选，Boolean类型，是否设置viewBinding
},
packagingOptions: [
//可选，字符串数组类型，Android平台云端打包时build.gradle的packagingOptions配置项
"doNotStrip '*/armeabi-v7a/*.so'",
"merge '**/LICENSE.txt'",
],
jsEngine: "v8", //可选，字符串类型，uni-app使用的JS引擎，可取值v8、jsc
debuggable: false, //可选，Boolean类型，是否开启Android调试开关
locale: "default", //可选，应用的语言
forceDarkAllowed: false, //可选，Boolean类型，是否强制允许暗黑模式
resizeableActivity: false, //可选，Boolean类型，是否支持分屏调整窗口大小
hasTaskAffinity: false, //可选，Boolean类型，是否设置android：taskAffinity
},
ios: {
//可选，JSON对象，iOS平台云端打包配置
appid: "", //必填，字符串类型，iOS平台Bundle ID
mobileprovision: "", //必填，字符串类型，iOS打包使用的profile文件路径
p12: "", //必填，字符串类型，iOS打包使用的证书文件路径
password: "", //必填，字符串类型，iOS打包使用的证书密码
devices: "iphone", //必填，字符串类型，iOS支持的设备类型，可取值iphone、ipad、universal
urlschemewhitelist: "baidumap", //可选，字符串类型，应用访问白名单列表，参考：https://uniapp.dcloud.io/tutorial/app-ios-schemewhitelist
urltypes: "", //可选，字符串类型，参考：https://uniapp.dcloud.io/tutorial/app-ios-schemes
UIBackgroundModes: "audio", //可选，字符串类型，应用后台运行模式，参考：https://uniapp.dcloud.io/tutorial/app-ios-uibackgroundmodes
frameworks: [
//可选，字符串数组类型，依赖的系统库，已废弃，推荐使用uni原生插件扩展使用系统依赖库
"CoreLocation.framework",
],
deploymentTarget: "10.0", //可选，字符串类型，iOS支持的最低版本
privacyDescription: {
//可选，JSON对象，iOS隐私信息访问的许可描述
NSPhotoLibraryUsageDescription: "", //可选，字符串类型，系统相册读取权限描述
NSPhotoLibraryAddUsageDescription: "", //可选，字符串类型，系统相册写入权限描述
NSCameraUsageDescription: "", //可选，字符串类型，摄像头使用权限描述
NSMicrophoneUsageDescription: "", //可选，字符串类型，麦克风使用权限描述
NSLocationWhenInUseUsageDescription: "", //可选，字符串类型，运行期访问位置权限描述
NSLocationAlwaysUsageDescription: "", //可选，字符串类型，后台运行访问位置权限描述
NSLocationAlwaysAndWhenInUseUsageDescription: "", //可选，字符串类型，运行期后后台访问位置权限描述
NSCalendarsUsageDescription: "", //可选，字符串类型，使用日历权限描述
NSContactsUsageDescription: "", //可选，字符串类型，使用通讯录权限描述
NSBluetoothPeripheralUsageDescription: "", //可选，字符串类型，使用蓝牙权限描述
NSBluetoothAlwaysUsageDescription: "", //可选，字符串类型，后台使用蓝牙权限描述
NSSpeechRecognitionUsageDescription: "", //可选，字符串类型，系统语音识别权限描述
NSRemindersUsageDescription: "", //可选，字符串类型，系统提醒事项权限描述
NSMotionUsageDescription: "", //可选，字符串类型，使用运动与健康权限描述
NSHealthUpdateUsageDescription: "", //可选，字符串类型，使用健康更新权限描述
NSHealthShareUsageDescription: "", //可选，字符串类型，使用健康分享权限描述
NSAppleMusicUsageDescription: "", //可选，字符串类型，使用媒体资料库权限描述
NFCReaderUsageDescription: "", //可选，字符串类型，使用NFC权限描述
NSHealthClinicalHealthRecordsShareUsageDescription: "", //可选，字符串类型，访问临床记录权限描述
NSHomeKitUsageDescription: "", //可选，字符串类型，访问HomeKit权限描述
NSSiriUsageDescription: "", //可选，字符串类型，访问Siri权限描述
NSFaceIDUsageDescription: "", //可选，字符串类型，使用FaceID权限描述
NSLocalNetworkUsageDescription: "", //可选，字符串类型，访问本地网络权限描述
NSUserTrackingUsageDescription: "", //可选，字符串类型，跟踪用户活动权限描述
},
idfa: true, //可选，Boolean类型，是否使用广告标识
capabilities: {
// 可选，JSON对象，配置应用的capabilities数据（根据XCode规范分别配置到entitlements和plist文件中）
entitlements: {
// 合并到工程entitlements文件的数据（json格式）
},
plists: {
// 合并到工程Info.plist文件的数据（json格式）
},
},
CFBundleName: "HBuilder", //可选，字符串类型，CFBundleName名称
validArchitectures: [
//可选，字符串数组类型，编译时支持的CPU指令，可取值arm64、arm64e、armv7、armv7s、x86_64
"arm64",
],
pushRegisterMode: "manual", //可选，使用“Push(消息推送)”模块时申请系统推送权限模式，manual表示调用push相关API时申请，其它值表示应用启动时自动申请
privacyRegisterMode: "manual", //可选，仅iOS有效，设置为manual表示用户同意隐私政策后才获取idfv，设置为其它值表示应用启动时自动获取
},
sdkConfigs: {
//可选，JSON对象，三方SDK相关配置
geolocation: {
//可选，JSON对象，Geolocation(定位)模块三方SDK配置
system: {
//可选，JSON对象，使用系统定位
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
},
amap: {
//可选，JSON对象，使用高德定位SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
appkey_ios: "", //必填，字符串类型，iOS平台高德定位appkey
appkey_android: "", //必填，字符串类型，Android平台高德定位appkey
},
baidu: {
//可选，JSON对象，使用百度定位SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
appkey_ios: "", //必填，字符串类型，iOS平台百度定位appkey
appkey_android: "", //必填，字符串类型，Android平台百度定位appkey
},
},
maps: {
//可选，JSON对象，Maps(地图)模块三方SDK配置
amap: {
//可选，JSON对象，使用高德地图SDK配置
appkey_ios: "", //必填，字符串类型，iOS平台高德地图appkey
appkey_android: "", //必填，字符串类型，Android平台高德地图appkey
},
baidu: {
//可选，JSON对象，使用百度地图SDK配置
appkey_ios: "", //必填，字符串类型，iOS平台百度地图appkey
appkey_android: "", //必填，字符串类型，Android平台百度地图appkey
},
google: {
//可选，JSON对象，使用Google地图SDK配置
APIKey_ios: "", //必填，字符串类型，iOS平台Google地图APIKey
APIKey_android: "", //必填，字符串类型，Android平台Google地图APIKey
},
},
oauth: {
//可选，JSON对象，OAuth(登录鉴权)模块三方SDK配置
univerify: {
//可选，JSON对象，使用一键登录(univerify)SDK配置，无需手动配置参数，云端打包自动获取配置参数
},
apple: {
//可选，JSON对象，使用苹果登录(Sign in with Apple)SDK配置，无配置参数，仅iOS平台支持
},
weixin: {
//可选，JSON对象，使用微信登录SDK配置
appid: "", //必填，字符串类型，微信开放平台申请的appid
appsecret: "", //必填，字符串类型，微信开放平台申请的appsecret
UniversalLinks: "", //可选，字符串类型，微信开放平台配置的iOS平台通用链接
},
qq: {
//可选，JSON对象，使用QQ登录SDK配置
appid: "", //必填，字符串类型，QQ开放平台申请的appid
UniversalLinks: "", //可选，字符串类型，QQ开放平台配置的iOS平台通用链接
},
sina: {
//可选，JSON对象，使用新浪微博登录SDK配置
appkey: "", //必填，字符串类型，新浪微博开放平台申请的appid
redirect_uri: "", //必填，字符串类型，新浪微博开放平台配置的redirect_uri
UniversalLinks: "", //可选，字符串类型，新浪微博开放平台配置的iOS平台通用链接
},
google: {
//可选，JSON对象，使用Google登录SDK配置
clientid: "", //必填，字符串类型，Google开发者后台申请的clientid
},
facebook: {
//可选，JSON对象，使用Facebook登录SDK配置
appid: "", //必填，字符串类型，Facebook开发者后台申请的appid
},
},
payment: {
//可选，JSON对象，Payment(支付)模块三方SDK配置
appleiap: {
//可选，JSON对象，使用Apple应用内支付配置，无配置参数，仅iOS平台支持
},
alipay: {
//可选，JSON对象，使用支付宝支付SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
},
weixin: {
//可选，JSON对象，使用微信支付SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
appid: "", //必填，字符串类型，微信开放平台申请的appid
UniversalLinks: "", //可选，字符串类型，微信开放平台配置的iOS平台通用链接
},
paypal: {
//可选，JSON对象，使用paypal支付SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
returnURL_ios: "", //必填，字符串类型，paypa开发者者后台配置的iOS平台returnURL
returnURL_android: "", //必填，字符串类型，paypa开发者者后台配置的Android平台returnURL
},
stripe: {
//可选，JSON对象，使用stripe支付SDK配置
__platform__: ["ios", "android"], //可选，字符串数组类型，支持的平台
returnURL_ios: "", //必填，字符串类型，stripe开发者者后台配置的iOS平台returnURL
},
google: {
//可选，JSON对象，使用google支付SDK配置，无配置参数，仅Android平台支持
},
},
push: {
//可选，JSON对象，Push(消息推送)模块三方SDK配置
unipush: {
//可选，JSON对象，使用UniPush SDK配置，无需手动配置参数，云端打包自动获取配置参数
icons: {
//可选，JSON对象，推送图标配置
push: {
//可选，JSON对象，Push图标配置
ldpi: "", //可选，字符串类型，普通屏设备推送图标路径，分辨率要求48x48
mdpi: "", //可选，字符串类型，大屏设备设备推送图标路径，分辨率要求48x48
hdpi: "", //可选，字符串类型，高分屏设备推送图标路径，分辨率要求72x72
xdpi: "", //可选，字符串类型，720P高分屏设备推送图标路径，分辨率要求96x96
xxdpi: "", //可选，字符串类型，1080P高密度屏幕推送图标路径，分辨率要求144x144
xxxdpi: "", //可选，字符串类型，4K屏设备推送图标路径，分辨率要求192x192
},
small: {
//可选，JSON对象，Push小图标配置
ldpi: "", //可选，字符串类型，普通屏设备推送小图标路径，分辨率要求18x18
mdpi: "", //可选，字符串类型，大屏设备设备推送小图标路径，分辨率要求24x24
hdpi: "", //可选，字符串类型，高分屏设备推送小图标路径，分辨率要求36x36
xdpi: "", //可选，字符串类型，720P高分屏设备推送小图标路径，分辨率要求48x48
xxdpi: "", //可选，字符串类型，1080P高密度屏幕推送小图标路径，分辨率要求72x72
xxxdpi: "", //可选，字符串类型，4K屏设备推送小图标路径，分辨率要求96x96
},
},
},
igexin: {
//可选，JSON对象，使用个推推送SDK配置，**已废弃，推荐使用UniPush，UniPush是个推推送VIP版，功能更强大**
appid: "", //必填，字符串类型，个推开放平台申请的appid
appkey: "", //必填，字符串类型，个推开放平台申请的appkey
appsecret: "", //必填，字符串类型，个推开放平台申请的appsecret
icons: {
//可选，JSON对象，推送图标配置
push: {
//可选，JSON对象，Push图标配置
ldpi: "", //可选，字符串类型，普通屏设备推送图标路径，分辨率要求48x48
mdpi: "", //可选，字符串类型，大屏设备设备推送图标路径，分辨率要求48x48
hdpi: "", //可选，字符串类型，高分屏设备推送图标路径，分辨率要求72x72
xdpi: "", //可选，字符串类型，720P高分屏设备推送图标路径，分辨率要求96x96
xxdpi: "", //可选，字符串类型，1080P高密度屏幕推送图标路径，分辨率要求144x144
xxxdpi: "", //可选，字符串类型，4K屏设备推送图标路径，分辨率要求192x192
},
small: {
//可选，JSON对象，Push小图标配置
ldpi: "", //可选，字符串类型，普通屏设备推送小图标路径，分辨率要求18x18
mdpi: "", //可选，字符串类型，大屏设备设备推送小图标路径，分辨率要求24x24
hdpi: "", //可选，字符串类型，高分屏设备推送小图标路径，分辨率要求36x36
xdpi: "", //可选，字符串类型，720P高分屏设备推送小图标路径，分辨率要求48x48
xxdpi: "", //可选，字符串类型，1080P高密度屏幕推送小图标路径，分辨率要求72x72
xxxdpi: "", //可选，字符串类型，4K屏设备推送小图标路径，分辨率要求96x96
},
},
},
},
share: {
//可选，JSON对象，Share(分享)模块三方SDK配置
weixin: {
//可选，JSON对象，使用微信分享SDK配置
appid: "", //必填，字符串类型，微信开放平台申请的appid
UniversalLinks: "", //可选，字符串类型，微信开放平台配置的iOS平台通用链接
},
qq: {
//可选，JSON对象，使用QQ分享SDK配置
appid: "", //必填，字符串类型，QQ开放平台申请的appid
UniversalLinks: "", //可选，字符串类型，QQ开放平台配置的iOS平台通用链接
},
sina: {
//可选，JSON对象，使用新浪微博分享SDK配置
appkey: "", //必填，字符串类型，新浪微博开放平台申请的appid
redirect_uri: "", //必填，字符串类型，新浪微博开放平台配置的redirect_uri
UniversalLinks: "", //可选，字符串类型，新浪微博开放平台配置的iOS平台通用链接
},
},
speech: {
//可选，JSON对象，Speech(语音识别)模块三方SDK配置
baidu: {
//可选，JSON对象，使用百度语音识别SDK配置
appid: "", //必填，字符串类型，百度开放平台申请的appid
apikey: "", //必填，字符串类型，百度开放平台申请的apikey
secretkey: "", //必填，字符串类型，百度开放平台申请的secretkey
},
},
statics: {
//可选，JSON对象，Statistic(统计)模块三方SDK配置
umeng: {
//可选，JSON对象，使用友盟统计SDK配置
appkey_ios: "", //必填，字符串类型，友盟统计开放平台申请的iOS平台appkey
channelid_ios: "", //可选，字符串类型，友盟统计iOS平台的渠道标识
appkey_android: "", //必填，字符串类型，友盟统计开放平台申请的Android平台appkey
channelid_android: "", //可选，字符串类型，友盟统计Android平台的渠道标识
},
google: {
//可选，JSON对象，使用Google Analytics for Firebase配置
config_ios: "", //必填，字符串类型，Google Firebase统计开发者后台获取的iOS平台配置文件路径
config_android: "", //必填，字符串类型，Google Firebase统计开发者后台获取的Android平台配置文件路径
},
},
ad: {
//可选，JSON对象，uni-AD配置
360: {
//可选，JSON对象，使用360广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
csj: {
//可选，JSON对象，使用今日头条穿山甲广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
gdt: {
//可选，JSON对象，使用腾讯优量汇广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
ks: {
//可选，JSON对象，使用快手广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
"ks-content": {
//可选，JSON对象，使用快手内容联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
sigmob: {
//可选，JSON对象，使用Sigmob广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
hw: {
//可选，JSON对象，使用华为广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
bd: {
//可选，JSON对象，使用百度百青藤广告联盟SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
"BXM-AD": {
//可选，JSON对象，使用互动游戏(变现猫)SDK，无需手动配置，在uni-AD后台申请开通后自动获取配置参数
},
},
},
icons: {
//可选，JSON对象，应用图标相关配置
ios: {
//可选，JSON对象，iOS平台图标配置
appstore: "", //必填，字符串类型，分辨率1024x1024, 提交app sotre使用的图标路径
iphone: {
//可选，JSON对象，iPhone设备图标配置
"app@2x": "", //可选，字符串类型，分辨率120x120，程序图标路径
"app@3x": "", //可选，字符串类型，分辨率180x180，程序图标路径
"spotlight@2x": "", //可选，字符串类型，分辨率80x80，Spotlight搜索图标路径
"spotlight@3x": "", //可选，字符串类型，分辨率120x120，Spotlight搜索图标路径
"settings@2x": "", //可选，字符串类型，分辨率58x58，Settings设置图标路径
"settings@3x": "", //可选，字符串类型，分辨率87x87，Settings设置图标路径
"notification@2x": "", //可选，字符串类型，分辨率40x40，通知栏图标路径
"notification@3x": "", //可选，字符串类型，分辨率60x60，通知栏图标路径
},
ipad: {
//可选，JSON对象，iPad设备图标配置
app: "", //可选，字符串类型，分辨率76x76，程序图标图标路径
"app@2x": "", //可选，字符串类型，分辨率152x152，程序图标图标路径
"proapp@2x": "", //可选，字符串类型，分辨率167x167，程序图标图标路径
spotlight: "", //可选，字符串类型，分辨率40x40，Spotlight搜索图标路径
"spotlight@2x": "", //可选，字符串类型，分辨率80x80，Spotlight搜索图标路径
settings: "", //可选，字符串类型，分辨率29x29，Settings设置图标路径
"settings@2x": "", //可选，字符串类型，分辨率58x58，Settings设置图标路径
notification: "", //可选，字符串类型，分辨率20x20，通知栏图标路径
"notification@2x": "", //可选，字符串类型，分辨率740x40，通知栏图标路径
},
},
android: {
//可选，JSON对象，Android平台图标配置
ldpi: "", //可选，字符串类型，普通屏设备程序图标，分辨率要求48x48，已废弃
mdpi: "", //可选，字符串类型，大屏设备程序图标，分辨率要求48x48，已废弃
hdpi: "", //可选，字符串类型，高分屏设备程序图标，分辨率要求72x72
xhdpi: "", //可选，字符串类型，720P高分屏设备程序图标，分辨率要求96x96
xxhdpi: "", //可选，字符串类型，1080P高分屏设备程序图标，分辨率要求144x144
xxxhdpi: "", //可选，字符串类型，2K屏设备程序图标，分辨率要求192x192
},
},
splashscreen: {
//可选，JSON对象，启动界面配置
iosStyle: "common", //可选，字符串类型，iOS平台启动界面样式，可取值common、default、storyboard
ios: {
//可选，JSON对象，iOS平台启动界面配置
storyboard: "", //可选，字符串类型，自定义storyboard启动界面文件路径，iosStyle值为storyboard时生效
iphone: {
//可选，JSON对象，iPhone设备启动图配置，iosStyle值为default时生效
default: "", //可选，字符串类型，分辨率320x480，iPhone3（G/GS）启动图片路径，已废弃
retina35: "", //可选，字符串类型，分辨率640x960，3.5英寸设备(iPhone4/4S)启动图片路径，已废弃
retina40: "", //可选，字符串类型，分辨率640x1136，4.0英寸设备(iPhone5/5S)启动图片路径
retina40l: "", //可选，字符串类型，分辨率1136x640，4.0英寸设备(iPhone5/5S)横屏启动图片路径
retina47: "", //可选，字符串类型，分辨率750x1334，4.7英寸设备（iPhone6/7/8）启动图片路径
retina47l: "", //可选，字符串类型，分辨率1334x750，4.7英寸设备（iPhone6/7/8）横屏启动图片路径
retina55: "", //可选，字符串类型，分辨率1242x2208，5.5英寸设备（iPhone6/7/8Plus）启动图片路径
retina55l: "", //可选，字符串类型，分辨率2208x1242，5.5英寸设备（iPhone6/7/8Plus）横屏启动图片路径
iphonex: "", //可选，字符串类型，分辨率1125x2436，5.8英寸设备（iPhoneX/XS）启动图片路径
iphonexl: "", //可选，字符串类型，分辨率2436x1125，5.8英寸设备（iPhoneX/XS）横屏启动图片路径
"portrait-896h@2x": "", //可选，字符串类型，分辨率828x1792，6.1英寸设备（iPhoneXR）启动图片路径
"landscape-896h@2x": "", //可选，字符串类型，分辨率1792x828，6.1英寸设备（iPhoneXR）iPhoneXR横屏启动图片路径
"portrait-896h@3x": "", //可选，字符串类型，分辨率1242x2688，6.5英寸设备（iPhoneXS Max）启动图片路径
"landscape-896h@3x": "", //可选，字符串类型，分辨率2688x1242，6.5英寸设备（iPhoneXS Max）横屏启动图片路径
},
ipad: {
//可选，JSON对象，iPad设备启动图配置，iosStyle值为default时生效
portrait: "", //可选，字符串类型，分辨率768x1004，iPad竖屏启动图片路径，已废弃
"portrait-retina": "", //可选，字符串类型，分辨率1536x2008，iPad高分屏竖屏启动图片路径，已废弃
landscape: "", //可选，字符串类型，分辨率1024x748，iPad横屏启动图片路径，已废弃
"landscape-retina": "", //可选，字符串类型，分辨率2048x1496，iPad高分屏横屏启动图片路径，已废弃
portrait7: "", //可选，字符串类型，分辨率768x1024，9.7/7.9英寸iPad/mini竖屏启动图片路径
landscape7: "", //可选，字符串类型，分辨率1024x768，9.7/7.9英寸iPad/mini横屏启动图片路径
"portrait-retina7": "", //可选，字符串类型，分辨率1536x2048，9.7/7.9英寸iPad/mini高分屏竖屏图片路径
"landscape-retina7": "", //可选，字符串类型，分辨率2048x1536，9.7/7.9英寸iPad/mini高分屏横屏启动图片路径
"portrait-1112h@2x": "", //可选，字符串类型，分辨率1668x2224，10.5英寸iPad Pro竖屏启动图片路径
"landscape-1112h@2x": "", //可选，字符串类型，分辨率2224x1668，10.5英寸iPad Pro横屏启动图片路径
"portrait-1194h@2x": "", //可选，字符串类型，分辨率1668x2388，11英寸iPad Pro竖屏启动图片路径
"landscape-1194h@2x": "", //可选，字符串类型，分辨率2388x1668，11英寸iPad Pro横屏启动图片路径
"portrait-1366h@2x": "", //可选，字符串类型，分辨率2048x2732，12.9英寸iPad Pro竖屏启动图片路径
"landscape-1366h@2x": "", //可选，字符串类型，分辨率2732x2048，12.9英寸iPad Pro横屏启动图片路径
},
},
androidStyle: "common", //可选，字符串类型，Android平台启动界面样式，可取值common、default
android: {
//可选，JSON对象，Android平台启动图片配置， androidStyle值为default时生效
ldpi: "", //可选，字符串类型，分辨率320x442，低密度屏幕启动图片路径，已废弃
mdpi: "", //可选，字符串类型，分辨率240x282，中密度屏幕启动图片路径，已废弃
hdpi: "", //可选，字符串类型，分辨率480x762，高密度屏幕启动图片路径
xhdpi: "", //可选，字符串类型，分辨率720x1242，720P高密度屏幕启动图片路径
xxhdpi: "", //可选，字符串类型，分辨率1080x1882，1080P高密度屏幕启动图片路径
},
},
orientation: [
//可选，字符串数组类型，应用支持的横竖屏，**已废弃，使用screenOrientation配置**
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary",
],
},
compatible: {
//可选，JSON对象，uni-app兼容模式
ignoreVersion: false, //可选，Boolean类型，是否忽略版本兼容检查提示
runtimeVersion: "", //可选，字符串类型，兼容的uni-app运行环境版本号，多个版本使用,分割
compilerVersion: "", //可选，字符串类型，兼容的编译器版本号
},
confusion: {
//可选，JSON对象，原生混淆加密配置，参考：https://uniapp.dcloud.io/tutorial/app-sec-confusion
description: "", //可选，字符串类型，原生混淆描述
resources: {
//必填，JSON对象，原生混淆文件配置
"js/common.js": {
//可选，JSON对象，键名为需要原生混淆的文件路径
},
},
},
channel: "", //可选，字符串类型，渠道标识
cers: {
//可选，JSON对象，应用的异常崩溃与错误报告系统配置
crash: true, //可选，Boolean类型，是否提交应用异常崩溃信息
},
cache: {
//可选，JSON对象，Webview窗口默认使用的缓存模式，uni-app项目已废弃
mode: "default", //可选，字符串类型，可取值default、cacheElseNetwork、noCache、cacheOnly
},
error: {
//可选，JSON对象，页面加载错误配置，uni-app项目仅对webview组件有效，参考：https://uniapp.dcloud.io/tutorial/app-webview-error
url: "", //必填，字符串类型，webview页面错误是跳转的页面地址
},
kernel: {
//可选，JSON对象，webview内核配置
ios: "WKWebview", //可选，iOS平台使用的webview类型，可取值WKWebview、UIWebview
recovery: "reload", //可选，iOS平台使用WKWebview时，内核崩溃后的处理逻辑，可取值restart、reload、none
},
launchwebview: {
//可选，JSON对象，应用首页相关配置，uni-app项目不建议手动修改
plusrequire: "normal", //可选，字符串类型，加载plus API时机，可取值ahead、normal、later、none
injection: false, //可选，Boolean类型，是否提前注入plus API
overrideresource: [
//可选，JSON对象数组，应用首页的拦截资源相关配置
{
match: "", //可选，字符串类型，匹配拦截的资源url地址的正则表达式
redirect: "", //可选，字符串类型，拦截资源的重定向地址
mime: "", //可选，字符串类型，拦截资源的数据类型mime
encoding: "", //可选，字符串类型，拦截资源的数据编码
header: {
//可选，JSON对象，拦截资源的http头数据
},
},
],
overrideurl: {
//可选，JSON对象，应用首页的拦截链接请求处理逻辑
mode: "reject", //可选，字符串类型，拦截模式，可取值allow、reject
match: "", //可选，字符串类型，匹配拦截规则，支持正则表达式
exclude: "none", //可选，字符串类型，排除拦截理规则，可取值none、redirect
},
replacewebapi: {
//可选，JSON对象，是否重写Web API实现相关配置
geolocation: "none", //可选，字符串类型，重写标准定位API，可取值none、alldevice、auto
},
subNViews: [
//可选，JSON对象数组，首页原生View相关配置，已废弃
{
id: "", //可选，字符串类型，原生View标识
styles: {
//可选，JSON对象，原生View样式
},
tags: [
//可选，JSON对象数组，原生View中包含的tag标签列表
{},
],
},
],
titleNView: {
//可选，JSON对象，标题栏相关配置
backgroundColor: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，标题栏背景颜色
titleText: "", //可选，字符串类型，标题栏标题文字内容
titleColor: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，标题栏标题文字颜色
titleSize: "17px", //可选，字符串类型，标题字体大小，默认大小为17px
autoBackButton: true, //可选，Boolean类型，是否显示标题栏上返回键
backButton: {
//可选，JSON对象，返回键样式
backgournd: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，返回按钮背景颜色
color: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，返回图标颜色
colorPressed: "#RRGGBB", //可选，字符串类型，#RRGGBB，返回图标按下时的颜色
},
buttons: [
//可选，JSON对象数组，标题栏按钮配置
{
color: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，按钮上的文字颜色
colorPressed: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，按钮按下状态的文字颜色
float: "right", //可选，字符串类型，按钮显示位置，可取值left、right
fontWeight: "normal", //可选，字符串类型，按钮上文字的粗细，可取值normal、bold
fontSize: "22px", //可选，字符串类型，按钮上文字的大小
fontSrc: "", //可选，字符串类型，按钮上文字使用的字体文件路径
text: "", //可选，字符串类型，按钮上显示的文字
},
],
splitLine: {
//可选，JSON对象，标题栏分割线样式
color: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，分割线颜色
height: "1px", //可选，字符串类型，分割线高度
},
},
statusbar: {
//可选，JSON对象，状态栏配置
background: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，沉浸式状态栏样式下系统状态栏背景颜色
},
top: "0px", //可选，字符串类型，Webview的顶部偏移量，支持px、%单位
height: "100%", //可选，字符串类型，Webview窗口高度，支持px、%单位
bottom: "0px", //可选，字符串类型，Webview的底部偏移量，仅在未同时设置top和height属性时生效
backButtonAutoControl: "none", //可选，字符串类型，运行环境自动处理返回键的控制逻辑，可取值none、hide、close
additionalHttpHeaders: {
//可选，JSON对象，额外添加HTTP请求头数据
},
},
nativePlugins: {
//可选，JSON数组对象，uni原生插件配置，参考：https://nativesupport.dcloud.net.cn/NativePlugin/use/use_local_plugin
"%UniPlugin-ID%": {
//可选，JSON对象，键名为插件标识，值为插件配置参数
},
},
popGesture: "none", //可选，字符串类型，窗口侧滑返回默认效果，可取值none、close、hide
runmode: "liberate", //可选，字符串类型，应用资源运行模式，可取值normal、liberate
safearea: {
//可选，JSON对象，安全区域配置
background: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，安全区域背景颜色
backgroundDark: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，暗黑模式安全区域背景颜色
bottom: {
//可选，JSON对象，底部安全区域配置
offset: "none", //可选，字符串类型，安全区域偏移值，可取值auto、none
},
left: {
//可选，JSON对象，左侧安全区域配置
offset: "none", //可选，字符串类型，安全区域偏移值，可取值auto、none
},
right: {
//可选，JSON对象，左侧安全区域配置
offset: "none", //可选，字符串类型，安全区域偏移值，可取值auto、none
},
},
softinput: {
//可选，JSON对象，软键盘相关配置
navBar: "auto", //可选，字符串类型，iOS平台软键盘上导航条的显示模式，可取值auto、none
auxiliary: false, //可选，Boolean类型，是否开启辅助输入功能
mode: "adjustResize", //可选，字符串类型，弹出系统软键盘模式，可取值adjustResize、adjustPan
},
ssl: {
//可选，JSON对象，ssl相关设置
untrustedca: "accept", //可选，字符串类型，https请求时服务器非受信证书的处理逻辑，可取值accept、refuse、warning
},
statusbar: {
//可选，JSON对象，应用启动后的系统状态栏相关配置
immersed: "none", //可选，字符串类型，沉浸式状态栏样式，可取值none、suggestedDevice、supportedDevice
style: "light", //可选，字符串类型，系统状态栏样式（前景颜色），可取值dark、light
background: "#RRGGBB", //可选，字符串类型，#RRGGBB格式，系统状态栏背景颜色
},
useragent: {
//可选，JSON对象，应用UserAgent相关配置，默认值为系统UserAgent，并添加 uni-app Html5Plus/1.0
value: "", //可选，字符串类型，设置的默认userAgent值
concatenate: false, //可选，Boolean类型，是否将value值作为追加值连接到系统默认userAgent值之后
},
useragent_android: {
//可选，JSON对象，Android平台应用UserAgent相关配置，优先级高于useragent配置
value: "", //可选，字符串类型，设置的默认userAgent值
concatenate: false, //可选，Boolean类型，是否将value值作为追加值连接到系统默认userAgent值之后
},
useragent_ios: {
//可选，JSON对象，iOS平台应用UserAgent相关配置，优先级高于useragent配置
value: "", //可选，字符串类型，设置的默认userAgent值
concatenate: false, //可选，Boolean类型，是否将value值作为追加值连接到系统默认userAgent值之后
},
},
quickapp: {},
"mp-weixin": {
appid: "wx开头的微信小程序appid",
uniStatistics: {
enable: false,
},
},
"mp-baidu": {
appid: "百度小程序appid",
},
"mp-toutiao": {
appid: "抖音小程序appid",
},
"mp-lark": {
appid: "飞书小程序appid",
},
h5: {
title: "演示",
template: "index.html",
router: {
mode: "history",
base: "/hello/",
},
async: {
loading: "AsyncLoading",
error: "AsyncError",
delay: 200,
timeout: 3000,
},
},
};
h5/src/views/demo/index.vue 0 → 100644
<!-- <template>
<div style="min-height: 100vh; overflow-y: auto">
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
<img
src="https://store.keliuyun.com/images/report/mallPic/0aaed22c-f882-11ee-9a44-11805ce6302a.png"
style="width: 100%"
alt=""
/>
</div>
</template>
<script lang="ts" setup>
if (window.plus) {
const web = plus.webview.create(
"xxx.html", //url:String类型,可选,新窗口加载的HTML页面地址.新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址.
"xxx", //id:String类型,可选,新窗口的标识.窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口.如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值.
{
//styles: WebviewStyles类型,可选,创建Webview窗口的样式(如窗口宽、高、位置等信息)
width: "100%", //String类型,窗口的宽度.支持百分比、像素值，默认为100%.未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度.
height: "100%", //String类型,窗口的高度.支持百分比、像素值，默认为100%.当未设置height属性值时,优先通过top和bottom属性值来计算窗口的高度.
left: "0px", //String类型,窗口水平向右的偏移量.支持百分比,像素值,默认值为0px.未设置left属性值,优先通过right和width属性值来计算窗口的left位置.
right: "0px", //String类型,窗口水平向左的偏移量.支持百分比、像素值,默认无值(根据left和width属性值来自动计算).当设置了left和width值时,忽略此属性值;当未设置width值时,可通过left和bottom属性值来确定窗口的宽度.
top: "0px", //String类型,窗口垂直向下的偏移量.支持百分比、像素值，默认值为0px.未设置top属性值时,优先通过bottom和height属性值来计算窗口的top位置.
bottom: "0px", //String类型,窗口垂直向上的偏移量.支持百分比,像素值,默认值无值(根据top和height属性值来自动计算).当同时设置了top和height值时,忽略此属性值;当未设置height值时,可通过top和bottom属性值来确定窗口的高度.
zindex: 0, //Number类型,窗口的堆叠顺序值.拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面.
margin: "auto", //String类型,窗口的边距.用于定位窗口的位置.auto:居中.若设置了left、right、top、bottom则对应的边距值失效.
background: "", //String类型,窗口的背景颜色.设置background为颜色值,窗口为独占模式显示(占整个屏幕区域).设置background为"transparent",则表示窗口背景透明,为非独占模式.
opacity: 1, //Number类型,窗口的不透明度.0为全透明,1为不透明,默认值为1,即不透明.安卓4.0以下不支持.
mask: "none", //String类型,窗口的遮罩.用于设置Webview窗口的遮罩层样式,遮罩层会覆盖Webview中所有内容,包括子webview,并且截获webview的所有触屏事件,此时Webview窗口的点击操作会触发maskClick事件.字符串类型,可取值:rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明; "none",表示不使用遮罩层; 默认值为"none",即无遮罩层.
bounce: "vertical", //String类型,窗口遇到边框是否有反弹效果.none:没有反弹效果.vertical:垂直方向有反弹效果.horizontal:水平方向有反弹效果.all:垂直和水平方向都有反弹效果.默认:none.
bounceBackground: "", //String类型,窗口回弹效果区域的背景.窗口回弹效果区域背景可支持颜色值或图片.颜色值格式:"#RRGGBB".背景格式:"url(%image path%)",例如:"url(./icon.png)",图片采用平铺模式绘制.安卓不支持.
popGesture: "close", //String类型,窗口的侧滑返回功能.none:无侧滑返回功能.close:侧滑返回关闭Webview窗口.hide:侧滑返回隐藏webview窗口.安卓5+环境不支持.
scrollIndicator: "none", //String类型,窗口是否显示滚动条.all:垂直和水平滚动条都显示.vertical:仅显示垂直滚动条.horizontal:仅显示水平滚动条.none:垂直和水平滚动条都不显示.默认:all.注意:显示滚动条的前提条件是窗口中的内容超过窗口显示的宽或高.
scrollsToTop: true, //Boolean类型,点击设备的状态栏时是否滚动返回至顶部.true:点击设备的状态栏可以滚动返回至顶部.false:点击设备的状态栏不可以.默认:true.在iPhone上有且只有一个Webview窗口的scrollsToTop属性值为true时才生效,所以在显示和关闭Webview窗口时需动态更新所有Webview的scrollsToTop值,已确保此功能生效.安卓不支持.
scalable: false, //Boolean类型,窗口是否可缩放.true:用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点设置"name="viewport" content="user-scalable=no""来限制页面不可缩放.false:用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能.默认:false.
softinputMode: "", //String类型,弹出系统软键盘模式.adjustPan:弹出软键盘时Webview窗口自动上移,以保证当前输入框可见.adjustResize:自动调整Webview窗口大小(屏幕区域减去软键盘区域),同时自动滚动Webview保证输入框可见.默认:adjustPan.安卓不支持.
statusbar: {
background: "#fff",
}, //WebviewStatusbarStyles类型,窗口状态栏样式.仅在应用设置为沉浸式状态栏样式下有效,设置此属性后将自动保留系统状态栏区域不被Webview窗口占用(即Webview窗口非沉浸式样式显示).
subNViews: [
//Array[ WebviewSubNViewStyles ]类型,定义窗口的原生子View控件.数组类型,可通过配置项设置原生子View控件,每个配置项对应添加一个原生子View控件.通过Webview窗口的getSubNViews()方法可获取原生子View控件对象数组.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewSubNViewStyles
{
id: "", //String类型,原生子View控件的标识.可通过plus.nativeObj.View.getViewById(id)方法传入此标识来获取子View控件对象.
type: "", //String类型,原生子View控件类型.NView:原生子View控件(plus.nativeObj.NView).ImageSlider:原生图片轮播控件(plus.nativeObj.ImageSlider).默认:NView.
styles: {
//ViewStyles类型,原生子View控件的样式.可设置原生控件的位置、大小等信息.
backgroundColor: "", //String类型,区域背景颜色.颜色值格式为"#RRGGBB".默认值为透明区域.
bottom: "", //String类型,View控件垂直向上的偏移量.现对于父容器底部的距离,可取值:像素值,如"100px";百分比,如"10%",相对于父容器的高度,如果没有父容器则相对于屏幕高度.当设置了top和height值时,忽略此属性值;未设置height值时,可通过top和bottom属性值来确定View控件的高度.
dock: "", //String类型,View控件的停靠方式.当Webview窗口添加到另外一个窗口中时,停靠方式才会生效,采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容被子窗口盖住.top:控件停靠则页面顶部;bottom:底部;right:右侧;left:控件停靠在页面左侧.默认:top.
height: "", //String类型,区域的高度.可取值:像素值,如"100px";百分比,如"10%",相对于父容器的高度,如果没有父容器则相对于屏幕高度;内容自适应,如"wrap_content",根据内容计算控件的高度.默认值为"100%".
width: "", //String类型,区域的宽度.可取值:像素值,如"100px";百分比,如"10%",相对于父控件的宽度.
top: "", //String类型,View控件左上角的垂直偏移量.可取值:像素值,如"100px";百分比,如"10%",相对于父控件的高度;自动计算,如"auto",根据height值自动计算,相对于父控件垂直居中.
left: "", //String类型,区域左上角的水平偏移量.可取值:像素值,如"100px";百分比,如"10%",相对于父控件的宽度;自动计算,如"auto",根据width值自动计算,相对于父控件水平居中.默认:"0px".
opacity: "", //Number类型,View控件的不透明度.取值范围为0-1,0为全透明,1为不透明,默认值为1,即不透明.
position: "", //String类型,View控件的排版方式.当Webview窗口添加到另外一个窗口中时,排版位置才会生效,排版位置决定子窗口在父窗口中的定位方式.static:控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动.absolute:控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动.dock:控件在页面中停靠,停靠的位置由dock属性值决定.默认:absolute.
statusbar: {
//ViewStatusbarStyles类型,View控件的状态栏样式.仅在应用设置为沉浸式状态栏样式下有效,设置此属性后将自动保留系统状态栏区域不被View控件占用(即View控件非沉浸式样式显示).
background: "", //String类型,系统状态栏区域背景颜色.颜色值格式为"#RRGGBB",如"#FF0000"表示为红色背景,默认值为应用manifest.json中plus->statusbar->background属性配置的值.
},
},
},
],
titleNView: {
//WebviewTitleNViewStyles类型,定义窗口的标题栏控件样式.设置此属性值则表明创建Webview窗口的标题栏控件,并可通过其属性值设置背景颜色、文本内容、文本颜色等.通过Webview窗口的getTitleNView()方法可获取标题栏控件对象.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
autoBackButton: "", //Boolean类型,标题栏控件是否显示左侧返回按钮.true:显示返回按钮.false:不显示返回按钮.默认:false.返回按钮的颜色为窗口标题文字颜色,按下时颜色自动调整透明度为0.3.点击返回按钮的逻辑与按下系统返回键逻辑一致.
backgroundColor: "", //String类型,标题栏控件的背景颜色.颜色值格式为"#RRGGBB",如"#FF0000"表示为红色背景,默认值为"#F7F7F7".
buttons: [
//Array[ WebviewCustomButtonStyles ]类型,标题栏上的自定义按钮.建的自定义按钮数目不限制,实际应用中建议最多设置4个按钮(包括左侧返回按钮).
{
color: "", //String类型,按钮上文字颜色.可取值:"#RRGGBB"格式字符串,"rgba(R,G,B,A)".默认值为窗口标题栏控件的标题文字颜色.
colorPressed: "", //String类型,按下状态按钮文字颜色.String类型,按钮上文字颜色.可取值:"#RRGGBB"格式字符串,"rgba(R,G,B,A)".默认值为color属性值自动调整透明度为0.3.
float: "", //String类型,按钮在标题栏上的显示位置.right:在标题栏中靠右排列显示.left:在标题栏中靠左侧排列显示(在返回键后). 默认:right.
fontWeight: "", //String类型,按钮上文字的粗细.normal:标准字体.bold:加粗字体.默认:normal.
fontSize: "", //String类型,按钮上文字大小.可取值:字体高度像素值,数字加"px"格式字符串.
fontSrc: "", //String类型,按钮上文字使用的字体文件路径.相对路径:相对于当前页面的host位置,如"a.jpg",注意当前页面为网络地址则不支持.绝对路径:如Android平台"/sdcard/logo.png",此类路径通常通过其它5+ API获取的.扩展相对路径URL(RelativeURL):以"_"开头的相对路径,如"_www/a.jpg".本地路径URL:以"file://"开头,后面跟随系统绝对路径.
onclick: "", //WebviewCustomButtonCallback类型,按钮点击后触发的回调函数.回调函数中将返回此JSON对象
text: "", //String类型,按钮上显示的文字.推荐使用一个字符,超过一个字符可能无法正常显示,使用字体图标时unicode字符表示必须'\u'开头,如"\ue123"(注意不能写成"\e123").
},
],
coverage: "", //String类型,标题栏控件变化作用范围.仅在type值为transparent时有效,页面滚动时标题栏背景透明度将发生变化.当页面滚动到指定偏移量时标题栏背景变为完全不透明.支持百分比、像素值,默认为'132px'.
progress: {
//WebviewProgressStyles类型,标题栏控件的进度条样式.设置此属性则在标题栏控件的底部显示进度条,可配置进度条颜色值即高度.设置此属性值为undefined或null则隐藏进度条.默认不显示底部进度条.
color: "", //String类型,进度条颜色.可取值:"#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线;"rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明.默认值为"#00FF00".
height: "", //String类型,进度条高度.可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度.默认值为"2px".
},
splitLine: {
//WebviewSplitLineStyles类型,标题栏控件的底部分割线.设置此属性则在标题栏控件的底部显示分割线,可配置颜色值及高度.设置此属性值为undefined或null则隐藏分割线.默认不显示底部分割线.
color: "", //String类型,进度条颜色.可取值:"#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线;"rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明.默认值为"#cccccc".
height: "", //String类型,底部分割线高度.可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度.默认值为"1px".
},
titleColor: "", //String类型,标题栏控件的标题文字颜色.颜色值格式为"#RRGGBB",如"#FF0000"表示标题文字颜色为红色,默认值为"#000000".
titleOverflow: "", //String类型,标题栏控件的标题文字超出显示区域时处理方式.clip:超出显示区域时内容裁剪;ellipsis:超出显示区域时尾部显示省略标记(...).默认:ellipsis.
titleText: "", //String类型,标题栏控件的标题文字内容.在标题栏控件居中(水平和垂直)显示,左右边距为88px,如果文本过长则尾部裁剪(加三个点"...")显示.当不设置titleText属性或属性值为undefined/null时,使用当前Webview窗口加载页面的标题,并自动同步更新页面的标题.
titleSize: "", //String类型,标题栏控件的标题文字字体大小.字体大小单位为像素,如"20px"表示字体大小为20像素,默认值为17像素.
type: "", //String类型,标题栏控件样式.default:默认样式,顶部停靠显示,挤压Webview页面内容显示区域;transparent:透明样式,顶部沉浸式显示覆盖Webview页面内容,标题栏上内容(除按钮外)全部透明,当页面滚动时透明度逐渐变化,直到不透明显示.默认:default.
},
transition: {
//WebviewTransition类型,窗口定义窗口变换的动画效果.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTransition
property: "all", //String类型,产生变换效果的属性.默认值为"all",暂不支持其它值.
duration: "0", //String类型,变换持续的时间.默认值为0,即无动画效果.
timingfunction: "ease-in-out", //String类型,窗口变换效果.linear:匀速变化.ease-in:匀加速变化,逐渐变快的动画效果.ease-out:匀减速变化,逐渐变慢的动画效果.ease-in-out:先加速后减速变化,先变快后变慢的动画效果.默认:ease-in-out.
},
transform: {
//WebviewTransform类型,窗口定义窗口变形效果.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTransform
property: "all", //String类型,产生变换效果的属性.默认值为"all",暂不支持其它值.
duration: "0", //String类型,变换持续的时间.默认值为0,即无动画效果.
timingfunction: "ease-in-out", //String类型,窗口变换效果.linear:匀速变化.ease-in:匀加速变化,逐渐变快的动画效果.ease-out:匀减速变化,逐渐变慢的动画效果.ease-in-out:先加速后减速变化,先变快后变慢的动画效果.默认:ease-in-out.
},
position: "", //WebviewPosition类型,Webview窗口的排版位置.当Webview窗口添加到另外一个窗口中时,排版位置才会生效,排版位置决定子窗口在父窗口中的定位方式.static:控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动.absolute:控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动.dock:控件在页面中停靠,停靠的位置由dock属性值决定.默认:absolute.
errorPage: "none", //String类型,窗口加载错误时跳转的页面地址.当Webview窗口无法加载指定的url地址时(如本地页面不存,或者无法访问的网络地址),此时会自动跳转到指定的错误页面地址(仅支持本地页面地址).设置为"none"则关闭跳转到错误页面功能,此时页面显示Webview默认的错误页面内容.默认使用5+ Runtime内置的错误页面.
additionalHttpHeaders: {}, //JSON类型,窗口加载页面时额外添加的HTTP请求头数据,内容按照http协议写.
animationOptimization: "auto", //String类型,窗口动画优化方式.auto:如果窗口中存在titleNView或subNViews，窗口动画时真实Webview控件从动画窗口中移除加速.none:窗口动画不使用优化.默认:auto.
cachemode: "default", //String类型,窗口的缓存模式.default:根据cache-control决定是否使用缓存数据,如果存在缓存并且没有过期则使用本地缓存资源,否则从网络获取.cacheElseNetwork:只要存在缓存(即使过期)数据则使用,否则从网络获取.noCache:不使用缓存数据,全部从网络获取.cacheOnly:仅使用缓存数据，不从网络获取(注:如果没有缓存数据则会导致加载失败).默认:default.
backButtonAutoControl: "close", //String类型,Webview窗口自动处理返回键逻辑.hide:隐藏Webview窗口,隐藏动画与上一次调用显示时设置的动画类型相对应(如"slide-in-right"对应的关闭动画为"slid-out-right").close:关闭Webview窗口,关闭动画与上一次调用显示时设置的动画类型相对应.none:不做操作,将返回键传递给下一Webview窗口处理.quit:退出应用.
blockNetworkImage: false, //Boolean类型,是否阻塞网络图片的加载.true:阻塞.false:不阻塞.默认:false.阻塞后Webview窗口将不加载页面中使用的所有网络图片,可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态.iOS不支持.
decelerationRate: 0.989, //Number类型,窗口内容停止滑动的减速度.当Webview加载的内容超过其高度时,可以拖拽滑动内容,decelerationRate属性控制手指松开后页面滑动的速度.设置值越大手指松开后的滑动速度越快(滑动距离越长,其值域范围为0.0-1.0,默认值为0.989.安卓不支持.
dock: "top", //WebviewDock类型,窗口的停靠方式.当Webview窗口添加到另外一个窗口中时,停靠方式才会生效,采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容被子窗口盖住.top:控件停靠则页面顶部;bottom:底部;right:右侧;left:控件停靠在页面左侧.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDock
replacewebapi: {
//WebviewReplaceWebApiOptions类型,替换H5标准API.http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewReplaceWebApiOptions
geolocation: "auto", //String类型,替换H5标准定位接口(navigator.geolocation.*).由于网络原因,在部分手机上可能无法调用标准H5定位接口(navigator.geolocation.*)获取定位数据,此时可以通过此属性配置使用原生定位模块替换标准H5定位接口.alldevice:在所有设备上替换标准H5定位接口(navigator.geolocation.*).auto:自动替换H5标准定位接口,仅在调用标准H5定位接口无法获取数据的设备上替换.none:不替换H5标准定位接口(navigator.geolocation.*).默认:auto.注意:替换H5标准定位接口,会导致页面加载速度延迟100ms左右,推荐使用"auto"模式.
},
hardwareAccelerated: "", //Boolean类型,窗口是否开启硬件加速.true:开启.false:不开启.默认:5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速，可以通过plus.webview.defaultHardwareAccelerated()方法获取默认Webview是否开启硬件加速.由于不同设备对硬件加速的支持情况存在差异,开启硬件加速能加速HTML页面的渲染,但也会消耗更多的系统资源,从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题，因此在特定设备的特定页面如果出现以上问题需要手动设置关闭硬件加速来避免.iOS不支持.
kernel: "UIWebview", //String类型,窗口使用的内核.WKWebview:在iOS8.0及以上系统使用WKWebview内核,低版本下仍然使用UIWebview内核.UIWebview:在所有版本上都使用UIWebview内核.默认:UIWebview.WKWebview内核的优势是： 1.滚动时懒加载的图片也可以实时渲染,UIWebview在滚动停止后才能渲染;2.WKWebview的video支持AirPlay.但WKWebview也有些限制和不足,目前已知的问题有:1.不支持跨域设置cookie,即plus.navigator.setCookie()API无法使用;2.本地的HTML页面中的XHR不支持跨域访问,需使用plus.net.XMLHttpRequest来替换;3.不支持使用WebSQL,需使用indexDB来替换;4.不支持js原生混淆功能,需使用前端js混淆来替换;5.内存不足时会白屏.首页的Webview的kernel在manifest中配置(plus->kernel->ios).安卓不支持.
plusrequire: "normal", //String类型,控制Webview注入5+ API时机.ahead:尽量提前，拦截页面中网络js请求实现提前注入,如果没有拦截到js请求则在页面loaded时注入.normal:页面loaded时注入.later:较晚在注入,在loaded事件发生后2s再注入,plusready事件同样延迟.none:不注入,页面无法调用5+ API,不触发plusready事件.默认:normal.
render: "onscreen", //String类型,窗口渲染模式.onscreen:Webview窗口在屏幕区可见时渲染,不可见时不进行渲染,此时能减少内存使用量.always:Webview在任何时候都渲染,在内存较大的设备上使用,被遮挡的窗口在此中模式下显示的时候会有更流畅的效果.默认:onscreen.iOS不支持.
videoFullscreen: "auto", //String类型,视频全屏播放时的显示方向.auto:自动适配,如果当前页面竖屏,则竖屏显示.如果当前页面横盘显示,则横屏.如果当前页面自动感应,则自动感应横竖屏切换.portrait-primary:竖屏正方向.portrait-secondary:竖屏反方向,屏幕正方向按顺时针旋转180°.landscape-primary:横屏正方向,屏幕正方向按顺时针旋转90°.landscape-secondary:横屏方向，屏幕正方向按顺时针旋转270°.landscape:横屏正方向或反方向,根据设备重力感应器自动调整.默认:auto.iOS不支持.
},
{
//extras:JSON对象,可选,创建Webview窗口的额外扩展参数.值为JSON类型,设置扩展参数后可以直接通过Webview的点(".")操作符获取扩展参数属性值,如:var w=plus.webview.create('url.html','id',{},{preload:'preload webview'});//可直接通过以下方法获取preload值console.log(w.preload);//输出值为"preload webview".
}
);
}
</script>
<style scoped lang="scss"></style>
< -->
<template>
<div>
<van-field
v-model="form[props.options.startDate]"
placeholder="提示性文字"
@input="handleChange"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
options: {
type: Object,
default() {
return {
startDate: "startTime",
endDate: "endDate",
};
},
},
});
const form = ref({});
const handleChange = (e) => {
console.log(form.value);
};
</script>
h5/src/views/video/controller.vue
...@@ -3,14 +3,8 @@ ...@@ -3,14 +3,8 @@
<van-action-bar> <van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" /> <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" /> <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
<van-action-bar-button <van-action-bar-button type="danger" color="#387CF5" style="height: 44px" text="截图巡检"
type="danger" :disabled="!screenshotEnable" @click="onClickButton" />
color="#387CF5"
style="height: 44px"
text="截图巡检"
:disabled="!screenshotEnable"
@click="onClickButton"
/>
</van-action-bar> </van-action-bar>
</div> </div>
</template> </template>
...@@ -28,7 +22,6 @@ function onClickIcon(type) { ...@@ -28,7 +22,6 @@ function onClickIcon(type) {
} }
} }
function onClickButton() { function onClickButton() {
console.log('onClickButton')
emit('screenshot') emit('screenshot')
} }
</script> </script>
...@@ -37,10 +30,12 @@ function onClickButton() { ...@@ -37,10 +30,12 @@ function onClickButton() {
.controller-container { .controller-container {
.van-action-bar-icon { .van-action-bar-icon {
width: 60px; width: 60px;
.van-icon { .van-icon {
font-size: 32px; font-size: 32px;
} }
} }
.van-button { .van-button {
border-radius: 16px; border-radius: 16px;
} }
......
h5/src/views/video/index.vue
...@@ -8,84 +8,38 @@ ...@@ -8,84 +8,38 @@
<span class="template-name-title">模板名称：</span> <span class="template-name-title">模板名称：</span>
<van-cell :title="templateNameDefault" @click="show = true" is-link /> <van-cell :title="templateNameDefault" @click="show = true" is-link />
<van-popup v-model:show="show" position="bottom"> <van-popup v-model:show="show" position="bottom">
<van-picker <van-picker :columns="templateNameList" @confirm="onConfirm" @cancel="onCancel" />
:columns="templateNameList"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup> </van-popup>
</div> </div>
<van-button <van-button class="template-btn" plain type="primary" size="small" @click="templateClick">
class="template-btn" + 问题项</van-button>
plain
type="primary"
size="small"
@click="templateClick"
>
+ 问题项</van-button
>
</div> </div>
<div class="template-select-box" v-if="checkboxRefsShow.length > 0"> <div class="template-select-box" v-if="checkboxRefsShow.length > 0">
<div class="template-select-list"> <div class="template-select-list">
<van-tag <van-tag class="template-select-one" v-for="(item, index) in checkboxRefsShow" :key="index" closeable
class="template-select-one" size="large" type="primary" @close="deleteTemplate(item, index)">
v-for="(item, index) in checkboxRefsShow"
:key="index"
closeable
size="large"
type="primary"
@close="deleteTemplate(item, index)"
>
{{ item.name }} {{ item.name }}
</van-tag> </van-tag>
</div> </div>
</div> </div>
<van-popup <van-popup v-model:show="templateDialogShow" position="bottom" class="template-list-model" closeable round>
v-model:show="templateDialogShow"
position="bottom"
class="template-list-model"
closeable
round
>
<div class="template-list-box"> <div class="template-list-box">
<div class="template-list-title">添加问题项</div> <div class="template-list-title">添加问题项</div>
<div class="template-search-box"> <div class="template-search-box">
<form action="/"> <form action="/">
<van-search <van-search v-model="templateSearch" placeholder="请输入搜索问题项名称" @search="templateSearchChange" />
v-model="templateSearch"
placeholder="请输入搜索问题项名称"
@search="templateSearchChange"
/>
</form> </form>
</div> </div>
<div class="template-list"> <div class="template-list">
<van-checkbox-group <van-checkbox-group shape="square" v-model="checked" ref="checkboxGroup">
shape="square"
v-model="checked"
ref="checkboxGroup"
>
<van-collapse v-model="templatecollapseNames"> <van-collapse v-model="templatecollapseNames">
<van-collapse-item <van-collapse-item v-for="(item, index) in templateGroupList" :key="item.id" :title="item.name"
v-for="(item, index) in templateGroupList" :name="item.id">
:key="item.id"
:title="item.name"
:name="item.id"
>
<van-cell-group inset> <van-cell-group inset>
<van-cell <van-cell v-for="(one, ind) in item.sopProjects" center clickable :key="one.id" :title="one.name"
v-for="(one, ind) in item.sopProjects" @click="toggle(ind)">
center
clickable
:key="one.id"
:title="one.name"
@click="toggle(ind)"
>
<template #right-icon> <template #right-icon>
<van-checkbox <van-checkbox :name="one.id" :ref="(el) => (checkboxRefs[one.allIndex] = el)" @click.stop />
:name="one.id"
:ref="(el) => (checkboxRefs[one.allIndex] = el)"
@click.stop
/>
</template> </template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
...@@ -93,25 +47,11 @@ ...@@ -93,25 +47,11 @@
</van-collapse> </van-collapse>
</van-checkbox-group> </van-checkbox-group>
</div> </div>
<van-button <van-button class="template-list-submit" round block type="primary" @click="templateSubmit">确认</van-button>
class="template-list-submit"
round
block
type="primary"
@click="templateSubmit"
>确认</van-button
>
</div> </div>
</van-popup> </van-popup>
<div class="formBox"> <div class="formBox">
<van-field <van-field v-model="message" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" />
v-model="message"
rows="2"
autosize
label="备注"
type="textarea"
placeholder="请输入备注"
/>
<van-field name="radio" label="是否需要整改"> <van-field name="radio" label="是否需要整改">
<template #input> <template #input>
<van-radio-group v-model="isRectify" direction="horizontal"> <van-radio-group v-model="isRectify" direction="horizontal">
...@@ -120,51 +60,24 @@ ...@@ -120,51 +60,24 @@
</van-radio-group> </van-radio-group>
</template> </template>
</van-field> </van-field>
<van-field <van-field v-show="isRectify == 1" v-model="rectificationUserName" is-link readonly name="picker" label="整改人"
v-show="isRectify == 1" placeholder="点击选择整改人" @click="showRectification = true" />
v-model="rectificationUserName"
is-link
readonly
name="picker"
label="整改人"
placeholder="点击选择整改人"
@click="showRectification = true"
/>
<van-popup v-model:show="showRectification" position="bottom"> <van-popup v-model:show="showRectification" position="bottom">
<van-picker <van-picker :columns="userNameList" @confirm="onUserConfirm" @cancel="showRectification = false" />
:columns="userNameList"
@confirm="onUserConfirm"
@cancel="showRectification = false"
/>
</van-popup> </van-popup>
<div <div style="
style="
padding: 15px; padding: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
" ">
> <van-button style="width: 45%" round block @click="goBackVideo">返回</van-button>
<van-button style="width: 45%" round block @click="goBackVideo" <van-button style="width: 45%" round block type="primary" @click="submitContent">提交</van-button>
>返回</van-button
>
<van-button
style="width: 45%"
round
block
type="primary"
@click="submitContent"
>提交</van-button
>
</div> </div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<livePlayer <livePlayer ref="vionPlayer" @play-success="handlePlaySuccess" @screenshotEnd="screenshotEnd"></livePlayer>
ref="vionPlayer"
@play-success="handlePlaySuccess"
@screenshotEnd="screenshotEnd"
></livePlayer>
<!--TODO: 暂时不需要了--> <!--TODO: 暂时不需要了-->
<div style="display: none"> <div style="display: none">
<div class="tour-btns" v-if="paramObj.type == 'titem'"> <div class="tour-btns" v-if="paramObj.type == 'titem'">
...@@ -172,17 +85,11 @@ ...@@ -172,17 +85,11 @@
<van-button @click="goCaptureImg" type="primary">确认并截图</van-button> <van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
</div> </div>
<div class="tour-btns" v-else-if="paramObj.type == 'view'"> <div class="tour-btns" v-else-if="paramObj.type == 'view'">
<van-button block @click="navBack" type="primary" <van-button block @click="navBack" type="primary">查看其他监控点</van-button>
>查看其他监控点</van-button
>
</div> </div>
<div class="tour-btns1" v-else> <div class="tour-btns1" v-else>
<div class="box gate-name-box"> <div class="box gate-name-box">
<span <span @click="navBack" class="" style="display: inline-flex; align-items: center">
@click="navBack"
class=""
style="display: inline-flex; align-items: center"
>
<span class="text-ellipsis">{{ gateEditName }}</span> <span class="text-ellipsis">{{ gateEditName }}</span>
<van-icon class="icon" name="play" /> <van-icon class="icon" name="play" />
</span> </span>
...@@ -209,25 +116,12 @@ ...@@ -209,25 +116,12 @@
</div> </div>
<!-- 监控点选择器 --> <!-- 监控点选择器 -->
<van-popup v-model:show="pointPopupShow" round position="bottom"> <van-popup v-model:show="pointPopupShow" round position="bottom">
<van-picker <van-picker :default-index="pointListIndex" :title="paramObj.mallName" :columns="pointList" :option-height="40"
:default-index="pointListIndex" @confirm="pointConfirm" @cancel="pointPopupShow = false" />
:title="paramObj.mallName"
:columns="pointList"
:option-height="40"
@confirm="pointConfirm"
@cancel="pointPopupShow = false"
/>
</van-popup> </van-popup>
<!-- 监控场景名称修改 --> <!-- 监控场景名称修改 -->
<van-dialog <van-dialog use-slot title="监控点信息修改" v-model:show="gateEditShow" show-cancel-button @cancel="gateEditHide"
use-slot @confirm="gateEditSave" :confirm-button-disabled="gateEditName.trim() == ''">
title="监控点信息修改"
v-model:show="gateEditShow"
show-cancel-button
@cancel="gateEditHide"
@confirm="gateEditSave"
:confirm-button-disabled="gateEditName.trim() == ''"
>
<div style="margin: 20px 10px"> <div style="margin: 20px 10px">
<van-cell-group> <van-cell-group>
<van-field v-model="gateEditName" placeholder="请输入监控点名称"> <van-field v-model="gateEditName" placeholder="请输入监控点名称">
...@@ -240,20 +134,9 @@ ...@@ -240,20 +134,9 @@
</van-field> </van-field>
</van-cell-group> </van-cell-group>
<van-cell-group style="display: flex; align-items: center"> <van-cell-group style="display: flex; align-items: center">
<van-field <van-field style="display: inline-flex" v-model="gateEditGroup" label="所属分组" placeholder="请输入分组名称">
style="display: inline-flex"
v-model="gateEditGroup"
label="所属分组"
placeholder="请输入分组名称"
>
</van-field> </van-field>
<van-button <van-button style="width: 14vw" size="small" type="primary" @click="groupPicker = true">选择</van-button>
style="width: 14vw"
size="small"
type="primary"
@click="groupPicker = true"
>选择</van-button
>
</van-cell-group> </van-cell-group>
<div class="group-remark"> <div class="group-remark">
<div>所属分组信息允许为空。</div> <div>所属分组信息允许为空。</div>
...@@ -263,51 +146,25 @@ ...@@ -263,51 +146,25 @@
</van-dialog> </van-dialog>
<!-- 监控场景分组选择 --> <!-- 监控场景分组选择 -->
<van-popup v-model:show="groupPicker" round position="bottom"> <van-popup v-model:show="groupPicker" round position="bottom">
<van-picker <van-picker :default-index="gateEditGroupIndex" :columns="groupList" @cancel="groupPicker = false"
:default-index="gateEditGroupIndex" @confirm="groupChange" />
:columns="groupList"
@cancel="groupPicker = false"
@confirm="groupChange"
/>
</van-popup> </van-popup>
<!-- 监控场景添加分组 --> <!-- 监控场景添加分组 -->
<van-dialog <van-dialog use-slot title="新增分组" v-model:show="groupAddShow" show-cancel-button @cancel="groupAddHide"
use-slot @confirm="groupAddSave" :confirm-button-disabled="groupAddName.trim() == ''">
title="新增分组"
v-model:show="groupAddShow"
show-cancel-button
@cancel="groupAddHide"
@confirm="groupAddSave"
:confirm-button-disabled="groupAddName.trim() == ''"
>
<div style="margin: 20px 10px"> <div style="margin: 20px 10px">
<van-cell-group> <van-cell-group>
<van-field <van-field v-model="groupAddName" required label="分组名称" placeholder="请输入分组名称" />
v-model="groupAddName"
required
label="分组名称"
placeholder="请输入分组名称"
/>
</van-cell-group> </van-cell-group>
</div> </div>
</van-dialog> </van-dialog>
</div> </div>
<!--底部按钮区--> <!--底部按钮区-->
<VideoController <VideoController v-if="originUser === 'record'" :ptz-enable="ptzEnableInController"
v-if="originUser === 'record'" :screenshotEnable="isAllowScreenshot" @screenshot="handleScreenshot" @showMonitor="navBack"
:ptz-enable="ptzEnableInController" @showPTZ="handleShowPTZ" />
:screenshotEnable="isAllowScreenshot" <ProcessingController v-else :screenshotEnable="isAllowScreenshot" @screenshot="handleScreenshot"
@screenshot="handleScreenshot" @back="handleBack" />
@showMonitor="navBack"
@showPTZ="handleShowPTZ"
/>
<ProcessingController
v-else
:screenshotEnable="isAllowScreenshot"
@screenshot="handleScreenshot"
@back="handleBack"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
...@@ -318,7 +175,8 @@ import { Toast } from "vant"; ...@@ -318,7 +175,8 @@ import { Toast } from "vant";
import livePlayer from "@/components/extension/index.vue"; import livePlayer from "@/components/extension/index.vue";
import VideoController from './controller.vue' import VideoController from './controller.vue'
import ProcessingController from './processingController.vue'; import ProcessingController from './processingController.vue';
import shopTour from "@/components/shopTour.vue"; // import shopTour from "@/components/shopTour.vue";
import wx from 'weixin-js-sdk'
//import vconsole from 'vconsole'; //import vconsole from 'vconsole';
if (process.env.NODE_ENV !== "production") { if (process.env.NODE_ENV !== "production") {
//new vconsole(); //new vconsole();
...@@ -333,7 +191,6 @@ function handlePlaySuccess() { ...@@ -333,7 +191,6 @@ function handlePlaySuccess() {
isAllowScreenshot.value = true; isAllowScreenshot.value = true;
} }
function handleScreenshot() { function handleScreenshot() {
console.log('handleScreenshot-video')
isAllowScreenshot.value = false; isAllowScreenshot.value = false;
goCaptureImg() goCaptureImg()
} }
...@@ -385,6 +242,7 @@ const handleBack = () => { ...@@ -385,6 +242,7 @@ const handleBack = () => {
origin: 'back', origin: 'back',
}, },
} }
wx.miniProgram.navigateBack()
window.postMessage(params, '*'); window.postMessage(params, '*');
uni.postMessage(params, '*'); uni.postMessage(params, '*');
} }
...@@ -902,7 +760,7 @@ const capture = function () { ...@@ -902,7 +760,7 @@ const capture = function () {
const calcDistance = function (loc1, loc2) { const calcDistance = function (loc1, loc2) {
return Math.sqrt( return Math.sqrt(
(loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.x - loc2.x) * (loc1.x - loc2.x) +
(loc1.y - loc2.y) * (loc1.y - loc2.y) (loc1.y - loc2.y) * (loc1.y - loc2.y)
); //通过起始结束坐标x,y值计算路程长度 ); //通过起始结束坐标x,y值计算路程长度
}; };
const moveStroke = function (point, context) { const moveStroke = function (point, context) {
...@@ -943,17 +801,19 @@ const goCaptureImg = () => { ...@@ -943,17 +801,19 @@ const goCaptureImg = () => {
vionPlayer.value vionPlayer.value
.screenshot() .screenshot()
.then((data) => { .then((data) => {
console.log(1, 'captureImg');
screenshotEnd(data); screenshotEnd(data);
}) })
.catch((err) => {}); .catch((err) => { });
}; };
// 截图出口 // 截图出口
const screenshotEnd = (imgData) => { const screenshotEnd = (imgData) => {
Toast.clear() Toast.clear()
// 截图成功后，设置 // 截图成功后，设置
isAllowScreenshot.value = true; isAllowScreenshot.value = true;
console.log(imgData);
let reg = new RegExp("data:image/jpeg;base64,"); let reg = new RegExp("data:image/jpeg;base64,");
let regPng = new RegExp("data:image/png;base64,"); let regPng = new RegExp("data:image/png;base64,");
let pic = imgData.replace(reg, ""); let pic = imgData.replace(reg, "");
...@@ -964,7 +824,6 @@ const screenshotEnd = (imgData) => { ...@@ -964,7 +824,6 @@ const screenshotEnd = (imgData) => {
pic: pic, pic: pic,
}) })
.then((res) => { .then((res) => {
// console.log(res)
let result = res.data; let result = res.data;
if (result.code == 200) { if (result.code == 200) {
pictureProcess(result.data.pic); pictureProcess(result.data.pic);
...@@ -973,9 +832,13 @@ const screenshotEnd = (imgData) => { ...@@ -973,9 +832,13 @@ const screenshotEnd = (imgData) => {
} }
}); });
}; };
// 小程序跳转逻辑
const pictureProcess = (imgUrl) => { const pictureProcess = (imgUrl) => {
/***********APP截图****************/ /***********APP截图****************/
console.log('params', imgUrl, paramObj);
const params = { const params = {
type: "inspection-screenshot", type: "inspection-screenshot",
data: { data: {
...@@ -984,9 +847,54 @@ const pictureProcess = (imgUrl) => { ...@@ -984,9 +847,54 @@ const pictureProcess = (imgUrl) => {
origin: originUser.value, origin: originUser.value,
} }
} }
handleWxInfo(params.data)
window.postMessage(params, '*'); window.postMessage(params, '*');
uni.postMessage(params, '*'); uni.postMessage(params, '*');
}; };
const handleWxInfo = (params) => {
// wx.miniProgram.navigateTo({
// url: '/pages/login/index'
// })
processIframeData(params)
}
const webviewMessage = ref({})
function processIframeData(targetData) {
if (targetData.origin === 'processing') {
webviewMessage.value = targetData
handleNextPage('/subPackages/accountGroup/pages/inspection/inspectionProcessing')
} else if (targetData.origin === 'back') {
wx.miniProgram.navigateBack()
} else {
webviewMessage.value = targetData
handleNextPage()
}
}
function toQueryString(obj) {
const query = Object.keys(obj)
.map(key => key + '=' + obj[key])
// .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
.join('&');
return query;
}
function handleNextPage(url) {
const params = {
// 开发环境，使用9217
// restaurantId: 9217,
restaurantId: paramObj.mallId,
pic: webviewMessage.value.imgUrl,
gateId: paramObj.id,
mallId: paramObj.mallId,
}
const targetUrl = url || '/subPackages/accountGroup/pages/inspection/inspectionForm'
const queryString = toQueryString(params)
console.log(`${targetUrl}?${queryString}`);
wx.miniProgram.navigateTo({
url: `${targetUrl}?${queryString}`,
})
}
onMounted(() => { onMounted(() => {
reqPatrolGateList(); reqPatrolGateList();
reqGateGroupList(); reqGateGroupList();
...@@ -1110,6 +1018,7 @@ onMounted(() => { ...@@ -1110,6 +1018,7 @@ onMounted(() => {
line-height: var(--van-font-size-lg); line-height: var(--van-font-size-lg);
margin-bottom: 10px; margin-bottom: 10px;
} }
.template-search-box { .template-search-box {
// border-top: 1px solid #cccccc; // border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
...@@ -1131,18 +1040,21 @@ onMounted(() => { ...@@ -1131,18 +1040,21 @@ onMounted(() => {
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: center;
} }
.gate-name-edit-img { .gate-name-edit-img {
width: 40px; width: 40px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
margin-left: 20px; margin-left: 20px;
} }
.group-remark { .group-remark {
font-size: var(--van-calendar-info-font-size); font-size: var(--van-calendar-info-font-size);
line-height: 34px; line-height: 34px;
color: #bbb; color: #bbb;
margin-top: 20px; margin-top: 20px;
} }
.grop-name-required { .grop-name-required {
position: relative; position: relative;
top: 4px; top: 4px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!