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

最新推荐文章于 2024-05-15 03:46:53 发布

Nostalgia流逝

最新推荐文章于 2024-05-15 03:46:53 发布

阅读量1.5w

点赞数 3

分类专栏： Weex 文章标签：界面

本文链接：https://blog.csdn.net/zpfvs1/article/details/53159849

版权

本文介绍如何使用WEEX构建简单的界面，包括使用weex-components创建wxc-navpage和wxc-tabbar组件，实现搜索框的动态内容填充和页面跳转功能。在搜索框组件中，通过{{text}}传递内容并利用navigator模块进行页面切换。在main.we页面，利用repeat实现列表的动态渲染，并根据点击的分类标题进行相应的URL参数拼接，以跳转到对应分类列表页。同时，讲解了在分类列表页如何读取URL中的type值。

摘要由CSDN通过智能技术生成

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

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;