weex css单位,weex 踩坑

1. 用weex实现页面跳转？

1.1 使用vue-router

position: fixed/sticky 的元素，在切换页面后不会消失

image.png

1.2 使用navigator 作为跳转方案

通过谷歌、百度出来都方案, 都比较复杂，折腾了两天未实现。

2. css支持性

2.1 选择器只支持单个类名选择器

# bad

.the-article .title {}

# good

.the-articel__title {}

2.2 css单位不支持em,rem,百分比

# bad

.the-article {

width: 100%;

}

# good

.the-articel {

width: 750px;

}

2.3 布局只能使用Flexbox, 不支持内联布局display: inline/float

例如下面的文字加粗效果无法实现

image.png

2.4 不支持align-self: stretch, 无法实现两列等高布局

2.5 不支持负边距

# bad

.the-image {

margin-left: -10px;

}

# good

.the-image {

transform: translateX(-10px);

}

2.6 不支持z-index, 没有层级概念, 靠后都元素层级更高

2.7 伪类选择器只支持active focus disabled enabled

# bad

.list-item:first-of-type {}

.list-item:last-of-type {}

.list-item:before {}

.list-item:after {}

# good

.list-item--first {}

.list-item--last {}

2.8 不支持背景图片

background-image: url(***);

3. js & vue 的支持性

3.1 不支持按需加载

# bad

const Home = () => import('@/pages/home')

# good

const Home = require('@/pages/home')

# or

import Home from '@/pages/home'

3.2 不支持事件修饰符

# bad

3.3 clss不支持常规写法

# bad

# good

3.4 不支持触发/监听原生事件

# bad

this.$on('click', () => {})

this.$emit('click', '啦啦啦')

# good

this.$on('btnClick', () => {})

this.$emit('btnClick', '啦啦啦')

3.5 不支持组件缓存

# bad

3.6 不支持定时器setInterval, 只能用setTimeout模拟

4. 支持加载网络图片,不支持加载本地图片, 如需支持, 需要先在android 和 ios 端代码中分别实现。

5. 纵向scroller不能嵌套同向scroller或list，例：纵向scroller不能嵌套同向scroller或list

6. list组件, ios要设置高度，否则不显示

...

7. eslint的waining要解决调，否则打包失败

8. 内置组件如slider, 样式只能通过特定的css属性修改

# 修改轮播图小点的颜色

.base-slider__indicator {

item-color: #cdcfd0;

item-selected-color: #00ae66;

}

9. 所有文字必须用包裹，否则样式在真机上不生效。text不能再包含其他标签。

# bad

大师兄，师傅被妖怪抓走了

# bad

大师兄，二师兄被妖怪抓走了

# good

大师兄，我被妖怪抓走了

10. 社区不活跃，资料不足，文档简单，第三方支持太弱。出了问题找不到解决方案。

11. 不支持的api，调试工具不报错，无法定位问题。

好的地方

自动做响应式布局, 开发过程只需要按照设计稿尺寸写像素值px

image组件支持默认图片, 支持图片自适应

css属性lines, 简化多行超出点点点的实现

refresh支持下拉刷新

slider 轮播图组件

scroll、list 滚动组件

modal 弹框组件

animation 转场动画

其他app原生能力

weex css单位,weex 踩坑相关推荐

weex css单位,Weex系列(7) ——踩坑填坑的总总
目录使用weex已经一年半了,踩了很多坑,也流了很多泪填上,总结一波,希望对大家有所帮助. LaunchImage 这是今年来的第一个调整,需要把 iOS8.0 and Later勾上,不然iPho ...
【CSS】记踩坑-图片3D旋转设置景深perspective
在练习CSS3图片3D旋转的时候,为了使图片更有旋转的立体效果,设置了景深,但发现图片的旋转角度发生了偏移. 设置景深之前: CSS <style>div{margin-top: 200p ...
weex 一个传说级巨坑-- 2018最新版weex踩坑指南(weex navigator 多界面跳转)
先说结论,本人极度非常不推荐weex作为任何商用开发有很多人会说了... 你瞎扯.. 你看别人阿里.. 啊飞猪... 啊那个支付宝... 人家不是用得好好的么... 当然这也是我们公司作为技术选型 ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
【踩坑笔记】animate.css无效【非版本问题】
之前看前端杂志了解到animate.css动画库,于是决定去学习一下.谁知道遇到了非常多的坑,也很少有博客记录了我这种问题,在此留下笔记,希望能帮到遇到同样问题的人. 初识首先是animate.cs ...
踩坑～CSS～8 位16 进制颜色
踩坑-CSS-8 位16 进制颜色背景初步结论网页颜色 16 进制数字表示方法十进制"函数"表示支持度与最终结论背景我在开发 webview 环境下的 H5 小应用( ...
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
Weex实战分享|Weex在极客时间APP中的实践
本文是根据 WeexConf2018 中议题<Weex在极客时间APP中的实践>内容文档整理而成.主要分享极客时间在深度使用Weex过程中的一些经验和体会. 孙涛极客邦前端负责人大家 ...

weex css单位,weex 踩坑

weex css单位,weex 踩坑相关推荐

最新文章

热门文章