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, " "));
            },