声享正努力加载中...
带你入坑weex
什么是Weex?
Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。
安装到上线的流程？
npm install weex-toolkit -g
weex create awesome-app
cd awesome-app
npm install
npm start
(webpack启动一个本地的 web 服务 只在浏览器上预览页面是实时刷新的)
weex preview src --entry src/index.vue
(weex-toolkit工具支持对你的Weex文件（.we或.vue)在监听模式下进行预览)
安装weex-builder
npm install -g git+ssh://git@gitlab.changbaops.com:10212/changbafe/weex-builder.git
jsbundle上传cdn
与web标准的异同？
web-标签 weex-组件
<div>组件：用于包装其它组件的最基本容器。【不能直接在里面添加文本】
<text>组件：只能包含文本值 文本样式写在此组件上
<a>组件：用于实现页面间的跳转
<image>组件：用于在界面中显示单个图片。 图片必须定义高度宽度 实现方式是背景图
<slider>组件：轮播图 <indicator> 轮播图指示器
<input><textarea>组件：文本输入框
滚动视图组件：
与 Web 里的页面不同，原生开发里的视图，是不会默认装进滚动视图里的。如果视图需要滚动，必须显式使用合适的滚动视图。不同的滚动视图有不同的实现及接口，适用于不同的场景。滚动视图的选择，要综合考虑开发效率与运行性能，作出合适的折衷。
scroller: 垂直滚动，只要子组件的总高度高于其本身
slider: 轮播容器，横向滚动
list: 垂直滚动，长列表的展示，拥有平滑的滚动和高效的内存管理
waterfall: 网格视图，瀑布流布局的组件
recycle-list: 网格视图，具有回收和复用的能力，可以大幅优化内存占用和渲染性能
滚动视图的应用场景：
滚动区域内没有重复规律的子视图，使用 scroller, 如“发现”页面
轮播图、Banner等横向分页滚动的视图，使用 slider，如“点歌台->Banner”
普通的垂直滚动列表，使用 list，如“我的粉丝列表”
多行多列的滚动视图，使用 waterfall，如“榜单”、瀑布流
一行多列的横向滚动视图，使用 scroller，如“演唱教学->专业套课”
可重用的垂直滚动列表，使用 recycle-list
当weex内置组件满足不了我们的需求时，需要客户端封装组件 暂时有<scratch>刮刮乐组件和<adBanner>广告banner组件
样式差异?
布局用flex：不需要手动为元素添加 display: flex; 属性，默认是竖向排列
定位：不支持 z-index ，靠后的元素层级更高
单位：px和wx,不支持%
伪类:支持active, focus, disabled, enabled
渐变：支持线性渐变（两种颜色），不支持径向渐变
简写：不支持，比如border,background
不支持display: none;可用opacity: 0 || height：0代替
等同于v-show不可用，用v-if代替
box-shadow：仅iOS支持
选择器：只支持单个类名选择器
安卓：宽高更为严格，margin-top:-40px; 不生效
<image>组件：border-radius对安卓无效
背景色：安卓默认白色，iOS灰色
结构差异？
Weex没有DOM&BOM
不支持 DOM 操作：document.getElementById=>this.$refs
没有window 和 screen 对象：
用weex.config.env === WXEnvironment获取设备的屏幕或环境信息
没有 history 、location 、navigator 对象
有navigator模块实现跳转
开发中遇到的问题？
1.计算可视区域高度
2.ios安卓module用法不同
3.浏览器有跨域问题，移动端没有
4.调试相对麻烦
