WEEX｜简单界面的实现与页面跳转

在了解了初始化工程后，现在我们可以开始开发简单的界面了，这里我们将以下图界面为例举例，搭建界面并实现点击搜索框跳转到搜索页面，点击分类的页面跳转到对应的分类列表页

weex-components

在编写界面时，我可能会用到wxc-navpage、wxc-tabbar等组件，因此我们首先需要在工程的根目录下安装weex-components：

$ npm install  weex-components

并在需要的页面的script里引用weex-components

require('weex-components');

搜索框

我们可以将页面中比较通用的部分单独提出来写成一个we文件，这里我们将搜索框单独提出来，命名为search.we

搜索框中的内容可能会由于页面不一样而不一样，则需要我们用{{text}}来代替要写的内容，由其他页面将text的值传入，并在该we文件的script中声明

      data:{text:''},

要实现页面跳转，首先在created方法中获取到this.baseURL，然后在跳转的函数中拼接路径。并引入navigator = require(‘@weex-module/navigator’);组件，然后使用push方法，将路由对象添加进了路由栈。

获取到this.baseURL

var bundleUrl = this.$getConfig().bundleUrl;bundleUrl = new String(bundleUrl);var nativeBase;var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;if (isAndroidAssets) {nativeBase = 'file://assets/dist/';}else if (isiOSAssets) {nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);}else {var host = 'localhost:8080';var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);if (matches && matches.length >= 2) {host = matches[1];}nativeBase = 'http://' + host + '/index.html?page=./dist/';}this.baseURL = nativeBase;

在opensearchpage方法中实现页面跳转

opensearchpage: function(e){var navigator = require('@weex-module/navigator');var params = {'url': this.baseURL+'modules/searchpage.js','animated' : 'true'}navigator.push(params, function(e) {});}

search.we整体代码如下：

<template><div class="center" style="flex-direction: row;  position: absolute;  top: 0px; left: 0px; right: 0px; height: 100px; background-color:#ffffff;"><div class="searchhole" style="flex:1;flex-direction: row; align-items:center;" onclick="opensearchpage"><text style="flex:0.92;margin-left: 15px;color: gainsboro">{{text}}</text><image style="flex:0.08;margin-right:15px;width: 50px;height: 50px;" src="http://photo.yupoo.com/zpfvs1/G3Gxmx9X/small.jpg" ></image></div></div>
</template><style>.center {justify-content: center;align-items: center;}.searchhole {height:75px;background-color: #ffffff;margin-left: 50px;margin-right: 50px;border-width:2px;border-color:#F8BB2D;border-radius:40px;}
</style><script>require('weex-components');module.exports = {data:{baseURL: '',text:''},created: function(){var bundleUrl = this.$getConfig().bundleUrl;bundleUrl = new String(bundleUrl);var nativeBase;var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;if (isAndroidAssets) {nativeBase = 'file://assets/dist/';}else if (isiOSAssets) {nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);}else {var host = 'localhost:8080';var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);if (matches && matches.length >= 2) {host = matches[1];}nativeBase = 'http://' + host + '/index.html?page=./dist/';}this.baseURL = nativeBase;},methods: {opensearchpage: function(e){var navigator = require('@weex-module/navigator');var params = {'url': this.baseURL+'modules/searchpage.js','animated' : 'true'}navigator.push(params, function(e) {});}}};
</script>

我们将分类页命名为main.we，首先需要在script中引用刚刚写好的search.we文件

require('./search.we');

并在template中加载搜索框并对搜索框的text赋值

<search text="我想要的书"></search>

若想使分布那块的界面可以实现上下滑动的效果，可以把该部分HTML写在list中

<list></list>

这里界面有许多重复的部分，我们则可以使用repeat={{itemrow}}来实现，重复部分不同的数据在script的data中声明

要实现不同分类跳转到分类列表页中显示对应分类的内容，我们需要先在HTML中添加titile的属性，并在点击后识别出点击的部分的title，_getType(title)方法只用于实现将中文换为拼音

var obj = e.target.attr;
var title = obj.title;
var type = this._getType(title);

并在路径中需要多拼接该值用于之后页面显示内容的判定

'url': this.baseURL+'modules/booklist.js?type='+type,

根据titile实现对应页面跳转

