HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

帮你跳过Canvas操作大坑

canvas

重点:绝对不要重新设定canvas对象的width属性(不是.style.width)!!!!!

操作:
我把之前的JS模块拿到uniapp里用(在renderjs里调用),发现canvas绘制总是有问题,但是问题又不是稳定复现。
操作流程是:打开页面 => 初始化canvas => 渲染canvas => 结果 文字渲染行数超出
在我多次尝试后发现,假如在页面渲染前使用context.fillRect()刷新canvas,渲染结果就是正确的。不过偶尔会失效。

原因:
之前的JS模块已经做了高清化处理,而uniapp也做了高清处理。
高清化处理无非就是修改canvas.width然后缩放content即可。
但是无论你怎么操作canvas.width和canvas.height都是无效的,关了自动高清化也改不了,开了还是改不了。
这里最恶心,由于操作无效,导致我以为没有修改成功,于是保留了旧代码。
后面修改后直接打印,发现值是修改成功的。不过执行了context.fillRect()操作后值又变回去了。
这里我可以确定了,uniapp内部的方法会重置数值。

处理:
那好办,每次uniapp重置,我也重置回来就行。
结果是卡的起飞,渲染还是有问题。
想了又想,抱着试一试的想法把处理canvas.width的地方注释了。
没想到注释了就好了...

这个问题弄了我2星期,官方文档那叫一个简单,啥也没说。
要不是看示例,发现没有对canvas.width的操作感觉可以尝试尝试,估计还能卡一个月。

继续阅读 »

重点:绝对不要重新设定canvas对象的width属性(不是.style.width)!!!!!

操作:
我把之前的JS模块拿到uniapp里用(在renderjs里调用),发现canvas绘制总是有问题,但是问题又不是稳定复现。
操作流程是:打开页面 => 初始化canvas => 渲染canvas => 结果 文字渲染行数超出
在我多次尝试后发现,假如在页面渲染前使用context.fillRect()刷新canvas,渲染结果就是正确的。不过偶尔会失效。

原因:
之前的JS模块已经做了高清化处理,而uniapp也做了高清处理。
高清化处理无非就是修改canvas.width然后缩放content即可。
但是无论你怎么操作canvas.width和canvas.height都是无效的,关了自动高清化也改不了,开了还是改不了。
这里最恶心,由于操作无效,导致我以为没有修改成功,于是保留了旧代码。
后面修改后直接打印,发现值是修改成功的。不过执行了context.fillRect()操作后值又变回去了。
这里我可以确定了,uniapp内部的方法会重置数值。

处理:
那好办,每次uniapp重置,我也重置回来就行。
结果是卡的起飞,渲染还是有问题。
想了又想,抱着试一试的想法把处理canvas.width的地方注释了。
没想到注释了就好了...

这个问题弄了我2星期,官方文档那叫一个简单,啥也没说。
要不是看示例,发现没有对canvas.width的操作感觉可以尝试尝试,估计还能卡一个月。

收起阅读 »

寻找前后端技术,远程兼职

PHP Vue App uniapp

互联网项目寻求兼职技术人员,无需到现场,远程开发,前端要求熟悉uniapp或vue或app原生开发并有对应案例经验;后端熟悉php或java,可长期支持。有兴趣和时间的话联系V:jonathanfu 具体聊。

互联网项目寻求兼职技术人员,无需到现场,远程开发,前端要求熟悉uniapp或vue或app原生开发并有对应案例经验;后端熟悉php或java,可长期支持。有兴趣和时间的话联系V:jonathanfu 具体聊。

寻找前后端技术,远程兼职

PHP java 移动APP Vue uniapp

互联网项目寻求兼职技术人员,无需到现场,远程开发,前端要求熟悉uniapp或vue或app原生开发并有对应案例经验;后端熟悉php或java,可长期支持。有兴趣和时间的话联系V:jonathanfu 具体聊。

互联网项目寻求兼职技术人员,无需到现场,远程开发,前端要求熟悉uniapp或vue或app原生开发并有对应案例经验;后端熟悉php或java,可长期支持。有兴趣和时间的话联系V:jonathanfu 具体聊。

