初识weex系列（前端视角） - 步入正轨

时间 2019-11-17

标签 weex 系列前端视角步入正轨繁體版

原文原文链接

补充前面知识一点，打包出来的app怎么更换图片，改变下图的图片路径就好javascript

咱们如今开始，讲讲weex的组件和模块，只讲weex关于前端的部分，由于时间问题，我会结合官网的一些可用的demo和指出一些坑，假如讲得很差，多多担待。html

咱们在html中，有很是多的标签，weex就是把这些标签编译成android或者ios平台上的组件
在线编辑代码
在weex里面，咱们每个组件的布局不能跟html里面那样随性，局限了一部分功能，例如布局上，在安卓布局这块，有四种布局
引用简书的一个地址:www.jianshu.com/p/f32afa6ce…前端

线性布局（推荐）=> 相似前端的flex布局
相对布局 => 相似前端的定位。
帧布局 => 用于动画或者播放器之类的
表格布局 => 相似前端的表单复制代码

注意事项

咱们先从盒模型开始讲起，其实也没什么好讲的，官放上说border不支持复合写法（经本人测试，浏览器端可使用，可是手机端是无效的，要注意使用分离的写法）vue

Weex 盒模型的 box-sizing 默认为 border-box

Flex 容器

以往，咱们写移动端是否是，是否是常常用到100%这种百分比的流式布局法，很惋惜安卓的布局不支持百分数。而且，weex不支持float浮动属性，默认就是flex因此，咱们用flex布局的方式来写布局。
接下来咱们直接进入/src/foo.vuehtml5

<template>
  <div>
    <div v-for="(v, i) in list" class="row">
      <div v-for="(text, k) in v" class="item">
        <div>
          <text>{{text}}</text>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .item{
    flex:1;
    justify-content: center;
    align-items:center;
    border-width:1;
  }
  .row{
    flex-direction: row;
    height:80px;
  }
</style>
<script>
  module.exports = {
    data: function () {
      return {
        list:[
          ['A', 'B', 'C'],
          ['D', 'E', 'F'],
          ['G', 'H', 'I']
        ]
      }
    }
  }
</script>复制代码

禁止引入html自带的一些标签，而且不要用html5自带的标签(header,footer等)weex不识别

由于不支持html5的标签，相似header，footer，一概用用div代替java

我的推荐写法，每个组件都包裹一个顶层的div，而且顶层div不写样式，这样就避免了一些bug
(还记得上一讲，为何在web居中了，可是在虚拟机中没有居中吗？缘由就是没有加一个顶层不带class的div)复制代码

text标签

text标签在html里面是没有的，在weex里有什么用呢？凡是文字的你都要用text标签包裹，这是规定。
例如：android

<text class="title">Hello</text>复制代码

另外text有个很特殊的样式ios

lines {number}: 指定文本行数。默认值是 0 表明不限制行数。复制代码

这个样式性颇有用，使用场景有点像text-overflow，就是多行状况下我限制显示几行
可是官方demo又有一个错误，lines不能写在标签做为属性的。我的测试时无效的，必须写在样式表里面。
错误写法
git

正确写法写在样式表里面

谨记如下五点

weex不支持border复合写法。因此，咱们要分开写
盒模型是border-box，而不是常规浏览器下的content-box
不支持float:left/right 用 flex代替
安卓的dpi是一倍，苹果设备目前都是两倍的www.cnblogs.com/yaozhongxia…
weex不支持rem em ,不支持百分比，可是放心使用，其实内部已经适配好了，不一样手机看到的大小确定不是固定的

上面是一些规范或者说是通用特性，下面咱们来说讲一些所见即所得的组件，更多通用特性见官网，由于坑我都列出来了，你看官网绝对一马平川。github

input组件

input不支持click事件,为何不支持click，由于input点击事件，安卓系统就会调用输入法，可能会形成冲突
input标签最后必定要写斜杠或者闭合标签，不然只能在网页加载出来，在虚拟机中是加载不出来的。
官方写法

<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>复制代码

相似html的写法

<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"/>复制代码

madal 模块

咱们接触的第一个内建模块，就是weex操做原生的一个模块，咱们vue的写法只是写ui
按常理来解释，有点像前端咱们所说的toast，或者alert prompt之类的，可是他是原生的，这懂了吧？
require madal
有两个参数，第二个是点击以后作的事情。

