apiCloud中实现头部与内容分离与操作规范，App头部header固定，头部与内容分离-低调大师

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

2017-12-30 831

官方案例

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

看效果

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

微信关注我们

原文链接：https://yq.aliyun.com/articles/339182

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

HTML5客户端数据存储机制Web Storage和Web SQL Database

　引言 html5本地存储可以选择两种方式，一种是本地存储，一种是sqlite。比如开发html5的购物车功能，就可以考虑选择其中之一，进行本地存储与操作。又或者保存用户登录信息，可以使用localStorage来记录。 Web Storage 1.LocalStorage 2.SessionStorage Web SQL Database javascript数据库操作API接口，使得本地应用程序可以使用本地数据库（SQLite）持久保存数据。开发者可以使用标准SQL语句来创建数据表，插入、更新、查找和删除数据行，甚至支持事务。 1.openDatabase 2.transaction 3.executeSql sqlite的理解 1.不需要安装 2.本地存储 3.支持嵌入式，小数据量的存储 4.只要语言支持sqlite，配置一下，就可以使用 5.安装一个Navicat for sqlite就可以了，不需要像mysql那样还有端口，服务器地址，开启mysql服务等过程 6.sqlite功能不如mysql全，但基本够用了 7.开源本文转自TBHacker博客园博客，原文链接：ht...

2017-12-30

685

apiCloud中的数据库操作mcm-js-sdk的使用

1.引入js  <script type="text/javascript" src="../plugin/mcm-js-sdk/APICloud-rest-SHA1.js"></script> <script type="text/javascript" src="../plugin/mcm-js-sdk/APICloud-rest.js"></script> <script type="text/javascript" src="../plugin/mcm-js-sdk/SHA1.js"></script>  2.生成对象 var client = new Resource("xxx", "xxx"); var Model = client.Factory("user"); 3.获取数据get Model.get({"_id": '57eb89ad074073e11321e0d3'},...

2017-12-30

715

发表评论

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。