关于在 renderjs 父子组件通信的的实现【有着一点自己的经验】

uni_app

前言
最新在做的一个项目,需要同时实现 H5 和 APP 以及小程序三端,所以自然而然的选择了 uni-app,但是引用的库同时有着需要使用 dom API 和 worker 这两个痛点,寻寻觅觅,我找到了 renderjs

为啥选他
renderjs 首先能够支持使用 dom API,在一些三方库频繁操作 dom,你又不得不依赖这个库的时候,renderjs 会是一个不错的方案。

app 端不支持使用 worker, uni 文档上写着需要使用 renderjs 或者 webview,而 webview 往往会设计 webview 通信的问题,在 APP 端的 webview 通信想要不错的支持只能使用 nvue 来实现,而如果你是想要实现一个组件的话就会是 .nvue 组件,而 uni 官方说了 .nvue 组件只能在 .vue 页面中使用,这就带来了其他页面使用该组件的负担,及app的实现必须使用 .nvue,而同时维护 .vue 和 .nvue 文件是有着一定代价的(关于这里,只是单纯的我还没想好怎么处理这里的关系)。所以,我选择了 renderjs

问题
renderjs 在 h5 的表现和你正常开发一个 vue 组件没有什么区别,唯一要注意的点就是使用了不太建议在 vue2 + typeScript 的项目中去实现它,因为一旦使用 vue.extned() 的这个方法去定义组件就会导致 h5 渲染不正常(也可能是单纯的我是个菜逼)

而 renderjs 在 App端 的差异就比较大了,最重要的一点就是视图层和逻辑层的方法与变量不能互相通信,而另一方面,如果使用了 renderjs 作为子组件,在使用最经典的 props/emit 实现的父子间传值就会有点麻烦,就是本文的重点。

实现
首先,我们这个方案依赖于官方文档给的 echarts 的那个 demo。那个 demo 展示了在 app 端如何让视图层与逻辑层通信(即 renderjs 与原来的 script )。

上面两张图片就是官方文档给的 echarts 的那个 demo 外带一点小注解。
下面开始讲讲它作为子组件如何完成与父组件的双向通信。

父组件向子组件传值

  1. 首先,在逻辑层(原先的 script )中正常写 props 接收你父组件要传的值
  2. renderjs 监听该值的变动,随着变动修改自己的属性
<template>  
    <div>  
        <div :prop="test" :change:prop="renderModule.onUpdateTestChange" ></div>  
    </div>  
</template>  
<script lang="ts">  
export default {  
    props: {  
        test: {  
            type: String,  
            default: "",  
        },  
    },  
}  
</script>  
<script module="renderModule" lang="renderjs">  
export default {  
    data() {  
         return {  
                renderTest: '',  
         }  
    }  
    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
            }  
    }  
}  
</script>

但是,实际上有更快的方法。
在视图层与逻辑层能够访问统一个对象(文档上说的),该对象包含一个对象指向本组件,也就是说,可以直接通过该对象访问组件的所有属性和方法,实际上我只在视图层使用过(毕竟在逻辑层没必要=-=),他就是 this.$ownerInstance
所以在逻辑层想要访问 test 值,可以直接

this.$ownerInstance.$vm.test 

再啰嗦一句,这个 $vm 就是组件实例等价于每次正常写的那个 this,所以这样能够访问到就能够理解了。
不过有点奇怪的就是我写的 this.$ownerInstance.$vm.$emit 方法想要尝试触发父组件方法并没有成功,有可能是我写错了,具体原因还不明白,之后有结论了我再更新。

子组件向父组件传值

    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
            }  
    }

