开始开发真正的Weex页面
先看一下UI设计界面
个人中心.png
在native开发中这个页面很简单，那么如何用Weex实现呢？
先给出Vue文件：
FifthViewController.vue
tableViewCell.vue
首先，这不是以web端开发思维写的，因为iOS布局和css是有区别的。有的时候很难一次就调通。这里主要是写如何使用Vue开发，也就是
template和script如何写。本页面不涉及复用Cell的问题，因此选用的是
scroller那么最开始应该这样
<template>
<scroller class="view"></scroller>
</template>
<style>
.view {
width: 750px;
height: 1334px;
background-color: white;
}
</style>
然后我们需要考虑这个页面的导航栏问题，两种方式，要么让导航栏透明，要么隐藏导航栏。
我采用的是透明导航栏。
那么我们回到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
<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>
至此调试的界面应该如下：
完成headerView.jpeg
开发TableViewCell
对于原生开发这个cell再正常不过，Weex如何开发呢？
新建tableViewCell文件夹tableViewCell.Vue文件
tableViewCell.vue
UI创建不赘述了，那么如何通过数据来配置UI呢？
我们需要设置两个属性，实现如下:
<script>
export default {
props: {
// cell的Model数据
item: {
type: Object,
default: 'null'
},
// 因为点赞和余额的DetailTextLabel的颜色不一样，需要给其一个判断条件
isMark: {//这个cell是不是点赞Cell
type: Boolean,
default: false
}
},
data () {
return {}
},
methods: {}
}
</script>
看过上述代码，我们有了isMark这个判断条件，那我们怎么使用呢？
<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来设置detailTextLabel的textColor
如何使用TableViewCell
我们需要如下实现
<script>
//先引用 tableViewCell 从目录中
import tableViewCell from '../tableViewCell/tableViewCell.vue'
// let stream = weex.requireModule('stream')
// let apiHost = 'http://hulu.top'
export default {
data () {
return {
itemList:[
{
text:'开通会员',
image:'http://mkhioslocal/buyVIP',
detailText:'',
accessViewUrl:'http://mkhioslocal/arrowOfCell',
type:0,
},
],
},
//在这个方法中添加这个component
components:{
tableViewCell
},
}
</script>
引用tableViewCell这个Component，需要如上的方式引用。
同时因为是一个列表数据我们需要在一开始创建一组数据，此处页面为静态的，当然如果动态的需要进行网络请求。后面的页面会讲述如何使用。
在模板中这样使用：
// v-for 就是遍历数据itemList,item就是遍历出的每个对象
// :item="item" 就是将遍历出的每个对象赋给前面声明的cell的item属性 这个地方不要忘记设置:key="一个标识"
// 同样: isMark也是赋值行为
<table-view-cell class="cell" :item="item" v-for="(item,index) in itemList" :key="item.type" :isMark="item.isMark">
</table-view-cell>
这里有个比较郁闷就是如果你将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
网友评论