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: px;
    margin-top: px;
}

.panel {
    width: px;
    height: px;
    margin-left: px;
    margin-top: px;
    flex-direction: column;
    justify-content: center;
    border-width: px;
    border-style: solid;
    border-color: rgb(, , );
    background-color: rgba(, , , );
}

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

特别需要注意必須指定外層容器的寬高，不然在

web

頁面中能夠渲染出來， 但是在手機和

playground

中真的會死翹翹的

注意官方元件和子元件的限制

有時候後再

playground

中看不到任白屏了，可以看一下官方文檔中元件和子元件的限制

封裝資料請求

自己在其他

Js

封裝資料請求的時候有時候在

playground

中會不生效，同樣在手機應用中也不會生效，目前

LZ

研究中。

不寫無用的代碼

沒用的代碼往往在

web

和

playground

中不會造成較大的影響

但是對不起了打包成

app

之後,

you will see render-error: -2013

例如你在t

emplate

中聲明的

class

在

css

中沒用，

sorry

上面哪個錯誤在等着你

最後放上一個簡單的能在web、playground、Android手機上運作的執行個體，隻寫了兩個界面,包括了路由跳轉以及資料請求，和資料渲染的功能，至于其他的功能大家慢慢研究

點選下載下傳執行個體

// 歡迎騷擾 + 讨論
QQ: 
EMAIL: @qq.com
QQ群: -LOL開黑交流群
PHTONE： 
NAME： WENQIAN