网站建设资讯

NEWS

网站建设资讯

css样式uni,CSS样式的类型有哪些?命名规则具体是什么?

Uni设置公用样式网页不生效

没有在页面引入更改的css。

超过十余年行业经验,技术领先,服务至上的经营模式,全靠网络和口碑获得客户,为自己降低成本,也就是为客户降低成本。到目前业务范围包括了:成都网站设计、网站建设、外贸网站建设,成都网站推广,成都网站优化,整体网络托管,小程序开发,微信开发,App定制开发,同时也可以让客户的网站和网络营销和我们一样获得订单和生意!

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。

DCloud于2012年开始研发小程序技术,优化webview的功能和性能,推出了HBuilder开发工具,为后续产业化做准备。

2015年,DCloud正式商用了自己的小程序,产品名为“流应用”,它不是模式的轻应用,而是能接近原生功能、性能的App。

uni-app 入门到精通 (二)

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ,由于一些原因,该方案并没有执行,该项目一系列文章也就没有再写下去,所以遭受到了许多人评论的吐槽,到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中,所以想根据项目实际开发分享一下,有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ,我们采用 vue-cli 来初始化项目, HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板,这个是 dcloudio 的官方提供模板

我们选择默认模板即可,

成功后我们执行

打开浏览器地址,直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解,这里简单介绍一下,

当然 PostCSS 具体使用是需要引入一些插件的,例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料,毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定, uni-app 支持的通用 css 单位包括 px、rpx , 之前的 upx 方案已经被废弃掉,官方解释是目前市面上已经基本上支持了微信的 rpx 方案,所以 upx 中转方案已经意义不大了,不过还可以继续使用,不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案,即根据宽度来进行适配以 750 宽屏幕为基准, 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话,你只需要将屏幕上 px 写为 rpx 即可,不用做任何换算,如果不是的话,你就需要做如下换算:

uniapp 有自己一套路由管理机制,而未采用 vue-route 方案,个人认为这套方案还是比较成熟和好用的,以及可以满足我们日常的需求:

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

注意: 如果调用了 uni.preloadPage(OBJECT)) 不会关闭,仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

注意: 如果调用了 uni.preloadPage(OBJECT)不会关闭,仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

5.uni.preloadPage(OBJECT)

预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。

以上路由API 已经满足我们的需求,当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下,需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候,会出现页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ,具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用,而是进过一系列的封装以方便我们的使用,具体封装接口使用会在随根据页面数据请求一并展示。

uni-app 为什么CSS运行到到手机上就错位了

正常操作,苹果手机总会出现各种各样的问题的,可能是不兼容某个属性,慢慢排查调整,建议先在微信开发者工具上测试,比在浏览器上的好一点。

纯css写码一个漂亮的优惠券,支持小程序/uni-app/vue语法

欢迎加我技术交流QQ群 : 811956471

1.本示例中的特色是,纯css写的优惠券齿轮,和中间的虚线;

2.样式类.oilline 用css实现了,中间粗且高亮两端细的渐变线条;

3.css实现容器右上角旋转45度的圆角角标,再也不用ui切图了;

4.补充:由左向右,左边粗,向右渐变变细的线条:

怎么修改showloading.css样式

CSS样式修改,首先要确定你css样式所写的位置,如html中文件,需要找到对应的id,class或者是标签名,然后需要想好你要改的样式,然后正确填写就行了,请看代码: #sub{ //通过id实现 width:300px; height:30px; font-size:13px;//将id为sub的字

uniapp开发微信小程序富文本编辑器(样式仿腾讯文档)

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

项目地址:

uniapp插件市场:

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

否则会受到小程序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组件控制拉起键盘操作支持吗?

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

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

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

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

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

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

小程序富文本编辑器editor初体验:( )

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


文章名称:css样式uni,CSS样式的类型有哪些?命名规则具体是什么?
URL网址:http://cdweb.net/article/dsipgcs.html