这个是刚才的代码,我再借用下。请注意下 ownerInstance 。
我再上面的图片有标注,这个很重要就是因为我们能够看到在点击触发逻辑层方法时,能够通过 ownerInstance.callMethod 触发普通 script 的方法,进而在普通 script 的那个方法下使用 this.$emit 触发父组件方法。但是这样就会有着必须点击才能触发父组件方法的限制,这不能够啊。这个时候可以将 ownerInstance 保存起来,之后想要调用方法的时候就不需要通过点击事件传来的 ownerInstance 才能触发逻辑层的方法了。

    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
                   if (!this.ownerInstance) this.ownerInstance = ownerInstance;// 这样就能保存了 ownerInstance  
            },  
            // 这个就是尝试  
            niceTry() {  
                    this.ownerInstance?.callMethod('%父组件的方法%',%要传给父组件的参数%);  
            }  
    }

另外再提一嘴,就是 this.$ownerInstance.callMethod 不成,小伙伴们可以自己试试,没准也是我搞错了。

至此,父子组件双向通信就算成了。不懂或是发现错误的小伙伴们可以直接评论,只要我还在做现在这个项目应该会满经常上 uni 这边逛逛的。

继续阅读 »

前言
最新在做的一个项目,需要同时实现 H5 和 APP 以及小程序三端,所以自然而然的选择了 uni-app,但是引用的库同时有着需要使用 dom API 和 worker 这两个痛点,寻寻觅觅,我找到了 renderjs

为啥选他
renderjs 首先能够支持使用 dom API,在一些三方库频繁操作 dom,你又不得不依赖这个库的时候,renderjs 会是一个不错的方案。

app 端不支持使用 worker, uni 文档上写着需要使用 renderjs 或者 webview,而 webview 往往会设计 webview 通信的问题,在 APP 端的 webview 通信想要不错的支持只能使用 nvue 来实现,而如果你是想要实现一个组件的话就会是 .nvue 组件,而 uni 官方说了 .nvue 组件只能在 .vue 页面中使用,这就带来了其他页面使用该组件的负担,及app的实现必须使用 .nvue,而同时维护 .vue 和 .nvue 文件是有着一定代价的(关于这里,只是单纯的我还没想好怎么处理这里的关系)。所以,我选择了 renderjs

问题
renderjs 在 h5 的表现和你正常开发一个 vue 组件没有什么区别,唯一要注意的点就是使用了不太建议在 vue2 + typeScript 的项目中去实现它,因为一旦使用 vue.extned() 的这个方法去定义组件就会导致 h5 渲染不正常(也可能是单纯的我是个菜逼)

而 renderjs 在 App端 的差异就比较大了,最重要的一点就是视图层和逻辑层的方法与变量不能互相通信,而另一方面,如果使用了 renderjs 作为子组件,在使用最经典的 props/emit 实现的父子间传值就会有点麻烦,就是本文的重点。

实现
首先,我们这个方案依赖于官方文档给的 echarts 的那个 demo。那个 demo 展示了在 app 端如何让视图层与逻辑层通信(即 renderjs 与原来的 script )。

上面两张图片就是官方文档给的 echarts 的那个 demo 外带一点小注解。
下面开始讲讲它作为子组件如何完成与父组件的双向通信。

父组件向子组件传值

  1. 首先,在逻辑层(原先的 script )中正常写 props 接收你父组件要传的值
  2. renderjs 监听该值的变动,随着变动修改自己的属性
<template>  
    <div>  
        <div :prop="test" :change:prop="renderModule.onUpdateTestChange" ></div>  
    </div>  
</template>  
<script lang="ts">  
export default {  
    props: {  
        test: {  
            type: String,  
            default: "",  
        },  
    },  
}  
</script>  
<script module="renderModule" lang="renderjs">  
export default {  
    data() {  
         return {  
                renderTest: '',  
         }  
    }  
    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
            }  
    }  
}  
</script>

但是,实际上有更快的方法。
在视图层与逻辑层能够访问统一个对象(文档上说的),该对象包含一个对象指向本组件,也就是说,可以直接通过该对象访问组件的所有属性和方法,实际上我只在视图层使用过(毕竟在逻辑层没必要=-=),他就是 this.$ownerInstance
所以在逻辑层想要访问 test 值,可以直接

this.$ownerInstance.$vm.test 

