Weex 从无到有开发一款上线应用 2

iOS调试Demo
WeexDemo

开始开发真正的Weex页面

先看一下UI设计界面

个人中心.png

在native开发中这个页面很简单，那么如何用Weex实现呢？
先给出Vue文件：
FifthViewController.vue
tableViewCell.vue
首先，这不是以web端开发思维写的，因为iOS布局和css是有区别的。有的时候很难一次就调通。这里主要是写如何使用Vue开发，也就是 template和 script如何写。
本页面不涉及复用Cell的问题，因此选用的是 scroller
那么最开始应该这样

然后我们需要考虑这个页面的导航栏问题，两种方式，要么让导航栏透明，要么隐藏导航栏。
我采用的是透明导航栏。
那么我们回到AppFrame.Vue中，修改第四个NavigationBarInfo数据如下：

                        {
                            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',
                        }

开始联动调试

在上一篇命令执行一遍。
那么此时的UI应该是这样的

完成导航栏的配置.jpeg

开发headerView

UI逻辑很简单，一个image 一个 text
我的实现：

至此调试的界面应该如下：

完成headerView.jpeg

开发TableViewCell

对于原生开发这个cell再正常不过，Weex如何开发呢？
新建tableViewCell文件夹tableViewCell.Vue文件
tableViewCell.vue
UI创建不赘述了，那么如何通过数据来配置UI呢？
我们需要设置两个属性，实现如下:

看过上述代码，我们有了isMark这个判断条件，那我们怎么使用呢？

            

                {{item.detailText}}
                

            
            

                {{item.detailText}}
                
            

通过v-if和v-else来设置detailTextLabel的textColor

如何使用TableViewCell

我们需要如下实现

引用tableViewCell这个Component，需要如上的方式引用。
同时因为是一个列表数据我们需要在一开始创建一组数据，此处页面为静态的，当然如果动态的需要进行网络请求。后面的页面会讲述如何使用。
在模板中这样使用：

//    v-for 就是遍历数据itemList,item就是遍历出的每个对象
//    :item="item" 就是将遍历出的每个对象赋给前面声明的cell的item属性 这个地方不要忘记设置:key="一个标识" 
//   同样: isMark也是赋值行为
        
        

这里有个比较郁闷就是如果你将image的src设置的时候没有http://XXXX那么就会出现在原生方法中回被加上该Vue文件的路径。例如当你设置:src="buyVIP"那么到方法中url="http://192.167.0.3:8083/dist/components/Frame/buyVIP"
所以这个地方我的解决方法是让src="http://mkhioslocal/buyVIP"这样就可以在原生方法中处理解析成本地图片。
那么到此时的UI应该是这样的

"我"界面完整UI.jpeg

下一篇：Weex 从无到有开发一款上线应用 3