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