openbooklist: function (e) {var navigator = require('@weex-module/navigator');var obj = e.target.attr;var title = obj.title;var type = this._getType(title);var params = {'url': this.baseURL+'modules/booklist.js?type='+type,'animated' : 'true'}navigator.push(params, function(e) {});},_getType: function(title){var type = 'it';switch(title){case '教材':type = 'jiaocai';break;case '计算机':type = 'jisuanji';break;case '考研':type = 'kaoyan';break;case '外语':type = 'waiyu';break;case '公务员':type = 'gongwuyuan';break;case '其他':type = 'qita';break;default:break;}return type;}

main.we整体代码如下：

<template><div class="bg"><search text="我想要的书"></search><list class="mainlist"><cell class="cell" repeat={{itemrow}} style="flex-direction:row;"><div style="flex:0.5; flex-direction:row; background-color:#ffffff;margin-right: 2px;" onclick="openbooklist" title="{{texts0}}"><div style="flex:0.5;"><image class="img" src="{{imgs0}}" /></div><div class="center" style="flex:0.5;"><text class="texttitle">{{texts0}}</text><text class="textnum">{{nums0}}</text></div></div><div style="flex:0.5; flex-direction:row; background-color:#ffffff;margin-left: 2px;" onclick="openbooklist" title="{{texts1}}"><div style="flex:0.5;"><image class="img" src="{{imgs1}}" /></div><div class="center" style="flex:0.5;"><text class="texttitle">{{texts1}}</text><text class="textnum">{{nums1}}</text></div></div></cell></list></div>
</template><style>.bg {background-color: #F0EFF4;}.mainlist{top: 104px;left: 0;right: 0;bottom: 85px;}.cell {padding-top: 4px;padding-bottom: 0;height:254px;}.center {justify-content: center;align-items: center;}.img{height: 250px;width: 100%;}.texttitle{font-size: 26px;font-weight:300;color:#414141;}.textnum{font-size: 26px;font-weight:300;margin-top: 30px;color:#414141;}
</style><script>require('./search.we');module.exports = {data:{baseURL: '',itemrow: [{index: 0,imgs0:'http://photo.yupoo.com/zpfvs1/G3Gubo2K/small.jpg',texts0: '教材',nums0: '4',src0:'',imgs1: 'http://photo.yupoo.com/zpfvs1/G3GuaUux/small.jpg',texts1: '计算机',nums1: '2',src1:''},{index: 1,imgs0:'http://photo.yupoo.com/zpfvs1/G3Guc3Qd/small.jpg',texts0: '考研',nums0: '2',src0:'',imgs1: 'http://photo.yupoo.com/zpfvs1/G3GubFmS/small.jpg',texts1: '外语',nums1: '3',src1:''},{index: 2,imgs0:'http://photo.yupoo.com/zpfvs1/G3Gubs6D/small.jpg',texts0: '公务员',nums0: '0',src0:'',imgs1: 'http://photo.yupoo.com/zpfvs1/G3GucetH/small.jpg',texts1: '其他',nums1: '1',src1:''}]},created: function(){var bundleUrl = this.$getConfig().bundleUrl;bundleUrl = new String(bundleUrl);var nativeBase;var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;if (isAndroidAssets) {nativeBase = 'file://assets/dist/';}else if (isiOSAssets) {nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);}else {var host = 'localhost:8080';var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);if (matches && matches.length >= 2) {host = matches[1];}nativeBase = 'http://' + host + '/index.html?page=./dist/';}this.baseURL = nativeBase;},methods:{openbooklist: function (e) {var navigator = require('@weex-module/navigator');var obj = e.target.attr;var title = obj.title;var type = this._getType(title);var params = {'url': this.baseURL+'modules/booklist.js?type='+type,'animated' : 'true'}navigator.push(params, function(e) {});},_getType: function(title){var type = 'it';switch(title){case '教材':type = 'jiaocai';break;case '计算机':type = 'jisuanji';break;case '考研':type = 'kaoyan';break;case '外语':type = 'waiyu';break;case '公务员':type = 'gongwuyuan';break;case '其他':type = 'qita';break;default:break;}return type;}}};
</script>

在分类列表页读取URL中type的值

在sciprt的created方法中对调用methods中的getParameterByName方法，contentType就是我们需要的type的值

var contentType=this.getParameterByName('type',bundleUrl);

getParameterByName方法

getParameterByName: function (name, url) {name = name.replace(/[\[\]]/g, "\\$&");var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),results = regex.exec(url);if (!results) return null;if (!results[2]) return '';return decodeURIComponent(results[2].replace(/\+/g, " "));},