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调试工具

Weex Playground App

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>

 

 

 

转载于:https://www.cnblogs.com/mingmliang/p/9274229.html