再啰嗦一句,这个 $vm 就是组件实例等价于每次正常写的那个 this,所以这样能够访问到就能够理解了。
不过有点奇怪的就是我写的 this.$ownerInstance.$vm.$emit 方法想要尝试触发父组件方法并没有成功,有可能是我写错了,具体原因还不明白,之后有结论了我再更新。

子组件向父组件传值

    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
            }  
    }

这个是刚才的代码,我再借用下。请注意下 ownerInstance 。
我再上面的图片有标注,这个很重要就是因为我们能够看到在点击触发逻辑层方法时,能够通过 ownerInstance.callMethod 触发普通 script 的方法,进而在普通 script 的那个方法下使用 this.$emit 触发父组件方法。但是这样就会有着必须点击才能触发父组件方法的限制,这不能够啊。这个时候可以将 ownerInstance 保存起来,之后想要调用方法的时候就不需要通过点击事件传来的 ownerInstance 才能触发逻辑层的方法了。

    methods: {  
            onUpdateTestChange(newVal, oldVal, ownerInstance, instance) {  
                   this.renderTest = newVal; // 到这里,成功的获得了父组件传来的 test 值并保存在 renderjs 中的 renderTest 中。  
                   if (!this.ownerInstance) this.ownerInstance = ownerInstance;// 这样就能保存了 ownerInstance  
            },  
            // 这个就是尝试  
            niceTry() {  
                    this.ownerInstance?.callMethod('%父组件的方法%',%要传给父组件的参数%);  
            }  
    }

另外再提一嘴,就是 this.$ownerInstance.callMethod 不成,小伙伴们可以自己试试,没准也是我搞错了。

至此,父子组件双向通信就算成了。不懂或是发现错误的小伙伴们可以直接评论,只要我还在做现在这个项目应该会满经常上 uni 这边逛逛的。

收起阅读 »

安装插件失败

插件安装

提示网络错误 所有的插件都安装失败 网络没有问题 重装也不行

提示网络错误 所有的插件都安装失败 网络没有问题 重装也不行

微信登录时,开发版正常,体验版报"获取第三方账号失败"

uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json

把这个文件里面的配置全部再配置一遍就好了. 重点: 如果是微信小程序,把小程序的配置和web端的配置都配置一遍。
怀疑这个bug可能是识别平台的问题,可能是把微信小程序识别成web造成的。

继续阅读 »

uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json

把这个文件里面的配置全部再配置一遍就好了. 重点: 如果是微信小程序,把小程序的配置和web端的配置都配置一遍。
怀疑这个bug可能是识别平台的问题,可能是把微信小程序识别成web造成的。

收起阅读 »

【报Bug】request:fail,系统异常,请联系管理员!

DCloud

https://unicloud.dcloud.net.cn/pages/login/login 后台报错误。从中午左右到这会了,还没好!!!!

https://unicloud.dcloud.net.cn/pages/login/login 后台报错误。从中午左右到这会了,还没好!!!!

画中画(全局)、支持为第三方播放器无缝添加、进度同步更新(andorid)

画中画(全局)、里面的播放器为官方的video、支持为第三方播放器无缝添加(进度同步更新)、完全关闭app/清后台都不会消失:https://ext.dcloud.net.cn/plugin?id=10185

继续阅读 »

画中画(全局)、里面的播放器为官方的video、支持为第三方播放器无缝添加(进度同步更新)、完全关闭app/清后台都不会消失:https://ext.dcloud.net.cn/plugin?id=10185

收起阅读 »

FirstUI组件库系列之图形验证码,滑动验证+旋转验证

ui组件

