转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78328423.
本文出自 [ 党耀的博客 ]
踩坑分享
在学习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,这里也是一个作用域问题。