const modal = weex.requireModule('modal')
    export default {
        methods: {
            oninput (event) {
                console.log('oninput:', event.value)
                modal.toast({
                    message: `oninput: ${event.value}`,
                    duration: 0.8
                })
            },
            onchange (event) {
                console.log('onchange:', event.value)
                modal.toast({
                    message: `onchange: ${event.value}`,
                    duration: 0.8
                })
            },
            onfocus (event) {
                console.log('onfocus:', event.value)
                modal.toast({
                    message: `onfocus: ${event.value}`,
                    duration: 0.8
                })
            },
            onblur (event) {
                console.log('onblur:', event.value)
                modal.toast({
                    message: `input blur: ${event.value}`,
                    duration: 0.8
                })
            }
        }
    }复制代码

当触发不一样的事件，就会弹出不一样的框，能够输入啊等等。

image组件

前面咱们说过文字都要用text ,在weex里，关于图像的都要用image标签。
div标签也不能直接设置背景图片，只能设置背景色，因此image标签也是颇有用的
image 组件用于渲染图片，而且它不能包含任何子组件。
须要注意的是，须要明确指定 width 和 height，不然图片没法显示。
若是须要实现 background-image 的效果，可使用 image 组件和 position 定
位来现实，以下面代码。

<template>
  <div>
    <image style="width:750px; height:750px;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
    <div class="title">
      <text style="font-size:50px; color: #ff0000">你好，image</text>
    </div>
  </div>
</template>
<style>
  .title{
    position:absolute;
    top:50;
    left:10;
  }
</style>复制代码

切记的一点:闭合标签

<image :src="logoUrl" class="logo"></image>复制代码

这时候，有个很是重要的点，就是weex屏幕的适配：咱们无论屏幕的分辨率是多少，其实weex本身内部有一个换算比，宽是750px,g高是1250px上下，无论你跑在任何手机上，安卓大部分手机都是百分之百的显示，能够去android studio里面下载多几部不一样的分辨率手机分别测试，而后进行一点点的微调(主要是高度，可是手机通常高度都忽略)

video组件

默认是调用原生安卓播放器进行播放。
在小型的app用video仍是很不错的,

<template>
  <div>
    <video class="video" :src="src" autoplay controls
      @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    <text class="info">state: {{state}}</text>
  </div>
</template>
<style scoped>
  .video {
    width: 630px;
    height: 350px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .info {
    margin-top: 40px;
    font-size: 40px;
    text-align: center;
  }
</style>
<script>
  export default {
    data () {
      return {
        state: '----',
        src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
      }
    },
    methods:{
      onstart (event) {
        this.state = 'onstart'
      },
      onpause (event) {
        this.state = 'onpause'
      },
      onfinish (event) {
        this.state = 'onfinish'
      },
      onfail (event) {
        this.state = 'onfinish'
      }
    }
  }
</script>复制代码

这里要提一点，假如你在网页上没有任何效果，就在虚拟机中试试，weex的web环境仍是模拟不了真实的安卓环境。

stream 模块

提供了一个ajax的方式来加载外部的资源，官方例子很完整，你们复制下来，看看具体api，通常会用jq的ajax请求，就会用了。

methods: {
      getStarCount (repo, callback) {
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: 'https://api.github.com/repos/' + repo
        }, callback)
      }
    },复制代码

a组件和web组件

在网页上a标签在html上是页面和页面之间的跳转，那weex里面呢？

<template>
  <div class="wrapper"> <a class="button" href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js"> <text class="text">Jump</text> </a> </div>
</template>复制代码

a标签也是进行页面跳转的，可是href连接的地址，是一个js文件，这个js文件是咱们weex能解读的js文件
咱们能够把编译后app.weex.js的文件放到根目录下取名hello.js，而后用a标签连接到这个js文件，就能够点击跳转到这个hello.js的页面，能够这么理解每个编译后的app.weex.js就是一个页面

<a class="button" href="/hello.js">
      <text class="text">Jump</text>
</a>复制代码

web组件

有点像iframe，通常引入第三方的资源，web组件要有width属性,不然加载不了
使用组件在 Weex 页面中嵌入一张网页内容。src 属性用来指定资源地址。

<web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web>复制代码

url必定要带协议例如访问百度url:https://www.baidu.com/复制代码

总结:

weex上手仍是有必定难度的，多看官网，多踩坑，建议你们拓展一下屏幕适配，安卓和ios之间的差别，假如你还会vue语法的话，你会发现weex真的还挺好的。（由于本人也不是大神，时间也有限，并且都是基础，就不整理源码了，你们多敲一敲代码，更加能成长起来）