传统的html页面，一个html就是一个页面。不同的是：在QAP中，一个页面的概念就是一个JS， 任何一个JS渲染后都可以成为一个页面。
在src目录下新建一个simpleText.jsx的文件，内容如下：
'use strict';
import { createElement, Component, render} from 'rax';
import { Text } from 'nuke';
import QN from 'QAP-SDK';
import genv from 'genv';
class SimpleText extends Component {
render() {
return (<Text>简单的文本</Text>)
}
}
render(<SimpleText />);
保存后，代码QN.navigator.push({url:'qap:///simpleText.js?type=detail'});就能新开一个页面，渲染出一个新页面。
如何编写页面，在此不再赘述，请参考Nuke UI和后续的文档。
默认情况下，webpack.config.js的getDevEntry方法会搜索src一级目录下的所有jsx文件，并生成[name].js，其中[name]就是文件名。
很多时候，随着业务的增多，src目录下面也需要建立目录。这个时候，webpack默认的配置已经无法满足需求了，需要手动更改配置。一般情况下，可以通过以下几种方式达到目的：
手动写entry
每增加一个页面都需要手动增加这个入口文件。
function getDevEntry(cwd) {
var entry = {};
entry.index = 'index.jsx';
entry['index'] = 'index.jsx';
entry['home'] = 'home/home.jsx';
//qap:///home/home.js
entry['home/home'] = 'home/home.jsx';
return entry;
}
或者这样写：
function getDevEntry(cwd) {
var entry = {
index: 'index.jsx',
'home/home': 'home/home.jsx',
'home': 'home/home.jsx'
};
return entry;
}
搜索子目录
手动增加入口文件，比较繁琐，可以使用通配符匹配src下的子目录:
function getDevEntry(cwd) {
var entry = {};
glob.sync('**/**.jsx', { cwd: cwd }).forEach(function(item, i) {
var file = item.replace('.jsx', '');
entry[file] = [
item
];
});
return entry;
}
这样一来所有的jsx文件都会成为入口文件，并且子目录下的源文件如src/home/home.jsx编译后也会带有目录信息，访问该页面的url为qap:///home/home.js。
qap.json描述页面能力的同时也列出了该插件所有可用的页面。出于安全考虑，未在qap.json声明的页面不会被渲染。如新增了src/home/home.jsx后，qap.json也需要增加该页面:
{
"appKey": "21085832",
"version": "1.0",
"pages": [{
"default": true,
"url": "qap:///index.js"
}, {
"url": "qap:///home/home.js"
}],
"WebRootPath": "http://path/to/callback/url",
"min_qn_android": "5.8.2",
"min_qn_ios": "5.8.2",
"jssdk": "1.0.10"
}
写完了jsx，更改了webpack和qap.json，那么就可以打开这个页面了。所有的QAP项目页面的schema为qap:///，页面的url规则是：
qap:///[name].js
QN.navigator.push({
url: 'qap:///home/home.js',
query: {},
settings: {
animate: true,
}
}).then(result => {
console.log(result);
}, error => {
console.log(error);
});
点击文章页面之间的跳转查看所有跳转方式。
