weex初学踩坑记录-weex-loader0.7.2版本

最近公司的项目中用到了alibaba的一个app 解决方案 weex 这个框架， 总之是一不小心的入得坑，目前初学阶段已经踩了许多坑了，总而言之这东西是有点坑的。官方手册也不是很完整。应该目前市场上使用的也不多

强烈建议等这玩意儿稳定了之后大家在使用这个框架

目前是使用weex 、vue结合的方式来开发一个APP的

记录下踩坑记录

路由问题

目测目前的weex不支持vue的路由中的chiidren， 也不支持多级router-view,大家使用的时候慎用，给个例子看看

router.js的文件内容

/*global Vue*/
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/1'
Vue.use(Router)

module.exports = new Router({
    routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }, {
        path: '/test',
        name: 'test',
        component: test
    }]
})

图片问题

官方说的是在Android 平台下面只支持的远程图片，例如https://vuejs.org/images/logo.png,或者一个图片的base64 编码，
在ios系统下面也支持 file:///images/logon.png这样本地文件的写法（还没试过）

各种语法问题

使用v-for

使用的v-for 的时候最好使用下面这种写法

<template>
    <list class="list" :style="{'height': height}">
        <cell class="cell" v-for="num in lists">
            <div class="panel">
                <text class="text">{{num.title}}</text>
            </div>
        </cell>
    </list>
</template>
<script>
var stream = weex.requireModule('stream');
export default {
    data() {
        return {
            lists: [],
            height: weex.config.env.deviceHeight + 'px'
        }
    },
    created() {
        let me = this
        stream.fetch({
            method: 'GET',
            url: 'http://www.itclubs.cn/shop/public/index.php/index/Notes/getNotes/?type=1&page=1&pageCount=20',
            type: 'json'
        }, function(ret) {
            if (!ret.ok) {
                me.getResult = "request failed";
            } else {
                me.lists = ret.data.data.data;
            }
        }, function(response) {})
    }
}
</script>
<style scoped>
.list {
    width: 750px;
    margin-top: 200px;
}

.panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 350px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
}

.text {
    font-size: 24px;
    text-align: center;
    color: #41B883;
}
</style>

特别需要注意必须指定外层容器的宽高，不然在web页面中能够渲染出来， 但是在手机和playground中真的会死翘翘的

注意官方组件和子组件的约束

有时候后再playground中看不到任白屏了，可以看一下官方文档中组件和子组件的约束

封装数据请求

自己在其他Js封装数据请求的时候有时候在playground中会不生效，同样在手机应用中也不会生效，目前LZ研究中。

不写无用的代码

没用的代码往往在web和playground中不会造成较大的影响

但是对不起了打包成app之后, you will see render-error: -2013

例如你在template中声明的class在css中没用， sorry上面哪个错误在等着你

最后放上一个简单的能在web、playground、Android手机上运行的实例，只写了两个界面,包括了路由跳转以及数据请求，和数据渲染的功能，至于其他的功能大家慢慢研究

点击下载实例

// 欢迎骚扰 + 讨论
QQ: 843462167
EMAIL: 843462167@qq.com
QQ群: 9797721-LOL开黑交流群
PHTONE： 18408226900
NAME： WENQIAN