Weex踩坑记录

转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78328423.
本文出自 [ 党耀的博客 ]

参考官方文档 https://weex.apache.org/cn/references/index.html

踩坑分享

在学习weex时需要详细阅读官方文档

目录

list标签和scroller标签

这里只需要注意一点，list和scroller都是支持垂直和横向滚动的，具体属性参考官网，但是如果想要互相嵌套的话必须是不同方向的。

布局踩坑

问题一 ：首先看下面这段代码

<image class="zhuboImg" :src=""></image>

在Android里以及在JavaScript里如果给变量赋一个空字符串是可以的并没有什么问题，然而在Vue里，用 :src 这种格式表明的是一个数据绑定，而不是给变量赋值，那么问提就来了，编译的报错是这样的：

ERROR in ./~/weex-vue-loader/lib/template-compiler.js?id=data-v-09cd97ce!./~/weex-vue-loader/lib/selector.js?type=template&index=0!./src/views/index.vue
    Module build failed: SyntaxError: Unexpected token (180:8)
        at Parser.pp$4.raise (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js:2231:15)
        at Parser.pp.unexpected (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js:613:10)
        at Parser.pp$3.parseExprAtom (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js:1832:12)
        at Parser.parseExprAtom (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js:3800:24)
        at Parser.pp$3.parseExprSubscripts (/Users/dangyao/WebstormProjects/tbdx-weex/node_modules/vue-template-es2015-compiler/buble.js:1725:21)
    ….
     @ ./src/views/index.vue 12:23-155

相对移动端开发来说前端的调试会比较麻烦，weex更是很好的继承了这一点。这种报错你绝壁找不到位置，报错的行数和你实际代码的位置相差了十万八千里。

问题二：

给bar设置了width:100%;结果未生效，没有铺满全屏。

<div class="bar">
    <image class="cameraImg" :src="cameraUrl" @click="gotoCamera"></image>
    <text class="fragment">淘宝大学</text>
    <image class="searchImg" :src="searchUrl" @click="gotoSearch"></image>
</div>

表示百分比值，如“50％”，“88.8％”等。它是 CSS 标准的一部分，但 Weex 暂不支持。

说明：在 Weex 中，Flexbox 是默认且唯一的布局模型。以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。需详细了解flex相关属性：flex-direction、justify-content、align-items请参考上面的文档。

用以下样式解决：

<style scoped>
  .bar{
    flex-direction:row;
    justify-content:space-between;
    height:80px;
    background-color: rgba(255, 255, , 1);
  }
  .fragment{
    flex:1;
    top:25px;
    text-align:center;
    font-size: 30px;
    color: #994563;
  }
</style>

注意：
1.只有style标签加入scode才默认以750px的屏幕渲染
2.rgb(a,b,c) 或 rgba(a,b,c,d) 的性能比其他颜色格式差很多，请选择合适的颜色格式

作用域问题

 //在function里this的作用域是当前的函数
 module.openWindow(obj, function (e) {});
 //在箭头函数里，this的作用域是全局的
 module.openWindow(obj, (e) => {});

在回调的内部函数内调用外部函数或者变量，最好把回调写为箭头函数，在箭头函数内的作用域是全局的，可以用this直接调用外部的函数或者属性。

使用计算属性时注意

computed 计算属性下调用data里的值或者methods里的方法都需要用this，这里也是一个作用域问题。