mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
88 lines (75 loc) • 4.37 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="description" content="Mobilebone.js 使用教程-中文版-传参" />
<meta name="keywords" content="Mobilebone.js, Mobilebone, javascript, 使用教程, 传参" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<link rel="icon" href="../assets/favicon.ico">
<title>Mobilebone.js使用教程-传参</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>传参</h2>
<p>这里带大家了解下 Mobilebone 中各个页面转场过程中参数是如何传递的。</p>
<p>Mobilebone 支持两种类型的页面显示，一种是请求外部数据并创建页面，一种是内置的页面元素的显示，每一种类型的页面显示方法都可以进行参数的传递。</p>
<h3>请求传参</h3>
<p>Mobilebone 中的页面数据请求均是GET请求，请求的参数可以直接写在 URL 地址上面，例如：</p>
<pre><a href="detail.html<span class="mark">?id=1&type=0</span>">加载</a></pre>
<p>其中的 <code>id=1&type=0</code> 就是请求的参数，也可以使用 <code>data-formdata</code> 属性进行参数设置，例如：</p>
<pre><a href="detail.html" <span class="mark">data-formdata="id=1&type=0"</span>>加载</a></pre>
<p>补充：这里使用 <code>data-params</code> 可以有一样的效果，不过并不推荐使用，因为 <code>data-params</code> 主要用来传递请求相关的参数的，例如数据类型、超时时间、成功的回调等。</p>
<pre><a href="detail.html" <span class="mark">data-params="id=1&type=0"</span>>加载</a></pre>
<h3>页面内传参</h3>
<p>页面内传参也是类似的，例如：</p>
<pre><a href="#myPage<span class="mark">?id=1&type=0</span>">前往</a></pre>
<p>也可以使用 <code>data-formdata</code> 属性进行参数设置，例如：</p>
<pre><a href="#myPage" <span class="mark">data-formdata="id=1&type=0"</span>>加载</a></pre>
<p>补充：这里使用 <code>data-params</code> 可以有一样的效果。</p>
<h3>获取</h3>
<p>参数可以在 Mobilebone 的声明周期函数中获取，拿 <code>callback</code> 函数举例，例如：</p>
<pre>Mobilebone.callback = function (pageInto, pageOut, options) {
console.log(options.query);
};</pre>
<p>其中，<code>options</code> 参数中的 <code>query</code> 属性就包含了所有的传参数据。例如：</p>
<pre><a href="#myPage?id=1&type=0">前往</a>
&lt;div id="myPage" class="page out"&gt;&lt;/div&gt;</pre>
<p>则当 <code>#myPage</code> 这个页面元素进入的时候，就会在控制台输出这样的数据：</p>
<pre>{
id: "1",
type: "0"
}</pre>
<p>此时，开发者就可以基于 <code>options.query</code> 返回的参数内容进行对应的业务处理了。</p>
<hr>
<p>发现错误？想参与编辑？在 <a href="https://github.com/zhangxinxu/mobilebone/blob/master/docs/guide/param.html" class="link" target="_github" rel="nooppener">GitHub 上编辑此页</a>！</p>
</div>
</div>
<script src="nav.js"></script>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "install";
</script>
<script src="../assets/docs.js"></script>
<!-- ga统计 -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
if (location.host == 'www.zhangxinxu.com') {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}
})();
</script>
</body>
</html>