FirstUI(<https://www.firstui.cn/>)是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序版本,兼顾高效率与高性能,让您的app、小程序开发获得百倍提质提速!

前言:

现在项目开发中,蛮多场景需要用到图形验证码,用于行为验证,提高系统安全性。FirstUI提供了几款相关的组件,下面给大家介绍下,大家可以看看是否适用于自己的项目场景,谢谢关注支持。

一、SlideVerify 滑动验证码

这是最典型的滑动验证码组件,支持自定义样式和重置验证

二、RotateVerify 旋转验证码

旋转验证模式目前用的也比较多了,通过拖动滑块,使图片角度为正来验证行为。

三、SliderCaptcha 滑块拼图验证

滑块拼图验证,大家应该经常见到了吧。借用FirstUI组件库,我们自己的项目中也可以用起来了。

四、RotateVerify 旋转验证码

此组件为 SliderCaptcha 滑块拼图验证 组件的功能补充,是在VIP用户的提议下做了一些改进,社区帖子详情

目前FirstUI组件库提供了以上4款图形验证码,如果大家用得上,FirstUI将会很欣慰,哈哈^_^。

FirstUI组件库

FirstUI官网:<https://www.firstui.cn/>

FirstUI社区:<https://forum.firstui.cn/>

FirstUI uni-app版:

文档地址: https://doc.firstui.cn

github: <https://github.com/FirstUI/FirstUI> (欢迎star :-D)

gitee: <https://gitee.com/firstUI/FirstUI> (欢迎star :-D)

uniapp插件市场FirstUI:<https://ext.dcloud.net.cn/plugin?id=7646>

FirstUI 微信小程序版:

文档地址: https://wxdoc.firstui.cn

github: <https://github.com/FirstUI/FirstUI-weixin> (欢迎star :-D)

gitee: <https://gitee.com/firstUI/FirstUI> (欢迎star :-D)

继续阅读 »

FirstUI(<https://www.firstui.cn/>)是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序版本,兼顾高效率与高性能,让您的app、小程序开发获得百倍提质提速!

前言:

现在项目开发中,蛮多场景需要用到图形验证码,用于行为验证,提高系统安全性。FirstUI提供了几款相关的组件,下面给大家介绍下,大家可以看看是否适用于自己的项目场景,谢谢关注支持。

一、SlideVerify 滑动验证码

这是最典型的滑动验证码组件,支持自定义样式和重置验证

二、RotateVerify 旋转验证码

旋转验证模式目前用的也比较多了,通过拖动滑块,使图片角度为正来验证行为。

三、SliderCaptcha 滑块拼图验证

滑块拼图验证,大家应该经常见到了吧。借用FirstUI组件库,我们自己的项目中也可以用起来了。

四、RotateVerify 旋转验证码

此组件为 SliderCaptcha 滑块拼图验证 组件的功能补充,是在VIP用户的提议下做了一些改进,社区帖子详情

目前FirstUI组件库提供了以上4款图形验证码,如果大家用得上,FirstUI将会很欣慰,哈哈^_^。

FirstUI组件库

FirstUI官网:<https://www.firstui.cn/>

FirstUI社区:<https://forum.firstui.cn/>

FirstUI uni-app版:

文档地址: https://doc.firstui.cn

github: <https://github.com/FirstUI/FirstUI> (欢迎star :-D)

gitee: <https://gitee.com/firstUI/FirstUI> (欢迎star :-D)

uniapp插件市场FirstUI:<https://ext.dcloud.net.cn/plugin?id=7646>

FirstUI 微信小程序版:

文档地址: https://wxdoc.firstui.cn

github: <https://github.com/FirstUI/FirstUI-weixin> (欢迎star :-D)

gitee: <https://gitee.com/firstUI/FirstUI> (欢迎star :-D)

收起阅读 »

uniapp 官方公布的plug 不支持 流文件写入,给你们来一个简单的

文件

uniapp 流文件的写入

fileEntry.createWriter(function(write){
writer.seek(0);
//此处的base64不含 文件的头信息,不能有\r\n. 相当于不能通过 readAsBase64来获取,或者自行替换。
writer.writeAsBinary(base64Str);
writer.abort();
})

没有测试 苹果的,我看的是安卓的,按理说,官方应该同时支持的。
官方还有没公布的,可能有用的 “readAsBase64”,不过跟readAsDataURL差不多,只是 readAsBase64出来的没有文件头,且有\r\n。

继续阅读 »

uniapp 流文件的写入

fileEntry.createWriter(function(write){
writer.seek(0);
//此处的base64不含 文件的头信息,不能有\r\n. 相当于不能通过 readAsBase64来获取,或者自行替换。
writer.writeAsBinary(base64Str);
writer.abort();
})

没有测试 苹果的,我看的是安卓的,按理说,官方应该同时支持的。
官方还有没公布的,可能有用的 “readAsBase64”,不过跟readAsDataURL差不多,只是 readAsBase64出来的没有文件头,且有\r\n。

收起阅读 »

安卓终于支持检测系统深色模式(暗黑模式)了

安卓 暗黑模式

这是官方更新有关于检测深色模式的文档
目前有版本兼容问题,安卓10以下不可以使用,而且要注意的是,不能使用真机调试,真机调试只能检测出light,检测不出dark,建议写好之后打包测试。

manifest.json节点添加,不添加无法检测暗黑模式

"plus": {    
"distribute": {    
  "google": {    
    "defaultNightMode": "auto"    
  },    
},  
}

检测系统深色模式

//官方方法  
function getUIStyle(){    
  plus.nativeUI.setUIStyle("auto")  
  var style = plus.navigator.getUIStyle();    
  if('dark'==style){    
    console.log('当前为暗黑模式');    
  }else{    
    console.log('当前为普通模式');    
  }    
}  

//其他检测方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {  
        console.log('当前为暗黑模式');    
    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {  
         console.log('当前为普通模式');    
    } else {  
            console.log("获取系统深浅模式失败");  
   }

动态检测系统深浅模式切换

//官方方法  
  document.addEventListener('uistylechange', function(){    
    var style = plus.navigator.getUIStyle();    
    console.log(('dark'==plus.navigator.getUIStyle())?'切换为暗黑模式':'切换为普通模式');    
  }, false);  

//其他方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
let listeners = {  
        dark: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                console.log('当前为暗黑模式');    
            }  
        },  
        light: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                 console.log('当前为普通模式');    
            }  
        }  
    }  
    window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)  
    window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
