开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

apiCloud中实现头部与内容分离与操作规范,App头部header固定,头部与内容分离

简介:
+关注继续查看

官方案例

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进行页面布局。

看效果
422101-20161012150629203-388344045.png

422101-20161012150636578-324847631.png


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5952935.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
App低代码开发的最终形态?APICloud可视化开发初体验
作为一名APICloud 老用户,最近看到APICloud Studio 3 新增了可视化编辑工具,第一时间体验了下。
71 0
开发手机直播App:如何在真旺云配置七牛直播计费【完结篇】
商城APP开发商 - 真旺云(https://www.maxwon.cn/) 专业手机app制作软件平台,配置直播计费教程终于进入终章了!
2167 0
SharePoint 2013 开发——开发并部署Provider-hosted APP
博客地址:http://blog.csdn.net/FoxDave 本篇我们用Visual Studio创建并部署一个SharePoint Provider-hosted应用程序。
682 0
SharePoint 2013 开发——Provider-hosted APP准备工作
博客地址:http://blog.csdn.net/FoxDave 后续的内容我们来一步一步开发一个SharePoint Porvider-hosted APP,本篇主要介绍一些准备工作。
1117 0
SharePoint 2013 开发——APP安全模型
博客地址:http://blog.csdn.net/FoxDave 除非开启了SharePoint网站的匿名访问,否则对于入站的请求,必须要有一个身份验证的过程(Authentication),这个很重要。
950 0
SharePoint 2013 开发——SharePoint APP介绍
 博客地址:http://blog.csdn.net/FoxDave 新的APP模型让我们能够创建看起来像是SharePoint的一部分的应用程序,但是它完全运行在独立于SharePoint服务器之外的客户端浏览器的上下文中(客户端脚本、REST和CSOM)或是远程的云端服务器上。
926 0
浅谈 PHP 与手机 APP 开发(API 接口开发)
浅谈 PHP 与手机 APP 开发(API 接口开发)   浏览:28008 发布日期:2013/08/22 分类:技术分享 关键字: PHP APP API Q群 MySQL://Nginx:PHP@Linux => 开发交流Q群:12349137 复制代码 推荐阅读:RESTful 是什么?一起来理解 RESTful 架构 更深入了解API开发这个帖子写给不太了解PHP与API开发的人一、先简单回答两个问题:1、PHP 可以开发客户端?答:不可以,因为PHP是脚本语言,是负责完成 B/S架构 或 C/S架构 的S部分,即:服务端的开发。
1801 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《 优酷APP全量支持“暗黑模式” 设计与技术完整总结》
立即下载
APP加固新方向-混淆和瘦身
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载