uniappnvue怎么切换深色模式样式

html-css030

uniappnvue怎么切换深色模式样式,第1张

在uniappnvue中,可以通过修改css来实现深色模式样式的切换。步骤如下:

1、安装uniappnvue,打开css文件,更改其中的代码。

2、将background-color和主题颜色替换成你想要的深色模式。

3、上传修改后的css文件,就可以开始使用深色模式样式了。

照着腾讯文档小程序开发了微信小程序富文本编辑器组件,这几天做个整理,如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序,无法做到百分百效果,只能按现有开放api尽可能实现。

项目地址:

https://github.com/chellel/wechat-editor-project

uniapp插件市场:

https://ext.dcloud.net.cn/plugin?id=6365

editor富文本编辑器组件官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否则会受到小程序css影响。小程序本身editor标签有css样式:

editor {

display: block

position: relative

box-sizing: border-box

-webkit-user-select: text

user-select: text

outline: 0

overflow: hidden

width: 100%

height: 200px

min-height: 200px

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目标文字时,将值设为\n',可以实现换行

this.editorCtx.insertText({ text: '\n' })

参考:请问editor组件控制拉起键盘操作支持吗?

https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘,必须用户点击;安卓则可以。所以,终究是不一致,不行。。

该组件主要为微信editor组件的api调用集成封装,因此受到的限制同文档描述一致,即编辑器内支持部分 HTML 标签和内联样式,不支持class和id,支持的标签详见: https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不满足的标签会被忽略,<div>会被转行为<p>储存。

这也是为什么在做富文本解析时,仅仅用rich-text组件无法有效还原html内容,在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。

所以,开发者需要自行权衡在做富文本编辑开发时,是否使用微信自带的editor组件,或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验:( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生开发,将demo组件中的相关dom元素标签和api换成微信原生即可。

由于是用uniapp写的,所以在网页上也可以用,先上预览图

主要功能:

css样式原理如下,红色框为用户视图。拖拉的时候改变left数值就可以了。

小tips:

当宽度为自适应,不知道具体数值,而需要用宽度计算时,可以用 padding-bottom 。这样我们就可以一行放下七个圆形了。

所有css如下:

数字偏上是预留位置给当天的状态显示。

功能与解释都在注释中写明。

好了,基本上就这些。感觉js写的有点笨。如果有不懂的 或者 有更好的方法请在评论区告诉我,谢谢!