iOS調(diào)試Demo
WeexDemo

開始開發(fā)真正的Weex頁(yè)面

先看一下UI設(shè)計(jì)界面

個(gè)人中心.png

<template>
    <scroller class="view"></scroller>
</template>
<style>
    .view {
        width: 750px;
        height: 1334px;
        background-color: white;
    }
</style>

然后我們需要考慮這個(gè)頁(yè)面的導(dǎo)航欄問題，兩種方式，要么讓導(dǎo)航欄透明，要么隱藏導(dǎo)航欄。
我采用的是透明導(dǎo)航欄。
那么我們回到AppFrame.Vue中，修改第四個(gè)NavigationBarInfo數(shù)據(jù)如下：

                        {
                            title:'',
                            clearTitleColor:'333333',
                            blurTitleColor:'333333',
                            leftItemsInfo:[{aciton:'',itemURL:''}],
                            rightItemsInfo:[{aciton:'',itemURL:host + 'dist/Components/BarItem/rightItemOfMine.js',frame:'{{0, 0}, {33, 16}}'}],
                            clearNavigationBar:true,
                            hiddenNavgitionBar:false,
                            navigationBarBackgroundColor:'',
                            navgationBarBackgroundImage:'',
                            customTitleViewURL:'',
                            rootViewURL:host + 'dist/Components/Frame/FifthViewController.js',
                        }

開始聯(lián)動(dòng)調(diào)試

在上一篇命令執(zhí)行一遍。
那么此時(shí)的UI應(yīng)該是這樣的

完成導(dǎo)航欄的配置.jpeg

開發(fā)headerView

UI邏輯很簡(jiǎn)單，一個(gè)image 一個(gè) text
我的實(shí)現(xiàn)：

<template>
        <div class="header">
            <div class="userInfoContainer">
                <image class="userHeader" src=""></image>
                <text class="userName">叫我小詺</text>
            </div>
        </div>
</template>
<style>
    .header
    {
        /*flex-direction: ;*/
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 750px;
        height: 484px;
        top: 0px;
        left: 0px;
    }
    .userInfoContainer
    {
        height: 214px;
        width: 375px;
        justify-content: center;
        align-items: center;
    }
    .userHeader
    {
        background: #EBEBEB;
        width: 144px;
        height: 144px;
        border-radius: 72px;
    }
    .userName
    {
        font-family: .PingFangSC-Regular;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        line-height: 30px;
        margin-top: 40px;
    }
</style>

至此調(diào)試的界面應(yīng)該如下：

完成headerView.jpeg

開發(fā)TableViewCell

對(duì)于原生開發(fā)這個(gè)cell再正常不過，Weex如何開發(fā)呢？
新建tableViewCell文件夾tableViewCell.Vue文件
tableViewCell.vue
UI創(chuàng)建不贅述了，那么如何通過數(shù)據(jù)來配置UI呢？
我們需要設(shè)置兩個(gè)屬性，實(shí)現(xiàn)如下:

<script>
    export default {
        props: {
//        cell的Model數(shù)據(jù)
            item: {
                type: Object,
                default: 'null'
            },
//        因?yàn)辄c(diǎn)贊和余額的DetailTextLabel的顏色不一樣，需要給其一個(gè)判斷條件
            isMark: {//這個(gè)cell是不是點(diǎn)贊Cell
                type: Boolean,
                default: false
            }
        },
        data () {
            return {}
        },
        methods: {}
    }
</script>

看過上述代碼，我們有了isMark這個(gè)判斷條件，那我們?cè)趺词褂媚兀?/p>

            <div class="rightView" v-if="isMark">
                <text class="detailTextLabel" style="color: #999999;">{{item.detailText}}</text>
                <image class="accessView" :src="item.accessViewUrl"></image>

            </div>
            <div class="rightView" v-else="isMark">
                <text class="detailTextLabel" :refKey="item.refKey">{{item.detailText}}</text>
                <image class="accessView" :src="item.accessViewUrl"></image>
            </div>

通過v-if和v-else來設(shè)置detailTextLabel的textColor

如何使用TableViewCell

我們需要如下實(shí)現(xiàn)

<script>
//先引用 tableViewCell 從目錄中
    import tableViewCell from '../tableViewCell/tableViewCell.vue'
//    let stream = weex.requireModule('stream')
//    let  apiHost = 'http://hulu.top'
    export default {
        data () {
            return {
                itemList:[
                    {
                        text:'開通會(huì)員',
                        image:'http://mkhioslocal/buyVIP',
                        detailText:'',
                        accessViewUrl:'http://mkhioslocal/arrowOfCell',
                        type:0,
                    },
                ],
        },
//在這個(gè)方法中添加這個(gè)component
        components:{
            tableViewCell
        },
    }
</script>

引用tableViewCell這個(gè)Component，需要如上的方式引用。
同時(shí)因?yàn)槭且粋€(gè)列表數(shù)據(jù)我們需要在一開始創(chuàng)建一組數(shù)據(jù)，此處頁(yè)面為靜態(tài)的，當(dāng)然如果動(dòng)態(tài)的需要進(jìn)行網(wǎng)絡(luò)請(qǐng)求。后面的頁(yè)面會(huì)講述如何使用。
在模板中這樣使用：

//    v-for 就是遍歷數(shù)據(jù)itemList,item就是遍歷出的每個(gè)對(duì)象
//    :item="item" 就是將遍歷出的每個(gè)對(duì)象賦給前面聲明的cell的item屬性 這個(gè)地方不要忘記設(shè)置:key="一個(gè)標(biāo)識(shí)" 
//   同樣: isMark也是賦值行為
        <table-view-cell class="cell" :item="item" v-for="(item,index) in itemList" :key="item.type" :isMark="item.isMark">
        </table-view-cell>

這里有個(gè)比較郁悶就是如果你將image的src設(shè)置的時(shí)候沒有http://XXXX那么就會(huì)出現(xiàn)在原生方法中回被加上該Vue文件的路徑。例如當(dāng)你設(shè)置:src="buyVIP"那么到方法中url="http://192.167.0.3:8083/dist/components/Frame/buyVIP"
所以這個(gè)地方我的解決方法是讓src="http://mkhioslocal/buyVIP"這樣就可以在原生方法中處理解析成本地圖片。
那么到此時(shí)的UI應(yīng)該是這樣的

"我"界面完整UI.jpeg