【慕课网】Weex入门
讲师：你好_方老师 课程：https://www.imooc.com/learn/948
第一章 weex 介绍
1-1 weex 介绍
weex 介绍
2016 年 4 月阿里巴巴在 Qcon 大会上宣布开源的一套跨平台移动开发工具
主要解决了频繁发版和多端研发的两大痛点，同时解决了前端语言性能差和显示效果受限的问题
只需要在自己 app 中嵌入 weex 的 sdk，就可以通过撰写 html/css/javascript 来开发 native 级别的 weex 界面，weex 界面的生成码其实就是一段很小的 js，可以像发布网页一样轻松部署在服务端，然后在 app 中请求执行
weex 优势
支持 ES6 规范
性能优异，开发简洁标准，体积小巧
跨平台
weex 调试工具
- weexplayground
1-2weex 开发环境的搭建
安装 node.js
npm install -g weex-toolkit
weex init (project.name)
cd (project.name)
npm install
npm run serve //开启服务
npm run dev //开启 APP
npm run debug //开启调试
第二章 weex 通用样式
2-1 weex 通用样式介绍
适配和缩略
weex 对于长度值目前只支持像素值，不支持相对单位(em,rem);适配以 750px 标准
- 屏幕适配系数，使用 scale
设定边框，border 不支持简写，如 border:1px solid #ffffff;
设定背景色不支持 background:#000000;这个写法，需要写成 background-color:#000000;
2-2 weex 通用组件的介绍
定位
weex 支持 position 定位，relative|absolute|fixed|sticky，默认值为 relative
weex 目前不支持 z-index 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面
如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden
其余需要注意的地方
weex 支持线性渐变 linner-gradient 不支持 radial-gradient 径向渐变
weex 中 box-shadow 仅仅支持 IOS
目前<image>组件无法定义一个或几个角的 border-radius，只对 IOS 有效，对 Android 无效
weex 中，flexbox 是默认并且唯一的布局模型，每个元素都默认拥有了 display:flex 属性
第三章 weex 内建组件
3-1 <a>组件
weex 中 a 组件定义了指向 weex 页面打包后的一个 js 地址
- a 组件无法跳转 html 页面（后面会介绍怎么跳转 html 页面）
组件中无法添加文本，需要在其中加上 text 组件才能添加文本
此组件支持除自己外的所有 weex 组件作为子组件
支持所有通用样式
请不要为<a>组件添加 click 事件
3-2 <web>组件
<web>组件用于在页面中嵌入一张网页；src 用以指定资源地址
不支持任何子组件
pagestart，<web>组件开始加载时执行
pagefinish，<web>组件完成加载时执行
error，<web>组件加载错误时执行
3-3 <webview>组件
weex 内建模块
<webview>模块
一系列<web>组件的操作接口，可以通过 this.$refs.el 来获取元素的引用
引入
const webview = weex.requireModule("webview");API
goBack(webElement)，加载历史记录里的前一个资源地址
goForward(webElement)，加载历史记录里的下一个资源地址
reload(webElement)，刷新当前页面
3-4 <list>组件——实现下拉刷新和上拉加载
<list>组件
<list>组件是垂直列表功能的核心组件
<cell>组件，列表中的子项；类似于 html 中的 ul 和 li 的关系
<header>到达屏幕顶部时，吸附在屏幕顶部
<refresh>给列表加下拉刷新的功能
loadmore 事件，loadmoreoffset{number}触发事件所需距离
scroll 事件列表滚动时触发该事件
offset-accuracy{number}控制 scroll 事件发生的频率。（默认 10px）
<refresh>组件
用于提供下拉加载功能。<scroller>和<list>的子组件，只有被这两个组件包含时才能正常展示
refresh 事件，当 list 组件和 scroller 组件被下拉时触发
pullingdown 事件
vue 基础知识
vue-router 介绍
vue-router 介绍
针对 vue.js 开发的一个前端路由工具，可以方便快速的开发单页应用
vue-router 是以 vue.js 插件的形式存在的，我们在使用 vue-router 之前需要先引入 vue 文件。因为 vue 是 weex 内置的前端框架，所以不需要再引入一次了，只需要引入 vue-router 并注册就可以了
我们需要在 template 模板中添加<router-view>的方式定了路由的出口，路由匹配到了对应的 vue 文件就会替换这个标签
在我们向应用中注册 router 之前，需要先创建一个路由实例，并且配置对应的路由规则
在应用中注入路由功能，我们还需要给入口组件添加 router 属性，使应用和路由建立联系