5.5 新增一个页面

页面的概念

传统的html页面，一个html就是一个页面， 在QAP中，一个页面的概念就是一个JS， 任何一个JS挂载后都可以成为一个页面。

页面的编写

import {mount} from 'weex-rx-mounter';
import  DetailPage from './detail-page';
mount(<DetailPage />, 'body');

以上就是一个page的编写过程，其中detail-page可以是任何一个react组件。 任何组件用mount挂载后都能作为一个page.

如何显示

在源码里新增加一个page后，并不能立即通过页面的url访问， 这时需要做2步事情

1. 修改webpack.config.js，把刚刚编写的js作为入口js.

打开webpack.config.js找到以下的字段

    //webpack 编译的入口文件
    entry: {
        index: [path.join(srcPath,'index.jsx')]
    },

以上定义了一个page的入口，只有在这里定义了入口的文件才会被输出到Build目录里，才能通过url访问, 前面的index就是文件的名称，index.jsx就是源码的路径。

下边我们修改一下

    //webpack 编译的入口文件
    entry: {
        index: [path.join(srcPath,'index.jsx')],
        detail: [path.join(srcPath,'detail.jsx')]
    },

我们增加了一个detail.js，指向了我们之前编写的page 修改完毕以后，我们需要重启QAP， 按下ctrl+ c， 再打qap debug就可以看到我们之前的page了。

页面间的跳转，

页面间的跳转支持2种方式。

1. 通过Link组件来跳转

import {Link} from 'nuke';

<Link href="we://detail.js" title="detail页面">detail页面</Link>

1. 通过navigator来跳转

navigator.push('we://detail.js', 'detail页面');

页面间的传参

        QAP.navigate('we://detail.js','detail',true, {
                    bizOrderId: item.mainOrderId
         });

详细用法请参考 navigator和Link的使用