Weex入门
1.weex的介绍
weex是2016年4月阿里巴巴在Qcon大会上宣布开元的一套跨平台移动开发工具。
weex主要解决了平凡发版和多段研发的两大痛点，同事解决了前端语言性能查和显示效果受限的问题。
开发者只需要在自己的app中嵌入weex的sdk，就可以通过撰写html/css/javascript来开发native级别的weex界面，(H5与native有啥区别？)weex界面的生成码其实就是一段很小的js，可以向发布网一样轻松部署在服务器端，然后再app中执行。
2.weex的优势
支持ES6规范
性能优异，开发简洁标准，体积小巧
跨平台
3.weex调试工具
4.weex开发环境搭建
安装依赖node.js
npm install -g weex-toolkit
weex -v
weex init project 初始化项目
cd project
npm start
npm run serve 静态服务
npm run dev
weex debug —调试手机上的效果
5.weex通用样式
weex分为通用样式和文本样式
1.Weex对于长度值目前只支持像树枝，不支持相对单位（em、rem）；适配以750px标准；
2.设定边框,border目前不支持类似这样border:1px solid #ff0000;的组合写法；
3.设定背景颜色,background 目前不支持类似这样backgroun:red;的写法，需要修改为具体的background-color:red;
4.定位
weex的position定位，relative、absolute、fixed、sticky,默认值为sticky
weex目前不支持z-index设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
如果定位元素超过容器便捷，在Android下，超出部分将不可见，原因在于Android端元素overflow默认值为hidden
weex支持线性渐变（linear-gradient）、不支持径向渐变（radial-gradient）
weex中box-show仅仅支持IOS
目前<image>组件无法定义一个或几个角的border-radius，只对IOS有效，对Android无效
weex中，flexbox是默认并且唯一的布局模型，每个都默认用友了display:flex属性。
6.内建组件
<template>
<div class="wrapper">
<image :src="logo" class="logo" />
<text class="greeting">The environment is ready!</text>
<a href="#">fdg</a>
<web class="web" :src="src" @pagestart="start" @pagefinish="finish" @error="error"></web>
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from \'./components/HelloWorld.vue\'
// import { METHODS } from \'http\';
export default {
name: \'App\',
components: {
HelloWorld
},
data () {
return {
src: \'https://www.baidu.com/\',
logo: \'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png\'
}
},
methods: {
start () {
console.log(\'start\')
},
finish () {
console.log(\'finish\')
},
error () {
console.log(\'error\')
}
}
}
</script>
<style scoped>
.wrapper {
justify-content: center;
align-items: center;
}
.logo {
width: 424px;
height: 200px;
border-top-right-radius: 50px;
background-color: red;
}
.greeting {
text-align: center;
margin-top: 70px;
font-size: 50px;
color: #41B883;
border-width: 10px;
border-color: #000;
border-style: solid;
background-image: linear-gradient(to top,black,white);
}
.message {
margin: 30px;
font-size: 32px;
color: #727272;
}
.web{
width: 100%;
height: 500px;
}
</style>