继续阅读 »

这是官方更新有关于检测深色模式的文档
目前有版本兼容问题,安卓10以下不可以使用,而且要注意的是,不能使用真机调试,真机调试只能检测出light,检测不出dark,建议写好之后打包测试。

manifest.json节点添加,不添加无法检测暗黑模式

"plus": {    
"distribute": {    
  "google": {    
    "defaultNightMode": "auto"    
  },    
},  
}

检测系统深色模式

//官方方法  
function getUIStyle(){    
  plus.nativeUI.setUIStyle("auto")  
  var style = plus.navigator.getUIStyle();    
  if('dark'==style){    
    console.log('当前为暗黑模式');    
  }else{    
    console.log('当前为普通模式');    
  }    
}  

//其他检测方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {  
        console.log('当前为暗黑模式');    
    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {  
         console.log('当前为普通模式');    
    } else {  
            console.log("获取系统深浅模式失败");  
   }

动态检测系统深浅模式切换

//官方方法  
  document.addEventListener('uistylechange', function(){    
    var style = plus.navigator.getUIStyle();    
    console.log(('dark'==plus.navigator.getUIStyle())?'切换为暗黑模式':'切换为普通模式');    
  }, false);  

//其他方法 如不生效请在页面添加<meta name="color-scheme" content="light dark">  
let listeners = {  
        dark: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                console.log('当前为暗黑模式');    
            }  
        },  
        light: (mediaQueryList) => {  
            if (mediaQueryList.matches) {  
                 console.log('当前为普通模式');    
            }  
        }  
    }  
    window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)  
    window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
收起阅读 »

pdf转图片、pdf幻灯片、pdf预览(ios、andorid)

pdf转图片、pdf幻灯片、pdf预览(ios、andorid) : https://ext.dcloud.net.cn/plugin?id=10215

pdf转图片、pdf幻灯片、pdf预览(ios、andorid) : https://ext.dcloud.net.cn/plugin?id=10215