官方案例
1.頭部拆分成一個頁面比如news-text
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
<title>api</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/news-text.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<a class="back-icon" tapmode="" onclick="api.closeWin()"></a>
<h1>熱點新聞</h1>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/news-text.js"></script>
</html>
2.內容拆分成另一個頁面比如news-textCon
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
<title>api</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/news-text.css" />
</head>
<body>
<div id="wrap">
<div id="main">
<script id="news-template" type="text/x-dot-template">
<h1>{{=it.title}}</h1>
<label>
{{? it.from }}
{{=it.from}}
{{?}}
<em>{{=it.date}}</em>
</label>
<div id="summary">
{{=it.summary}}
</div>
<div>
{{=it.content}}
</div>
<a id="fav" class="btn" tapmode="active" news-id="{{=it.id}}" >收藏</a>
</script>
<div id="content"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/news-textCon.js"></script>
</html>
以上就是一個非常規范的內容
1.css在頭部
引入必要的css，api.css
引入通用的css，common.css
引入頁面特有的css，news-text.css
2.js在尾部
引入必要的css，api.js
引入通用的css，common.js
引入頁面特有的css，news-text.js
根據頁面需要，引入doT模板和zepto（手機端的jQuery替代品）
來看看news-text.js中的內容
apiready = function(){
var header = $api.byId('header'); // 獲取頭部
$api.fixStatusBar(header); // 處理ios兼容
var newsId = api.pageParam.newsId; // 獲取參數
var pos = $api.offset(header); // 獲取位置數據
api.openFrame({ // 打開Frame
name: 'news-textCon',
url: 'news-textCon.html',
pageParam: {newsId: newsId}, // 傳遞參數
rect:{
x: 0,
y: pos.h, // 頭部留位置
w: 'auto',
h: 'auto'
},
bounces: true,
vScrollBarEnabled: false
});
};
打開frame，保證頭部留有位置，同時可以傳遞參數
再看看news-textCon.js中的內容
apiready = function () {
var newsId = api.pageParam.newsId; // 獲取參數
var getNewsByIdUrl = '/news/?filter=';
var urlParam = {where: {id: newsId}};
api.showProgress({
title: '加載中...',
modal: false
});
ajaxRequest(getNewsByIdUrl+JSON.stringify(urlParam),'get','',function(ret,err){
if (ret) {
api.toast({
...
})
} else {
api.toast({
...
})
}
api.hideProgress();
});
};
獲取傳入的參數，
獲取數據與相應的頁面處理
我的案例
商品詳情拆分
1.goods_detail.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
<title>api</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
<div id="wrap">
<div id="main">
<header class="aui-bar aui-bar-nav fix-status-bar" id="aui-header">
<a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin();">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title"><!-- 商品名稱 --></div>
</header>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/goods_detail.js"></script>
</html>
2.goods_detailCon.html
移除頭部的
<header class="aui-bar aui-bar-nav fix-status-bar" id="aui-header">
<a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin();">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title"><!-- 商品名稱 --></div>
</header>
3.goods_detail.js
apiready = function(){
var header = $api.byId('main'); // 獲取頭部
$api.fixStatusBar(header); // 處理ios
var pos = $api.offset(header); // 獲取頭部位置
var title = $api.dom(header,'.aui-title'); // 獲取標題位置
$api.html(title,api.pageParam.title); // 設置標題內容
api.openFrame({ // 打開內容頁，並傳遞參數
name: 'goods_detailCon',
url: 'goods_detailCon.html',
rect:{
x: 0,
y: pos.h,
w: 'auto',
h: 'auto'
},
bounces: true,
opaque: true,
vScrollBarEnabled: false,
pageParam:{
goods_id:api.pageParam.goods_id
}
});
};
4.goods_detailCon.js
apiready = function(){
fix_status_bar();// 修復頭部
var goods_id = api.pageParam.goods_id;
// 獲取商品相關信息
api.ajax({
url: 'http://zhudianbao.yunlutong.com/?g=Api&m=Goods&a=getGoodsInfo',
method: 'get',
data: {
values: {
goods_id: goods_id
}
}
}, function(json, err) {
if (json.status == '1') {
var interText = doT.template($("#goodstmpl").text());
$("#info_area").html(interText(json.info));
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 3500,
autoplayDisableOnInteraction: false
});
} else {
var toast = new auiToast();
toast.fail({
title:json.msg,
duration:2000
});
}
});
}
獲取參數，根據參數獲取數據，並使用doT進行頁面布局。
看效果
