Apicloud_(项目)网上书城01_前端页面开发　　传送门

Apicloud_(项目)网上书城02_后端数据获取　　传送门

Apicloud_(项目)网上书城03_拓展模块实现　　传送门

ApiCloud数据云特点

　　1)无需搭建服务器、设计表结构，并且无需编写任何后端代码

　　2)默认内置user、file、role等基础数据结构，可以更具应用需求，拓展字段或自定义其它数据模型

　　3)在线可视化定义数据模型，根据数据模型自动生成RESTful API

　　4)在移动端通过云API，操作云端数据模型，业务逻辑在App端实现

实现用户注册功能

　　在login.html登陆界面中为注册按钮添加跳转事件

  1.         <h1>用户登录</h1>
  2.         <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>

　　编写跳转页面js代码

  1. // 打开注册Window
  2. function fnOpenRegisterWin () {
  3.     api.openWin({
  4.         name: 'register',
  5.         url: './register.html'
  6.     });
  7. }

　　在register_frame.html中为注册按钮添加点击事件

  1. <div class="btn" tapmode="highlight" onclick="fnRegister();">注册</div>

　　在Script标签中添加fnRegister()注册函数

　　"X-APICloud-AppId"：填写自己项目APPID

　　"X-APICloud-AppKey"生成规则是基于SHA1()算法生成的：　　传送门

  1.   // 注册
  2.   function fnRegister() {
  3.       var username = $api.byId("username");
  4.       var password = $api.byId("password");
  5.       var vusername = $api.val(username);
  6.       var vpassword = $api.val(password);
  7.       var now = Date.now();
  8.       var appKey = SHA1("A6099005614565"+"UZ"+"5FB51794-FCDC-1FE9-19E0-A2C449C163AF"+"UZ"+now)+"."+now
  9.  
  10.       api.ajax({
  11.           url: 'https://d.apicloud.com/mcm/api/user',
  12.           method: 'post',
  13.           headers: {
  14.               "X-APICloud-AppId": "A6099005614565",
  15.               //5FB51794-FCDC-1FE9-19E0-A2C449C163AF
  16.               "X-APICloud-AppKey":appKey,
  17.           },
  18.           data: {
  19.               values: {
  20.                   username:vusername,
  21.                   password:vpassword
  22.               }
  23.           }},
  24.           function (ret,err){
  25.             if(ret&&ret.id){
  26.               alert("注册成功！");
  27.             }else{
  28.               alert("注册失败！");
  29.             }
  30.           }
  31.       );
  32.     }

　　

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>登录</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     header {
  12.         width: 100%;
  13.         height: 50px;
  14.         background-color: #ffaf45
  15.     }
  16.  
  17.     header .back {
  18.         position: absolute;
  19.         bottom: 0;
  20.         left: 0;
  21.         width: 80px;
  22.         height: 50px;
  23.         background: url(../image/back.png);
  24.         background-position: 12px 16px;
  25.         background-size: 11px 18px;
  26.         background-repeat: no-repeat;
  27.     }
  28.  
  29.     header h1 {
  30.         width: 100%;
  31.         height: 50px;
  32.         line-height: 50px;
  33.         text-align: center;
  34.         color: #fff;
  35.         font-size: 20px;
  36.     }
  37.  
  38.     header .right {
  39.         position: absolute;
  40.         bottom: 0;
  41.         right: 0;
  42.         width: 50px;
  43.         height: 50px;
  44.         line-height: 50px;
  45.         color: #fff;
  46.         font-size: 15px;
  47.         text-align: center;
  48.     }
  49.     </style>
  50. </head>
  51.  
  52. <body>
  53.     <header id="header">
  54.         <!--为返回按钮(左上角)注册点击事件-->
  55.         <div class="back" tapmode onclick="api.closeWin();"></div>
  56.         <h1>用户登录</h1>
  57.         <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
  58.     </header>
  59. </body>
  60. <script type="text/javascript" src="../script/api.js"></script>
  61. <script type="text/javascript">
  62. apiready = function() {
  63.   var header = $api.byId('header');
  64.   $api.fixStatusBar(header);
  65.   var headerH = $api.offset(header).h;
  66.  
  67.   // 打开注册Frame
  68.   api.openFrame({
  69.       name: 'login_frame',
  70.       url: './login_frame.html',
  71.       rect: {
  72.           marginTop: headerH,
  73.           w: 'auto',
  74.           h: 'auto'
  75.       },
  76.       bgColor:'rgba(0,0,0,0)',
  77.     });
  78. };
  79.  
  80. // 打开注册Window
  81. function fnOpenRegisterWin () {
  82.     api.openWin({
  83.         name: 'register',
  84.         url: './register.html'
  85.     });
  86. }
  87.  
  88. </script>
  89.  
  90. </html>

login.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>注册</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     header {
  12.         width: 100%;
  13.         height: 50px;
  14.         background-color: #ffaf45
  15.     }
  16.  
  17.     header .back {
  18.         position: absolute;
  19.         bottom: 0;
  20.         left: 0;
  21.         width: 80px;
  22.         height: 50px;
  23.         background: url(../image/back.png);
  24.         background-position: 12px 16px;
  25.         background-repeat: no-repeat;
  26.         background-size: 11px 18px;
  27.     }
  28.  
  29.     header h1 {
  30.         width: 100%;
  31.         height: 50px;
  32.         line-height: 50px;
  33.         text-align: center;
  34.         color: #fff;
  35.         font-size: 20px;
  36.     }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <header id="header">
  42.         <div class="back" tapmode onclick="api.closeWin();"></div>
  43.         <h1>注册</h1>
  44.     </header>
  45. </body>
  46. <script type="text/javascript" src="../script/api.js"></script>
  47. <script type="text/javascript">
  48. apiready = function() {
  49.     var header = $api.byId('header');
  50.     var headerH = $api.fixStatusBar(header);
  51.  
  52.     api.openFrame({
  53.         name: 'register_frame',
  54.         url: './register_frame.html',
  55.         rect: {
  56.             marginTop: headerH,
  57.             w: 'auto',
  58.             h: 'auto'
  59.         },
  60.         bounces: false,
  61.         softInputBarEnabled: false //不显示键盘上方的工具条
  62.     });
  63. };
  64.  
  65. </script>
  66.  
  67. </html>

register.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>注册Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     .row {
  12.         box-sizing: border-box;
  13.         width: auto;
  14.         height: 70px;
  15.         margin-left: 32px;
  16.         margin-right: 32px;
  17.         padding-top: 40px;
  18.         border-bottom: 1px solid #888;
  19.     }
  20.  
  21.     .input {
  22.         width: 100%;
  23.         height: 20px;
  24.         line-height: 20px;
  25.         border: none;
  26.         outline: none;
  27.         font-size: 16px;
  28.     }
  29.  
  30.     .btn {
  31.         width: auto;
  32.         height: 50px;
  33.         margin-left: 32px;
  34.         margin-right: 32px;
  35.         margin-top: 32px;
  36.         background-color: #ffaf45;
  37.         color: #fff;
  38.         font-size: 24px;
  39.         line-height: 50px;
  40.         text-align: center;
  41.         border-radius: 8px;
  42.     }
  43.  
  44.     .highlight {
  45.         opacity: 0.7;
  46.     }
  47.     </style>
  48. </head>
  49.  
  50. <body>
  51.     <div class="row">
  52.         <input id="username" class="input" type="text" placeholder="用户名">
  53.     </div>
  54.     <div class="row">
  55.         <input id="password" class="input" type="password" placeholder="密码">
  56.     </div>
  57.     <div class="btn" tapmode="highlight" onclick="fnRegister();">注册</div>
  58. </body>
  59. <script type="text/javascript" src="../script/api.js"></script>
  60. <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  61. <script type="text/javascript" src="../script/SHA1.js"></script>
  62. <script type="text/javascript">
  63. apiready = function() {
  64.  
  65. };
  66.  
  67.   // 注册
  68.   function fnRegister() {
  69.       var username = $api.byId("username");
  70.       var password = $api.byId("password");
  71.       var vusername = $api.val(username);
  72.       var vpassword = $api.val(password);
  73.       var now = Date.now();
  74.       var appKey = SHA1("A6099005614565"+"UZ"+"5FB51794-FCDC-1FE9-19E0-A2C449C163AF"+"UZ"+now)+"."+now
  75.  
  76.       api.ajax({
  77.           url: 'https://d.apicloud.com/mcm/api/user',
  78.           method: 'post',
  79.           headers: {
  80.               "X-APICloud-AppId": "A6099005614565",
  81.               //5FB51794-FCDC-1FE9-19E0-A2C449C163AF
  82.               "X-APICloud-AppKey":appKey,
  83.           },
  84.           data: {
  85.               values: {
  86.                   username:vusername,
  87.                   password:vpassword
  88.               }
  89.           }},
  90.           function (ret,err){
  91.             if(ret&&ret.id){
  92.               alert("注册成功！");
  93.             }else{
  94.               alert("注册失败！");
  95.             }
  96.           }
  97.       );
  98.     }
  99.  
  100. </script>
  101. </html>

register_frame.html

实现用户登陆

　　在login_frame.html中，为登陆按钮注册点击事件

  1. <body>
  2.     <div class="row">
  3.         <input id="username" class="input" type="text" placeholder="用户名">
  4.     </div>
  5.     <div class="row">
  6.         <input id="password" class="input" type="password" placeholder="密码">
  7.     </div>
  8.     <div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
  9.     <div class="btn-third-party">使用微信登录</div>
  10. </body>

　　编写用户登陆fnLogin()函数

  1.     function fnLogin(){
  2.       var username = $api.byId("username");
  3.       var password = $api.byId("password");
  4.       var vusername = $api.val(username);
  5.       var vpassword = $api.val(password);
  6.       var now = Date.now();
  7.       var appKey = SHA1("A6099005614565"+"UZ"+"5FB51794-FCDC-1FE9-19E0-A2C449C163AF"+"UZ"+now)+"."+now
  8.  
  9.       api.ajax({
  10.           url: 'https://d.apicloud.com/mcm/api/user/login',
  11.           method: 'post',
  12.           headers: {
  13.               "X-APICloud-AppId": "A6099005614565",
  14.               "X-APICloud-AppKey":appKey,
  15.           },
  16.           data: {
  17.               values: {
  18.                   username:vusername,
  19.                   password:vpassword
  20.               }
  21.           }},
  22.           function (ret,err){
  23.             if(ret&&ret.id){
  24.               alert("登陆成功！");
  25.             }else{
  26.               alert("登陆失败！");
  27.             }
  28.           }
  29.       );
  30.     }

　　

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>登录</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     header {
  12.         width: 100%;
  13.         height: 50px;
  14.         background-color: #ffaf45
  15.     }
  16.  
  17.     header .back {
  18.         position: absolute;
  19.         bottom: 0;
  20.         left: 0;
  21.         width: 80px;
  22.         height: 50px;
  23.         background: url(../image/back.png);
  24.         background-position: 12px 16px;
  25.         background-size: 11px 18px;
  26.         background-repeat: no-repeat;
  27.     }
  28.  
  29.     header h1 {
  30.         width: 100%;
  31.         height: 50px;
  32.         line-height: 50px;
  33.         text-align: center;
  34.         color: #fff;
  35.         font-size: 20px;
  36.     }
  37.  
  38.     header .right {
  39.         position: absolute;
  40.         bottom: 0;
  41.         right: 0;
  42.         width: 50px;
  43.         height: 50px;
  44.         line-height: 50px;
  45.         color: #fff;
  46.         font-size: 15px;
  47.         text-align: center;
  48.     }
  49.     </style>
  50. </head>
  51.  
  52. <body>
  53.     <header id="header">
  54.         <!--为返回按钮(左上角)注册点击事件-->
  55.         <div class="back" tapmode onclick="api.closeWin();"></div>
  56.         <h1>用户登录</h1>
  57.         <div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
  58.     </header>
  59. </body>
  60. <script type="text/javascript" src="../script/api.js"></script>
  61. <script type="text/javascript">
  62. apiready = function() {
  63.   var header = $api.byId('header');
  64.   $api.fixStatusBar(header);
  65.   var headerH = $api.offset(header).h;
  66.  
  67.   // 打开注册Frame
  68.   api.openFrame({
  69.       name: 'login_frame',
  70.       url: './login_frame.html',
  71.       rect: {
  72.           marginTop: headerH,
  73.           w: 'auto',
  74.           h: 'auto'
  75.       },
  76.       bgColor:'rgba(0,0,0,0)',
  77.     });
  78. };
  79.  
  80. // 打开注册Window
  81. function fnOpenRegisterWin () {
  82.     api.openWin({
  83.         name: 'register',
  84.         url: './register.html'
  85.     });
  86. }
  87.  
  88. </script>
  89.  
  90. </html>

login.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>登录Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     body {
  12.         text-align: center;
  13.     }
  14.  
  15.     .row {
  16.         width: auto;
  17.         height: 70px;
  18.         box-sizing: border-box;
  19.         margin-left: 32px;
  20.         margin-right: 32px;
  21.         padding-top: 40px;
  22.         border-bottom: 1px solid #888;
  23.     }
  24.  
  25.     .input {
  26.         width: 100%;
  27.         height: 20px;
  28.         border: none;
  29.         outline: none;
  30.         font-size: 16px;
  31.         line-height: 20px;
  32.     }
  33.  
  34.     .btn {
  35.         width: auto;
  36.         height: 50px;
  37.         margin-left: 32px;
  38.         margin-right: 32px;
  39.         margin-top: 32px;
  40.         background-color: #ffaf45;
  41.         line-height: 50px;
  42.         color: #fff;
  43.         font-size: 24px;
  44.         text-align: center;
  45.         border-radius: 8px;
  46.     }
  47.  
  48.     .btn-third-party {
  49.         display: inline-block;
  50.         width: auto;
  51.         height: 50px;
  52.         box-sizing: border-box;
  53.         margin-top: 32px;
  54.         margin-left: auto;
  55.         margin-right: auto;
  56.         padding: 8px 8px 8px 36px;
  57.         font-size: 20px;
  58.         color: #888;
  59.         line-height: 32px;
  60.         text-align: left;
  61.         border: 1px solid #aaa;
  62.         background-image: url(../image/share_friend.png);
  63.         background-repeat: no-repeat;
  64.         background-size: auto 20px;
  65.         background-position: 8px center;
  66.         border-radius: 8px;
  67.     }
  68.  
  69.     .highlight {
  70.         opacity: 0.7;
  71.     }
  72.     </style>
  73. </head>
  74.  
  75. <body>
  76.     <div class="row">
  77.         <input id="username" class="input" type="text" placeholder="用户名">
  78.     </div>
  79.     <div class="row">
  80.         <input id="password" class="input" type="password" placeholder="密码">
  81.     </div>
  82.     <div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
  83.     <div class="btn-third-party">使用微信登录</div>
  84. </body>
  85. <script type="text/javascript" src="../script/api.js"></script>
  86. <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  87. <script type="text/javascript" src="../script/SHA1.js"></script>
  88. <script type="text/javascript">
  89. apiready = function() {
  90.  
  91. };
  92.  
  93.     function fnLogin(){
  94.       var username = $api.byId("username");
  95.       var password = $api.byId("password");
  96.       var vusername = $api.val(username);
  97.       var vpassword = $api.val(password);
  98.       var now = Date.now();
  99.       var appKey = SHA1("A6099005614565"+"UZ"+"5FB51794-FCDC-1FE9-19E0-A2C449C163AF"+"UZ"+now)+"."+now
  100.  
  101.       api.ajax({
  102.           url: 'https://d.apicloud.com/mcm/api/user/login',
  103.           method: 'post',
  104.           headers: {
  105.               "X-APICloud-AppId": "A6099005614565",
  106.               "X-APICloud-AppKey":appKey,
  107.           },
  108.           data: {
  109.               values: {
  110.                   username:vusername,
  111.                   password:vpassword
  112.               }
  113.           }},
  114.           function (ret,err){
  115.             if(ret&&ret.id){
  116.               alert("登陆成功！");
  117.             }else{
  118.               alert("登陆失败！");
  119.             }
  120.           }
  121.       );
  122.     }
  123.  
  124. </script>
  125.  
  126. </html>

login_frame.html

获取商品列表数据

　　在ApiCloud官网添加书本的数据库

　　main_frame.html中，在apiready函数中添加代码获得数据库中的书籍

  1.   apiready = function(){
  2.         var now = Date.now();
  3.         var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  4.         var params = {
  5.             fields: {},
  6.             where: {
  7.                 supportAreaId: "56c80e0c789b068408ab5a6f",
  8.                 wareTypeId: api.pageParam.wareTypeId
  9.             },
  10.             skip: 0,
  11.             limit: 5
  12.         };
  13.         api.ajax({
  14.             url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  15.             method: 'get',
  16.             headers: {
  17.                 "X-APICloud-AppId": "A6099255481782",
  18.                 "X-APICloud-AppKey":appKey
  19.             }
  20.         }, function(ret, err) {
  21.             if(ret){
  22.                 var list = $api.byId('list');
  23.                 list.innerHTML = "";
  24.                 for(var i in ret){
  25.                     var ware = ret[i];
  26.                     $api.append(
  27.                       list,
  28.                       '\
  29.                       <div class="ware">\
  30.                       <div class="content">\
  31.                       <img class="thumbnail" src="' +ware.thumbnail.url+'">\
  32.                       <div class="info">\
  33.                       <div class="name">'+ware.name+'</div>\
  34.                       <div class="description">'+ware.description+'</div>\
  35.                       <div class="price-tag">\
  36.                       <span class="price">￥'+ware.price + '</span>\
  37.                       <span class="unit">/本</span>\
  38.                       </div>\
  39.                       <div class="origin-price">书店：\
  40.                       <del>￥'+ware.originPrice+'</del>\
  41.                       </div>\
  42.                       </div>\
  43.                       <div class = "control">\
  44.                       <ima class="add" src="../image/add.png">\
  45.                       </div>\
  46.                       </div>\
  47.                       </div>\
  48.                       ');
  49.  
  50.                 }
  51.  
  52.             }
  53.             else{
  54.               alert(JSON.stringify(err));
  55.             }
  56.          }
  57.        );
  58.  
  59.      }

　　不同书本数据都是从数据库端获取

　　

  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           width: 100%;
  11.           height: 130px;
  12.           box-sizing: border-box;
  13.           padding: 4px 10px;
  14.       }
  15.  
  16.       header .banner {
  17.           width: 100%;
  18.           height: 100%;
  19.       }
  20.  
  21.       section {
  22.           position: relative;
  23.           width: 100%;
  24.           height: auto;
  25.           box-sizing: border-box;
  26.           padding: 0 8px;
  27.       }
  28.  
  29.       .content {
  30.           width: 100%;
  31.           height: 100%;
  32.       }
  33.  
  34.       .ware {
  35.           position: relative;
  36.           width: 100%;
  37.           height: 145px;
  38.           box-sizing: border-box;
  39.           padding-top: 15px;
  40.           padding-bottom: 15px;
  41.           border-bottom: 1px solid #d1d1d1;
  42.       }
  43.  
  44.       .ware .thumbnail {
  45.           position: absolute;
  46.           top: 20px;
  47.           left: 0px;
  48.           height: 100px;
  49.           width: 100px;
  50.       }
  51.  
  52.       .ware .info {
  53.           width: 100%;
  54.           height: 114px;
  55.           box-sizing: border-box;
  56.           padding-left: 112px;
  57.           padding-right: 28px;
  58.       }
  59.  
  60.       .ware .info .name {
  61.           width: 100%;
  62.           height: 15px;
  63.           color: #555555;
  64.           margin-top: 14px;
  65.           font-size: 15px;
  66.       }
  67.  
  68.       .ware .info .description {
  69.           margin-top: 10px;
  70.           width: 100%;
  71.           height: 13px;
  72.           font-size: 13px;
  73.           color: #9d9d9d;
  74.       }
  75.  
  76.       .ware .info .price-tag {
  77.           margin-top: 10px;
  78.           width: 100%;
  79.           height: 12px;
  80.           font-size: 12px;
  81.           vertical-align: top;
  82.       }
  83.  
  84.       .ware .info .price-tag .price {
  85.           color: #e3007f;
  86.       }
  87.  
  88.       .ware .info .price-tag .unit {
  89.           font-size: 8px;
  90.           color: #cbcbcb;
  91.       }
  92.  
  93.       .ware .info .origin-price {
  94.           margin-top: 5px;
  95.           width: 100%;
  96.           height: 10px;
  97.           font-size: 10px;
  98.           color: #d3d3d3;
  99.       }
  100.  
  101.       .ware .control {
  102.           position: absolute;
  103.           width: 110px;
  104.           height: 23px;
  105.           right: 8px;
  106.           top:90px;
  107.       }
  108.  
  109.       .ware .control .add {
  110.           position: absolute;
  111.           top: 0;
  112.           right: 0;
  113.           width: 23px;
  114.           height: 23px;
  115.           z-index: 2;
  116.       }
  117.  
  118.       .push-status {
  119.           width: 100%;
  120.           height: 40px;
  121.           font-size: 16px;
  122.           color: #888;
  123.           line-height: 40px;
  124.           text-align: center;
  125.           background-color: #fff;
  126.       }
  127.  
  128.       .active {
  129.           opacity: 0.7;
  130.       }
  131.       </style>
  132.   </head>
  133.   <body>
  134.     <header id="header">
  135.         <img id="banner" class="banner" src="../image/adver2.jpg">
  136.     </header>
  137.     <section id="list">
  138.       <div class="ware">
  139.         <div class="content">
  140.           <img class="thumbnail" src="../image/book1.png">
  141.           <div class="info">
  142.             <div class="name">安迪生童话</div>
  143.             <div class="description">描述：这是一本很浪漫的童话故事</div>
  144.               <div class="price-tag">
  145.                 <span class="prive">Y100</span>
  146.                 <span class="unit">/本</span>
  147.               </div>
  148.               <div class="origin-price">图书价:
  149.                 <del>Y110</del>
  150.               </div>
  151.           </div>
  152.           <div class="control">
  153.             <img class="add" src="../image/add1.png">
  154.           </div>
  155.         </div>
  156.       </div>
  157.     </section>
  158.     <div class="push-status" id="pushStatus">上拉加载更多</div>
  159.  
  160.   </body>
  161.  
  162.   <script type="text/javascript" src="../script/api.js"></script>
  163.   <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  164.   <script type="text/javascript" src="../script/SHA1.js"></script>
  165.   <script type="text/javascript" src="../script/doT.min.js"></script>
  166.   <script type="text/javascript">
  167.       apiready = function(){
  168.         var now = Date.now();
  169.         var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  170.         var params = {
  171.             fields: {},
  172.             where: {
  173.                 supportAreaId: "56c80e0c789b068408ab5a6f",
  174.                 wareTypeId: api.pageParam.wareTypeId
  175.             },
  176.             skip: 0,
  177.             limit: 5
  178.         };
  179.         api.ajax({
  180.             url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  181.             method: 'get',
  182.             headers: {
  183.                 "X-APICloud-AppId": "A6099255481782",
  184.                 "X-APICloud-AppKey":appKey
  185.             }
  186.         }, function(ret, err) {
  187.             if(ret){
  188.                 var list = $api.byId('list');
  189.                 list.innerHTML = "";
  190.                 for(var i in ret){
  191.                     var ware = ret[i];
  192.                     $api.append(
  193.                       list,
  194.                       '\
  195.                       <div class="ware">\
  196.                       <div class="content">\
  197.                       <img class="thumbnail" src="' +ware.thumbnail.url+'">\
  198.                       <div class="info">\
  199.                       <div class="name">'+ware.name+'</div>\
  200.                       <div class="description">'+ware.description+'</div>\
  201.                       <div class="price-tag">\
  202.                       <span class="price">￥'+ware.price + '</span>\
  203.                       <span class="unit">/本</span>\
  204.                       </div>\
  205.                       <div class="origin-price">书店：\
  206.                       <del>￥'+ware.originPrice+'</del>\
  207.                       </div>\
  208.                       </div>\
  209.                       <div class = "control">\
  210.                       <ima class="add" src="../image/add.png">\
  211.                       </div>\
  212.                       </div>\
  213.                       </div>\
  214.                       ');
  215.  
  216.                 }
  217.  
  218.             }
  219.             else{
  220.               alert(JSON.stringify(err));
  221.             }
  222.          }
  223.        );
  224.  
  225.      }
  226.   </script>
  227.   </html>

main_frame.html

 加载更新服务端数据，实现本地的数据存储

　　使用doT模板引擎显示商品列表，在main_frame.html文件<head></head>标签中映入doT模板引擎

  1. <script type="text/template" id="wareTemplate">
  2.   {{~it:ware:index}}
  3.   <div class="ware">
  4.     <div class="content">
  5.         <img class="thumbnail" src="{{=ware.thumbnail.url}}">
  6.         <div class="info">
  7.         <div class="name">{{=ware.name}}</div>
  8.         <div class="description">{{=ware.description}}</div>
  9.         <div class="price-tag">
  10.             <span class="price">￥{{=ware.price}}</span>
  11.             <span class="unit">/{{=ware.unit}}</span>
  12.         <div>
  13.             <div class="origin-price">书店：
  14.               <del>￥{{=ware.originPrice}}</del>
  15.             </div>
  16.           </div>
  17.           <div class="control">
  18.               <img class="add" src="../image/add.png">
  19.           </div>
  20.         </div>
  21.       </div>
  22.       {{~}}
  23.     </script>

　　将获取商品信息的回调函数做如下修改

　　

  1. <script type="text/javascript">
  2.       apiready = function(){
  3.         var now = Date.now();
  4.         var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  5.         var params = {
  6.             fields: {},
  7.             where: {
  8.                 supportAreaId: "56c80e0c789b068408ab5a6f",
  9.                 wareTypeId: api.pageParam.wareTypeId
  10.             },
  11.             skip: 0,
  12.             limit: 5
  13.         };
  14.         api.ajax({
  15.             url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  16.             method: 'get',
  17.             headers: {
  18.                 "X-APICloud-AppId": "A6099255481782",
  19.                 "X-APICloud-AppKey":appKey
  20.             }
  21.         }, function(ret, err) {
  22.             if(ret){
  23.               var strTemplate = $api.html
  24.               (
  25.                 $api.byId('wareTemplate')
  26.               );
  27.               var fnTemplate = doT.template(strTemplate);
  28.               strTemplate = fnTemplate(ret);
  29.               var list = $api.byId('list');
  30.               $api.html(list, strTemplate);
  31.  
  32.             }
  33.             else{
  34.               alert(JSON.stringify(err));
  35.             }
  36.          }
  37.        );
  38.  
  39.      }
  40.   </script>

　　

  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           width: 100%;
  11.           height: 130px;
  12.           box-sizing: border-box;
  13.           padding: 4px 10px;
  14.       }
  15.  
  16.       header .banner {
  17.           width: 100%;
  18.           height: 100%;
  19.       }
  20.  
  21.       section {
  22.           position: relative;
  23.           width: 100%;
  24.           height: auto;
  25.           box-sizing: border-box;
  26.           padding: 0 8px;
  27.       }
  28.  
  29.       .content {
  30.           width: 100%;
  31.           height: 100%;
  32.       }
  33.  
  34.       .ware {
  35.           position: relative;
  36.           width: 100%;
  37.           height: 145px;
  38.           box-sizing: border-box;
  39.           padding-top: 15px;
  40.           padding-bottom: 15px;
  41.           border-bottom: 1px solid #d1d1d1;
  42.       }
  43.  
  44.       .ware .thumbnail {
  45.           position: absolute;
  46.           top: 20px;
  47.           left: 0px;
  48.           height: 100px;
  49.           width: 100px;
  50.       }
  51.  
  52.       .ware .info {
  53.           width: 100%;
  54.           height: 114px;
  55.           box-sizing: border-box;
  56.           padding-left: 112px;
  57.           padding-right: 28px;
  58.       }
  59.  
  60.       .ware .info .name {
  61.           width: 100%;
  62.           height: 15px;
  63.           color: #555555;
  64.           margin-top: 14px;
  65.           font-size: 15px;
  66.       }
  67.  
  68.       .ware .info .description {
  69.           margin-top: 10px;
  70.           width: 100%;
  71.           height: 13px;
  72.           font-size: 13px;
  73.           color: #9d9d9d;
  74.       }
  75.  
  76.       .ware .info .price-tag {
  77.           margin-top: 10px;
  78.           width: 100%;
  79.           height: 12px;
  80.           font-size: 12px;
  81.           vertical-align: top;
  82.       }
  83.  
  84.       .ware .info .price-tag .price {
  85.           color: #e3007f;
  86.       }
  87.  
  88.       .ware .info .price-tag .unit {
  89.           font-size: 8px;
  90.           color: #cbcbcb;
  91.       }
  92.  
  93.       .ware .info .origin-price {
  94.           margin-top: 5px;
  95.           width: 100%;
  96.           height: 10px;
  97.           font-size: 10px;
  98.           color: #d3d3d3;
  99.       }
  100.  
  101.       .ware .control {
  102.           position: absolute;
  103.           width: 110px;
  104.           height: 23px;
  105.           right: 8px;
  106.           top:90px;
  107.       }
  108.  
  109.       .ware .control .add {
  110.           position: absolute;
  111.           top: 0;
  112.           right: 0;
  113.           width: 23px;
  114.           height: 23px;
  115.           z-index: 2;
  116.       }
  117.  
  118.       .push-status {
  119.           width: 100%;
  120.           height: 40px;
  121.           font-size: 16px;
  122.           color: #888;
  123.           line-height: 40px;
  124.           text-align: center;
  125.           background-color: #fff;
  126.       }
  127.  
  128.       .active {
  129.           opacity: 0.7;
  130.       }
  131.       </style>
  132.   </head>
  133.   <body>
  134.     <header id="header">
  135.         <img id="banner" class="banner" src="../image/adver2.jpg">
  136.     </header>
  137.     <section id="list">
  138.       <div class="ware">
  139.         <div class="content">
  140.           <img class="thumbnail" src="../image/book1.png">
  141.           <div class="info">
  142.             <div class="name">安迪生童话</div>
  143.             <div class="description">描述：这是一本很浪漫的童话故事</div>
  144.               <div class="price-tag">
  145.                 <span class="prive">Y100</span>
  146.                 <span class="unit">/本</span>
  147.               </div>
  148.               <div class="origin-price">图书价:
  149.                 <del>Y110</del>
  150.               </div>
  151.           </div>
  152.           <div class="control">
  153.             <img class="add" src="../image/add1.png">
  154.           </div>
  155.         </div>
  156.       </div>
  157.     </section>
  158.     <div class="push-status" id="pushStatus">上拉加载更多</div>
  159.  
  160.   </body>
  161.  
  162.   <script type="text/template" id="wareTemplate">
  163.   {{~it:ware:index}}
  164.   <div class="ware">
  165.     <div class="content">
  166.         <img class="thumbnail" src="{{=ware.thumbnail.url}}">
  167.         <div class="info">
  168.         <div class="name">{{=ware.name}}</div>
  169.         <div class="description">{{=ware.description}}</div>
  170.         <div class="price-tag">
  171.             <span class="price">￥{{=ware.price}}</span>
  172.             <span class="unit">/{{=ware.unit}}</span>
  173.         <div>
  174.             <div class="origin-price">书店：
  175.               <del>￥{{=ware.originPrice}}</del>
  176.             </div>
  177.           </div>
  178.           <div class="control">
  179.               <img class="add" src="../image/add.png">
  180.           </div>
  181.         </div>
  182.       </div>
  183.       {{~}}
  184.     </script>
  185.  
  186.   <script type="text/javascript" src="../script/api.js"></script>
  187.   <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  188.   <script type="text/javascript" src="../script/SHA1.js"></script>
  189.   <script type="text/javascript" src="../script/doT.min.js"></script>
  190.   <script type="text/javascript">
  191.       apiready = function(){
  192.         var now = Date.now();
  193.         var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  194.         var params = {
  195.             fields: {},
  196.             where: {
  197.                 supportAreaId: "56c80e0c789b068408ab5a6f",
  198.                 wareTypeId: api.pageParam.wareTypeId
  199.             },
  200.             skip: 0,
  201.             limit: 5
  202.         };
  203.         api.ajax({
  204.             url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  205.             method: 'get',
  206.             headers: {
  207.                 "X-APICloud-AppId": "A6099255481782",
  208.                 "X-APICloud-AppKey":appKey
  209.             }
  210.         }, function(ret, err) {
  211.             if(ret){
  212.               var strTemplate = $api.html
  213.               (
  214.                 $api.byId('wareTemplate')
  215.               );
  216.               var fnTemplate = doT.template(strTemplate);
  217.               strTemplate = fnTemplate(ret);
  218.               var list = $api.byId('list');
  219.               $api.html(list, strTemplate);
  220.  
  221.             }
  222.             else{
  223.               alert(JSON.stringify(err));
  224.             }
  225.          }
  226.        );
  227.  
  228.      }
  229.   </script>
  230.   </html>

main_frame.html

实现图片缓存

　　先在模板引擎中将图像utl放入<img>的data-url属性中，在onload函数被调用时读取data-url属性并调用api.imageCache()进行缓存，最后将缓存结果给<img>的src属性来进行图片的加载

　　修改doT模板中商品图片的代码为

  1. <img onload="fnLoadImage(this)" data-url="{{=ware.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">

　　在<script>中实现商品列表的图片缓存函数

  1. 　　// 实现商品列表的图片缓存
  2.      function fnLoadImage(ele_) {
  3.          var dataUrl = $api.attr(ele_, 'data-url');
  4.          // 缓存data-url所指定的图片
  5.          if (dataUrl) {
  6.              api.imageCache({
  7.                  url: dataUrl
  8.              }, function(ret, err) {
  9.                  if (ret) {
  10.                      ele_.src = ret.url;
  11.                  }
  12.              });
  13.          }
  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           width: 100%;
  11.           height: 130px;
  12.           box-sizing: border-box;
  13.           padding: 4px 10px;
  14.       }
  15.  
  16.       header .banner {
  17.           width: 100%;
  18.           height: 100%;
  19.       }
  20.  
  21.       section {
  22.           position: relative;
  23.           width: 100%;
  24.           height: auto;
  25.           box-sizing: border-box;
  26.           padding: 0 8px;
  27.       }
  28.  
  29.       .content {
  30.           width: 100%;
  31.           height: 100%;
  32.       }
  33.  
  34.       .ware {
  35.           position: relative;
  36.           width: 100%;
  37.           height: 145px;
  38.           box-sizing: border-box;
  39.           padding-top: 15px;
  40.           padding-bottom: 15px;
  41.           border-bottom: 1px solid #d1d1d1;
  42.       }
  43.  
  44.       .ware .thumbnail {
  45.           position: absolute;
  46.           top: 20px;
  47.           left: 0px;
  48.           height: 100px;
  49.           width: 100px;
  50.       }
  51.  
  52.       .ware .info {
  53.           width: 100%;
  54.           height: 114px;
  55.           box-sizing: border-box;
  56.           padding-left: 112px;
  57.           padding-right: 28px;
  58.       }
  59.  
  60.       .ware .info .name {
  61.           width: 100%;
  62.           height: 15px;
  63.           color: #555555;
  64.           margin-top: 14px;
  65.           font-size: 15px;
  66.       }
  67.  
  68.       .ware .info .description {
  69.           margin-top: 10px;
  70.           width: 100%;
  71.           height: 13px;
  72.           font-size: 13px;
  73.           color: #9d9d9d;
  74.       }
  75.  
  76.       .ware .info .price-tag {
  77.           margin-top: 10px;
  78.           width: 100%;
  79.           height: 12px;
  80.           font-size: 12px;
  81.           vertical-align: top;
  82.       }
  83.  
  84.       .ware .info .price-tag .price {
  85.           color: #e3007f;
  86.       }
  87.  
  88.       .ware .info .price-tag .unit {
  89.           font-size: 8px;
  90.           color: #cbcbcb;
  91.       }
  92.  
  93.       .ware .info .origin-price {
  94.           margin-top: 5px;
  95.           width: 100%;
  96.           height: 10px;
  97.           font-size: 10px;
  98.           color: #d3d3d3;
  99.       }
  100.  
  101.       .ware .control {
  102.           position: absolute;
  103.           width: 110px;
  104.           height: 23px;
  105.           right: 8px;
  106.           top:90px;
  107.       }
  108.  
  109.       .ware .control .add {
  110.           position: absolute;
  111.           top: 0;
  112.           right: 0;
  113.           width: 23px;
  114.           height: 23px;
  115.           z-index: 2;
  116.       }
  117.  
  118.       .push-status {
  119.           width: 100%;
  120.           height: 40px;
  121.           font-size: 16px;
  122.           color: #888;
  123.           line-height: 40px;
  124.           text-align: center;
  125.           background-color: #fff;
  126.       }
  127.  
  128.       .active {
  129.           opacity: 0.7;
  130.       }
  131.       </style>
  132.   </head>
  133.   <body>
  134.     <header id="header">
  135.         <img id="banner" class="banner" src="../image/adver2.jpg">
  136.     </header>
  137.     <section id="list">
  138.       <div class="ware">
  139.         <div class="content">
  140.           <img class="thumbnail" src="../image/book1.png">
  141.           <div class="info">
  142.             <div class="name">安迪生童话</div>
  143.             <div class="description">描述：这是一本很浪漫的童话故事</div>
  144.               <div class="price-tag">
  145.                 <span class="prive">Y100</span>
  146.                 <span class="unit">/本</span>
  147.               </div>
  148.               <div class="origin-price">图书价:
  149.                 <del>Y110</del>
  150.               </div>
  151.           </div>
  152.           <div class="control">
  153.             <img class="add" src="../image/add1.png">
  154.           </div>
  155.         </div>
  156.       </div>
  157.     </section>
  158.     <div class="push-status" id="pushStatus">上拉加载更多</div>
  159.  
  160.   </body>
  161.  
  162.   <script type="text/template" id="wareTemplate">
  163.   {{~it:ware:index}}
  164.   <div class="ware">
  165.     <div class="content">
  166.           <img onload="fnLoadImage(this)" data-url="{{=ware.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">
  167.         <div class="info">
  168.         <div class="name">{{=ware.name}}</div>
  169.         <div class="description">{{=ware.description}}</div>
  170.         <div class="price-tag">
  171.             <span class="price">￥{{=ware.price}}</span>
  172.             <span class="unit">/{{=ware.unit}}</span>
  173.         <div>
  174.             <div class="origin-price">书店：
  175.               <del>￥{{=ware.originPrice}}</del>
  176.             </div>
  177.           </div>
  178.           <div class="control">
  179.               <img class="add" src="../image/add1.png">
  180.           </div>
  181.         </div>
  182.       </div>
  183.       {{~}}
  184.     </script>
  185.  
  186.   <script type="text/javascript" src="../script/api.js"></script>
  187.   <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  188.   <script type="text/javascript" src="../script/SHA1.js"></script>
  189.   <script type="text/javascript" src="../script/doT.min.js"></script>
  190.   <script type="text/javascript">
  191.       apiready = function(){
  192.         var now = Date.now();
  193.         var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  194.         var params = {
  195.             fields: {},
  196.             where: {
  197.                 supportAreaId: "56c80e0c789b068408ab5a6f",
  198.                 wareTypeId: api.pageParam.wareTypeId
  199.             },
  200.             skip: 0,
  201.             limit: 5
  202.         };
  203.         api.ajax({
  204.             url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  205.             method: 'get',
  206.             headers: {
  207.                 "X-APICloud-AppId": "A6099255481782",
  208.                 "X-APICloud-AppKey":appKey
  209.             }
  210.         }, function(ret, err) {
  211.             if(ret){
  212.               var strTemplate = $api.html
  213.               (
  214.                 $api.byId('wareTemplate')
  215.               );
  216.               var fnTemplate = doT.template(strTemplate);
  217.               strTemplate = fnTemplate(ret);
  218.               var list = $api.byId('list');
  219.               $api.html(list, strTemplate);
  220.  
  221.             }
  222.             else{
  223.               alert(JSON.stringify(err));
  224.             }
  225.          }
  226.        );
  227.  
  228.      }
  229.  
  230.      // 实现商品列表的图片缓存
  231.      function fnLoadImage(ele_) {
  232.          var dataUrl = $api.attr(ele_, 'data-url');
  233.          // 缓存data-url所指定的图片
  234.          if (dataUrl) {
  235.              api.imageCache({
  236.                  url: dataUrl
  237.              }, function(ret, err) {
  238.                  if (ret) {
  239.                      ele_.src = ret.url;
  240.                  }
  241.              });
  242.          }
  243.      }
  244.   </script>
  245.   </html>

main_frame.html

实现下拉刷新

　　在html_frame中实现下拉刷新api.setRefreshHeaderInfo

  1.       api.setRefreshHeaderInfo({
  2.           loadingImg: 'widget://image/refresh.png',
  3.           bgColor: '#fff',
  4.           textColor: '#e1017e',
  5.           showTime: true
  6.       }, function(ret, err) {
  7.           // 刷新商品列表
  8.           fnLoadWares();
  9.       });

　　将获取商品列表的代码封装为函数fnLoadWares()，并修改apiready()函数，在apiready()函数中直接调用fnLoadWares()函数

  1.      function fnLoadWares() {
  2.        var now = Date.now();
  3.        var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  4.        var params = {
  5.            fields: {},
  6.            where: {
  7.                supportAreaId: "56c80e0c789b068408ab5a6f",
  8.                wareTypeId: api.pageParam.wareTypeId
  9.            },
  10.            skip: 0,
  11.            limit: 5
  12.        };
  13.        api.ajax({
  14.            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  15.            method: 'get',
  16.            headers: {
  17.                "X-APICloud-AppId": "A6099255481782",
  18.                "X-APICloud-AppKey":appKey
  19.            }
  20.        }, function(ret, err) {
  21.          api.refreshHeaderLoadDone();
  22.            if(ret){
  23.              var strTemplate = $api.html
  24.              (
  25.                $api.byId('wareTemplate')
  26.              );
  27.              var fnTemplate = doT.template(strTemplate);
  28.              strTemplate = fnTemplate(ret);
  29.              var list = $api.byId('list');
  30.              $api.html(list, strTemplate);
  31.  
  32.            }
  33.            else{
  34.              alert(JSON.stringify(err));
  35.            }
  36.         }
  37.       );
  38.  
  39.      }

　　在apiready函数中，页面打开的时候首先会加载一次商品列表，接着会通过api.setRefreshHeaderInfo()设置下拉刷新组件，在下拉进行后(回调函数被执行)会再次加载商品列表。最后修改api.ajax()的回调函数，获取商品列表后通过 api.refreshHeaderLoadDone()关闭下拉刷新组件

　　

  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           width: 100%;
  11.           height: 130px;
  12.           box-sizing: border-box;
  13.           padding: 4px 10px;
  14.       }
  15.  
  16.       header .banner {
  17.           width: 100%;
  18.           height: 100%;
  19.       }
  20.  
  21.       section {
  22.           position: relative;
  23.           width: 100%;
  24.           height: auto;
  25.           box-sizing: border-box;
  26.           padding: 0 8px;
  27.       }
  28.  
  29.       .content {
  30.           width: 100%;
  31.           height: 100%;
  32.       }
  33.  
  34.       .ware {
  35.           position: relative;
  36.           width: 100%;
  37.           height: 145px;
  38.           box-sizing: border-box;
  39.           padding-top: 15px;
  40.           padding-bottom: 15px;
  41.           border-bottom: 1px solid #d1d1d1;
  42.       }
  43.  
  44.       .ware .thumbnail {
  45.           position: absolute;
  46.           top: 20px;
  47.           left: 0px;
  48.           height: 100px;
  49.           width: 100px;
  50.       }
  51.  
  52.       .ware .info {
  53.           width: 100%;
  54.           height: 114px;
  55.           box-sizing: border-box;
  56.           padding-left: 112px;
  57.           padding-right: 28px;
  58.       }
  59.  
  60.       .ware .info .name {
  61.           width: 100%;
  62.           height: 15px;
  63.           color: #555555;
  64.           margin-top: 14px;
  65.           font-size: 15px;
  66.       }
  67.  
  68.       .ware .info .description {
  69.           margin-top: 10px;
  70.           width: 100%;
  71.           height: 13px;
  72.           font-size: 13px;
  73.           color: #9d9d9d;
  74.       }
  75.  
  76.       .ware .info .price-tag {
  77.           margin-top: 10px;
  78.           width: 100%;
  79.           height: 12px;
  80.           font-size: 12px;
  81.           vertical-align: top;
  82.       }
  83.  
  84.       .ware .info .price-tag .price {
  85.           color: #e3007f;
  86.       }
  87.  
  88.       .ware .info .price-tag .unit {
  89.           font-size: 8px;
  90.           color: #cbcbcb;
  91.       }
  92.  
  93.       .ware .info .origin-price {
  94.           margin-top: 5px;
  95.           width: 100%;
  96.           height: 10px;
  97.           font-size: 10px;
  98.           color: #d3d3d3;
  99.       }
  100.  
  101.       .ware .control {
  102.           position: absolute;
  103.           width: 110px;
  104.           height: 23px;
  105.           right: 8px;
  106.           top:90px;
  107.       }
  108.  
  109.       .ware .control .add {
  110.           position: absolute;
  111.           top: 0;
  112.           right: 0;
  113.           width: 23px;
  114.           height: 23px;
  115.           z-index: 2;
  116.       }
  117.  
  118.       .push-status {
  119.           width: 100%;
  120.           height: 40px;
  121.           font-size: 16px;
  122.           color: #888;
  123.           line-height: 40px;
  124.           text-align: center;
  125.           background-color: #fff;
  126.       }
  127.  
  128.       .active {
  129.           opacity: 0.7;
  130.       }
  131.       </style>
  132.   </head>
  133.   <body>
  134.     <header id="header">
  135.         <img id="banner" class="banner" src="../image/adver2.jpg">
  136.     </header>
  137.     <section id="list">
  138.       <div class="ware">
  139.         <div class="content">
  140.           <img class="thumbnail" src="../image/book1.png">
  141.           <div class="info">
  142.             <div class="name">安迪生童话</div>
  143.             <div class="description">描述：这是一本很浪漫的童话故事</div>
  144.               <div class="price-tag">
  145.                 <span class="prive">Y100</span>
  146.                 <span class="unit">/本</span>
  147.               </div>
  148.               <div class="origin-price">图书价:
  149.                 <del>Y110</del>
  150.               </div>
  151.           </div>
  152.           <div class="control">
  153.             <img class="add" src="../image/add1.png">
  154.           </div>
  155.         </div>
  156.       </div>
  157.     </section>
  158.     <div class="push-status" id="pushStatus">上拉加载更多</div>
  159.  
  160.   </body>
  161.  
  162.   <script type="text/template" id="wareTemplate">
  163.   {{~it:ware:index}}
  164.   <div class="ware">
  165.     <div class="content">
  166.           <img onload="fnLoadImage(this)" data-url="{{=ware.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">
  167.         <div class="info">
  168.         <div class="name">{{=ware.name}}</div>
  169.         <div class="description">{{=ware.description}}</div>
  170.         <div class="price-tag">
  171.             <span class="price">￥{{=ware.price}}</span>
  172.             <span class="unit">/{{=ware.unit}}</span>
  173.         <div>
  174.             <div class="origin-price">书店：
  175.               <del>￥{{=ware.originPrice}}</del>
  176.             </div>
  177.           </div>
  178.           <div class="control">
  179.               <img class="add" src="../image/add1.png">
  180.           </div>
  181.         </div>
  182.       </div>
  183.       {{~}}
  184.     </script>
  185.  
  186.   <script type="text/javascript" src="../script/api.js"></script>
  187.   <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  188.   <script type="text/javascript" src="../script/SHA1.js"></script>
  189.   <script type="text/javascript" src="../script/doT.min.js"></script>
  190.   <script type="text/javascript">
  191.       apiready = function(){
  192.  
  193.       fnLoadWares();
  194.  
  195.       api.setRefreshHeaderInfo({
  196.           loadingImg: 'widget://image/refresh.png',
  197.           bgColor: '#fff',
  198.           textColor: '#e1017e',
  199.           showTime: true
  200.       }, function(ret, err) {
  201.           // 刷新商品列表
  202.           fnLoadWares();
  203.       });
  204.  
  205.         api.addEventListener({
  206.               name:'scrolltobottom',
  207.               extra:{
  208.                 threshold:300//距离底部患有多少触发scrolltobottom事件
  209.               },function(ret,err){
  210.                 //获取更多的商品
  211.                 fnLoadWares(true);
  212.               }
  213.         });
  214.  
  215.      }
  216.  
  217.      // 实现商品列表的图片缓存
  218.      function fnLoadImage(ele_) {
  219.          var dataUrl = $api.attr(ele_, 'data-url');
  220.          // 缓存data-url所指定的图片
  221.          if (dataUrl) {
  222.              api.imageCache({
  223.                  url: dataUrl
  224.              }, function(ret, err) {
  225.                  if (ret) {
  226.                      ele_.src = ret.url;
  227.                  }
  228.              });
  229.          }
  230.      }
  231.  
  232.        var skip = 0;
  233.        var limit = 5;
  234.        function fnLoadWares(more){
  235.          if(more){
  236.            skip+=limit;
  237.          }else{
  238.            skip=0;
  239.          }
  240.        var now = Date.now();
  241.        var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  242.        var params = {
  243.            fields: {},
  244.            where: {
  245.                supportAreaId: "56c80e0c789b068408ab5a6f",
  246.                wareTypeId: api.pageParam.wareTypeId
  247.            },
  248.            skip: 0,
  249.            limit: 5
  250.        };
  251.        api.ajax({
  252.            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  253.            method: 'get',
  254.            headers: {
  255.                "X-APICloud-AppId": "A6099255481782",
  256.                "X-APICloud-AppKey":appKey
  257.            }
  258.        }, function(ret, err) {
  259.            if(ret){
  260.              var strTemplate = $api.html
  261.              (
  262.                $api.byId('wareTemplate')
  263.              );
  264.              var fnTemplate = doT.template(strTemplate);
  265.              strTemplate = fnTemplate(ret);
  266.              var list = $api.byId('list');
  267.              if(more){
  268.                $api.append(list, strTemplate);
  269.              }else{
  270.                 $api.html(list, strTemplate);
  271.              }
  272.             api.refreshHeaderLoadDone();
  273.            }
  274.            else{
  275.              alert(JSON.stringify(err));
  276.            }
  277.         }
  278.       );
  279.  
  280.      }
  281.  
  282.   </script>
  283.   </html>

main_frame.html

实现上拉加载更多

　　在main_frame.html中的apiready函数中添加

  1.         api.addEventListener({
  2.               name:'scrolltobottom',
  3.               extra:{
  4.                 threshold:300://距离底部患有多少触发scrolltobottom事件
  5.               },function(ret,err){
  6.                 //获取更多的商品
  7.                 fnLoadWares(true);
  8.               }
  9.         });

　　修改fnLoadWares()函数

  1.    var skip = 0;
  2.        var limit = 5;
  3.        function fnLoadWares(more){
  4.          if(more){
  5.            skip+=limit;
  6.          }else{
  7.            skip=0;
  8.          }
  9.        var now = Date.now();
  10.        var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  11.        var params = {
  12.            fields: {},
  13.            where: {
  14.                supportAreaId: "56c80e0c789b068408ab5a6f",
  15.                wareTypeId: api.pageParam.wareTypeId
  16.            },
  17.            skip: 0,
  18.            limit: 5
  19.        };
  20.        api.ajax({
  21.            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  22.            method: 'get',
  23.            headers: {
  24.                "X-APICloud-AppId": "A6099255481782",
  25.                "X-APICloud-AppKey":appKey
  26.            }
  27.        }, function(ret, err) {
  28.            if(ret){
  29.              var strTemplate = $api.html
  30.              (
  31.                $api.byId('wareTemplate')
  32.              );
  33.              var fnTemplate = doT.template(strTemplate);
  34.              strTemplate = fnTemplate(ret);
  35.              var list = $api.byId('list');
  36.              if(more){
  37.                $api.append(list, strTemplate);
  38.              }else{
  39.                 $api.html(list, strTemplate);
  40.              }
  41.             api.refreshHeaderLoadDone();
  42.            }
  43.            else{
  44.              alert(JSON.stringify(err));
  45.            }
  46.         }
  47.       );
  48.      }

　　首先通过api.addEventListener()监听scrolltobottom事件，然后再事件触发后调用fnLoadWares(true)来加载更多的商品。fnLoadWares()函数的唯一参数表示是否加载更多。然后将ship和limit字段提出，当加载更多时更新skip的数值即可。最后再输出内容时分别使用$api.html()和$api.append()来处理不同的情况，在“图书”列表下可以体验效果

　　

  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           width: 100%;
  11.           height: 130px;
  12.           box-sizing: border-box;
  13.           padding: 4px 10px;
  14.       }
  15.  
  16.       header .banner {
  17.           width: 100%;
  18.           height: 100%;
  19.       }
  20.  
  21.       section {
  22.           position: relative;
  23.           width: 100%;
  24.           height: auto;
  25.           box-sizing: border-box;
  26.           padding: 0 8px;
  27.       }
  28.  
  29.       .content {
  30.           width: 100%;
  31.           height: 100%;
  32.       }
  33.  
  34.       .ware {
  35.           position: relative;
  36.           width: 100%;
  37.           height: 145px;
  38.           box-sizing: border-box;
  39.           padding-top: 15px;
  40.           padding-bottom: 15px;
  41.           border-bottom: 1px solid #d1d1d1;
  42.       }
  43.  
  44.       .ware .thumbnail {
  45.           position: absolute;
  46.           top: 20px;
  47.           left: 0px;
  48.           height: 100px;
  49.           width: 100px;
  50.       }
  51.  
  52.       .ware .info {
  53.           width: 100%;
  54.           height: 114px;
  55.           box-sizing: border-box;
  56.           padding-left: 112px;
  57.           padding-right: 28px;
  58.       }
  59.  
  60.       .ware .info .name {
  61.           width: 100%;
  62.           height: 15px;
  63.           color: #555555;
  64.           margin-top: 14px;
  65.           font-size: 15px;
  66.       }
  67.  
  68.       .ware .info .description {
  69.           margin-top: 10px;
  70.           width: 100%;
  71.           height: 13px;
  72.           font-size: 13px;
  73.           color: #9d9d9d;
  74.       }
  75.  
  76.       .ware .info .price-tag {
  77.           margin-top: 10px;
  78.           width: 100%;
  79.           height: 12px;
  80.           font-size: 12px;
  81.           vertical-align: top;
  82.       }
  83.  
  84.       .ware .info .price-tag .price {
  85.           color: #e3007f;
  86.       }
  87.  
  88.       .ware .info .price-tag .unit {
  89.           font-size: 8px;
  90.           color: #cbcbcb;
  91.       }
  92.  
  93.       .ware .info .origin-price {
  94.           margin-top: 5px;
  95.           width: 100%;
  96.           height: 10px;
  97.           font-size: 10px;
  98.           color: #d3d3d3;
  99.       }
  100.  
  101.       .ware .control {
  102.           position: absolute;
  103.           width: 110px;
  104.           height: 23px;
  105.           right: 8px;
  106.           top:90px;
  107.       }
  108.  
  109.       .ware .control .add {
  110.           position: absolute;
  111.           top: 0;
  112.           right: 0;
  113.           width: 23px;
  114.           height: 23px;
  115.           z-index: 2;
  116.       }
  117.  
  118.       .push-status {
  119.           width: 100%;
  120.           height: 40px;
  121.           font-size: 16px;
  122.           color: #888;
  123.           line-height: 40px;
  124.           text-align: center;
  125.           background-color: #fff;
  126.       }
  127.  
  128.       .active {
  129.           opacity: 0.7;
  130.       }
  131.       </style>
  132.   </head>
  133.   <body>
  134.     <header id="header">
  135.         <img id="banner" class="banner" src="../image/adver2.jpg">
  136.     </header>
  137.     <section id="list">
  138.       <div class="ware">
  139.         <div class="content">
  140.           <img class="thumbnail" src="../image/book1.png">
  141.           <div class="info">
  142.             <div class="name">安迪生童话</div>
  143.             <div class="description">描述：这是一本很浪漫的童话故事</div>
  144.               <div class="price-tag">
  145.                 <span class="prive">Y100</span>
  146.                 <span class="unit">/本</span>
  147.               </div>
  148.               <div class="origin-price">图书价:
  149.                 <del>Y110</del>
  150.               </div>
  151.           </div>
  152.           <div class="control">
  153.             <img class="add" src="../image/add1.png">
  154.           </div>
  155.         </div>
  156.       </div>
  157.     </section>
  158.     <div class="push-status" id="pushStatus">上拉加载更多</div>
  159.  
  160.   </body>
  161.  
  162.   <script type="text/template" id="wareTemplate">
  163.   {{~it:ware:index}}
  164.   <div class="ware">
  165.     <div class="content">
  166.           <img onload="fnLoadImage(this)" data-url="{{=ware.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">
  167.         <div class="info">
  168.         <div class="name">{{=ware.name}}</div>
  169.         <div class="description">{{=ware.description}}</div>
  170.         <div class="price-tag">
  171.             <span class="price">￥{{=ware.price}}</span>
  172.             <span class="unit">/{{=ware.unit}}</span>
  173.         <div>
  174.             <div class="origin-price">书店：
  175.               <del>￥{{=ware.originPrice}}</del>
  176.             </div>
  177.           </div>
  178.           <div class="control">
  179.               <img class="add" src="../image/add1.png">
  180.           </div>
  181.         </div>
  182.       </div>
  183.       {{~}}
  184.     </script>
  185.  
  186.   <script type="text/javascript" src="../script/api.js"></script>
  187.   <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  188.   <script type="text/javascript" src="../script/SHA1.js"></script>
  189.   <script type="text/javascript" src="../script/doT.min.js"></script>
  190.   <script type="text/javascript">
  191.       apiready = function(){
  192.  
  193.       fnLoadWares();
  194.  
  195.       api.setRefreshHeaderInfo({
  196.           loadingImg: 'widget://image/refresh.png',
  197.           bgColor: '#fff',
  198.           textColor: '#e1017e',
  199.           showTime: true
  200.       }, function(ret, err) {
  201.           // 刷新商品列表
  202.           fnLoadWares();
  203.       });
  204.  
  205.         api.addEventListener({
  206.               name:'scrolltobottom',
  207.               extra:{
  208.                 threshold:300//距离底部患有多少触发scrolltobottom事件
  209.               },function(ret,err){
  210.                 //获取更多的商品
  211.                 fnLoadWares(true);
  212.               }
  213.         });
  214.  
  215.      }
  216.  
  217.      // 实现商品列表的图片缓存
  218.      function fnLoadImage(ele_) {
  219.          var dataUrl = $api.attr(ele_, 'data-url');
  220.          // 缓存data-url所指定的图片
  221.          if (dataUrl) {
  222.              api.imageCache({
  223.                  url: dataUrl
  224.              }, function(ret, err) {
  225.                  if (ret) {
  226.                      ele_.src = ret.url;
  227.                  }
  228.              });
  229.          }
  230.      }
  231.  
  232.        var skip = 0;
  233.        var limit = 5;
  234.        function fnLoadWares(more){
  235.          if(more){
  236.            skip+=limit;
  237.          }else{
  238.            skip=0;
  239.          }
  240.        var now = Date.now();
  241.        var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  242.        var params = {
  243.            fields: {},
  244.            where: {
  245.                supportAreaId: "56c80e0c789b068408ab5a6f",
  246.                wareTypeId: api.pageParam.wareTypeId
  247.            },
  248.            skip: 0,
  249.            limit: 5
  250.        };
  251.        api.ajax({
  252.            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
  253.            method: 'get',
  254.            headers: {
  255.                "X-APICloud-AppId": "A6099255481782",
  256.                "X-APICloud-AppKey":appKey
  257.            }
  258.        }, function(ret, err) {
  259.            if(ret){
  260.              var strTemplate = $api.html
  261.              (
  262.                $api.byId('wareTemplate')
  263.              );
  264.              var fnTemplate = doT.template(strTemplate);
  265.              strTemplate = fnTemplate(ret);
  266.              var list = $api.byId('list');
  267.              if(more){
  268.                $api.append(list, strTemplate);
  269.              }else{
  270.                 $api.html(list, strTemplate);
  271.              }
  272.             api.refreshHeaderLoadDone();
  273.            }
  274.            else{
  275.              alert(JSON.stringify(err));
  276.            }
  277.         }
  278.       );
  279.      }
  280.  
  281.   </script>
  282.   </html>

main_frame.html

实现保存登陆信息

　　实现保存登陆信息，这里用到本地存储。在用户未登录时如果点击右上角的个人中心按钮，会跳转到登陆页面，如果用户已登陆则会跳转到个人中心页面

　　添加personalcenter.html和personalcenter_frame.html用户中心的静态界面

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>title</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     html,
  12.     body {
  13.         display: -webkit-box;
  14.         display: -webkit-flex;
  15.         display: flex;
  16.         -webkit-box-orient: vertical;
  17.         -webkit-flex-flow: column;
  18.         flex-flow: column;
  19.         height: 100%;
  20.     }
  21.  
  22.     header {
  23.         width: 100%;
  24.         height: 50px;
  25.         background-color: #e3007f
  26.     }
  27.  
  28.     header .back {
  29.         position: absolute;
  30.         bottom: 0;
  31.         left: 0;
  32.         width: 80px;
  33.         height: 50px;
  34.         background: url(../image/back.png);
  35.         background-position: 12px 16px;
  36.         background-size: 11px 18px;
  37.         background-repeat: no-repeat;
  38.     }
  39.  
  40.     section {
  41.         -webkit-box-flex: 1;
  42.         -webkit-flex: 1;
  43.         flex: 1;
  44.         overflow: auto
  45.     }
  46.  
  47.     footer {
  48.         display: -webkit-box;
  49.         display: -webkit-flex;
  50.         display: flex;
  51.         -webkit-box-orient: horizontal;
  52.         -webkit-flex-flow: row;
  53.         flex-flow: row;
  54.         width: 100%;
  55.         height: 50px;
  56.     }
  57.  
  58.     footer .item {
  59.         -webkit-box-flex: 1;
  60.         -webkit-flex: 1;
  61.         flex: 1;
  62.         width: 100%;
  63.         height: 50px;
  64.     }
  65.  
  66.     footer .item-service {
  67.         text-align: right;
  68.     }
  69.  
  70.     footer .item .button {
  71.         display: inline-block;
  72.         width: auto;
  73.         height: 50px;
  74.         box-sizing: border-box;
  75.         line-height: 50px;
  76.         text-align: left;
  77.         font-size: 16px;
  78.         background-size: auto 16px;
  79.         background-position: 16px center;
  80.         background-repeat: no-repeat;
  81.     }
  82.  
  83.     .setting {
  84.         padding-left: 34px;
  85.         background-image: url(../image/user_setting.png);
  86.     }
  87.  
  88.     .message {
  89.         padding-left: 44px;
  90.         background-image: url(../image/icon_user_messages.png);
  91.     }
  92.  
  93.     .service {
  94.         padding-left: 34px;
  95.         padding-right: 16px;
  96.         background-image: url(../image/user_call.png);
  97.     }
  98.     </style>
  99. </head>
  100.  
  101. <body>
  102.     <header id="header">
  103.         <div class="back" tapmode onclick="api.closeWin();"></div>
  104.     </header>
  105.     <section></section>
  106.     <footer id="footer">
  107.         <div class="item">
  108.             <div class="button setting" tapmode onclick="fnOpenSettingWin();">设置</div>
  109.         </div>
  110.         <div class="item">
  111.             <div class="button message" tapmode onclick="fnOpenMessageWin();">消息</div>
  112.         </div>
  113.         <div class="item"></div>
  114.         <div class="item item-service">
  115.             <div class="button service" tapmode onclick="fnOpenCustomerServiceWin();">客服</div>
  116.         </div>
  117.     </footer>
  118. </body>
  119. <script type="text/javascript" src="../script/api.js"></script>
  120. <script type="text/javascript">
  121. apiready = function() {
  122.     var header = $api.byId('header');
  123.     var footer = $api.byId('footer');
  124.  
  125.     var headerH = $api.fixStatusBar(header);
  126.     var footerH = $api.fixTabBar(footer);
  127.  
  128.     api.openFrame({
  129.         name: 'personalcenter_frame',
  130.         url: './personalcenter_frame.html',
  131.         rect: {
  132.             marginTop: headerH,
  133.             marginBottom: footerH,
  134.             w: 'auto'
  135.         },
  136.         bounces: false
  137.     });
  138. };
  139.  
  140. // 打开设置Window
  141. function fnOpenSettingWin () {
  142.     api.openWin({
  143.         name: 'setting',
  144.         url: './setting.html'
  145.     });
  146. }
  147.  
  148. // 打开消息Window
  149. function fnOpenMessageWin () {
  150.     api.openWin({
  151.         name: 'message',
  152.         url: './message.html'
  153.     });
  154. }
  155.  
  156. // 打开客服Window
  157. function fnOpenCustomerServiceWin () {
  158.     api.openWin({
  159.         name: 'customerservice',
  160.         url: './customerservice.html'
  161.     });
  162. }
  163. </script>
  164.  
  165. </html>

personalcenter.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>个人中心Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     header {
  12.         height: 150px;
  13.         padding-top: 8px;
  14.         background-color: #e3007f;
  15.     }
  16.  
  17.     header .icon-panel {
  18.         width: 100%;
  19.         height: 86px;
  20.         text-align: center;
  21.     }
  22.  
  23.     header .icon-panel .icon {
  24.         display: inline-block;
  25.         box-sizing: border-box;
  26.         width: 86px;
  27.         height: 86px;
  28.         border: 3px solid #b10063;
  29.         border-radius: 86px;
  30.         background-image: url(../image/default_square.png);
  31.         background-size: 100% 100%;
  32.         background-position: center center;
  33.         background-repeat: no-repeat;
  34.     }
  35.  
  36.     header .username {
  37.         height: 30px;
  38.         line-height: 30px;
  39.         font-size: 14px;
  40.         color: #fff;
  41.         text-align: center;
  42.     }
  43.  
  44.     header .account-info {
  45.         height: 30px;
  46.         line-height: 30px;
  47.         font-size: 12px;
  48.         color: #fff;
  49.         text-align: center;
  50.     }
  51.  
  52.     .separator {
  53.         margin: auto 10px;
  54.     }
  55.  
  56.     .option {
  57.         position: relative;
  58.         box-sizing: border-box;
  59.         width: 100%;
  60.         height: 61px;
  61.         border-bottom: 1px solid #ddd;
  62.     }
  63.  
  64.     .option .icon {
  65.         position: absolute;
  66.         left: 0;
  67.         top: 0;
  68.         width: 40px;
  69.         height: 60px;
  70.         background-repeat: no-repeat;
  71.         background-position: 12px center;
  72.         background-size: auto 20px;
  73.     }
  74.  
  75.     .option .icon-myorder {
  76.         background-image: url(../image/img_item_myorder.png);
  77.     }
  78.  
  79.     .option .icon-account {
  80.         background-image: url(../image/icon_user_info_accounts.png);
  81.     }
  82.  
  83.     .option .icon-coupon {
  84.         background-image: url(../image/icon_user_coupon.png);
  85.         background-position: 8px center;
  86.     }
  87.  
  88.     .option .icon-address {
  89.         background-image: url(../image/item_user_address.png);
  90.     }
  91.  
  92.     .option .title {
  93.         position: relative;
  94.         box-sizing: border-box;
  95.         width: 100%;
  96.         height: 60px;
  97.         padding-left: 40px;
  98.         font-size: 14px;
  99.         color: #444;
  100.         text-align: left;
  101.         line-height: 60px;
  102.     }
  103.  
  104.     .option .arrow-panel {
  105.         position: absolute;
  106.         top: 0;
  107.         right: 12px;
  108.         width: auto;
  109.         height: 60px;
  110.         background-image: url(../image/arrow_right.png);
  111.         background-repeat: no-repeat;
  112.         background-size: 16px 24px;
  113.         background-position: right center;
  114.     }
  115.  
  116.     .option .arrow-panel .text {
  117.         box-sizing: border-box;
  118.         padding-right: 20px;
  119.         width: auto;
  120.         height: 60px;
  121.         line-height: 60px;
  122.         font-size: 13px;
  123.         color: #888;
  124.         text-align: left;
  125.     }
  126.  
  127.     .highlight {
  128.         opacity: 0.7;
  129.     }
  130.     </style>
  131. </head>
  132.  
  133. <body>
  134.     <header>
  135.         <div class="icon-panel" tapmode onclick="fnSetAvatar()">
  136.             <div id="icon" class="icon"></div>
  137.         </div>
  138.         <div id="username" class="username">broad</div>
  139.         <div class="account-info">积分：0 <span class="separator">|</span>余额：￥0</div>
  140.     </header>
  141.     <section>
  142.         <div class="option" tapmode onclick="fnOpenMyOrderWin();">
  143.             <div class="icon icon-myorder"></div>
  144.             <div class="title">我的订单</div>
  145.             <div class="arrow-panel">
  146.                 <div class="text">查看所有订单详情</div>
  147.             </div>
  148.         </div>
  149.         <div class="option" tapmode onclick="fnOpenAccountWin();">
  150.             <div class="icon icon-account"></div>
  151.             <div class="title">我的账户</div>
  152.             <div class="arrow-panel">
  153.                 <div class="text">充值有礼</div>
  154.             </div>
  155.         </div>
  156.         <div class="option" tapmode onclick="fnOpenCouponWin();">
  157.             <div class="icon icon-coupon"></div>
  158.             <div class="title">优惠卷</div>
  159.             <div class="arrow-panel">
  160.                 <div class="text">查看我的优惠卷</div>
  161.             </div>
  162.         </div>
  163.         <div class="option" tapmode onclick="fnOpenAddressWin();">
  164.             <div class="icon icon-address"></div>
  165.             <div class="title">收货地址</div>
  166.             <div class="arrow-panel">
  167.                 <div class="text">管理我的收货地址</div>
  168.             </div>
  169.         </div>
  170.     </section>
  171. </body>
  172. <script type="text/javascript" src="../script/api.js"></script>
  173. <script type="text/javascript">
  174. apiready = function() {
  175.     getUserInfo();
  176. };
  177.  
  178. // 获取个人信息
  179. function getUserInfo() {
  180.     var userInfo = $api.getStorage('userInfo');
  181.     api.ajax({
  182.         url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
  183.         method: 'get',
  184.         headers: {
  185.             "X-APICloud-AppId": api.appId,
  186.             "X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
  187.             "Authorization": userInfo.id
  188.         }
  189.     }, function(ret, err) {
  190.         if (ret) {
  191.             fnUpdateLocalAvatar(ret);
  192.         } else {
  193.             alert(JSON.stringify(err));
  194.         }
  195.     });
  196. }
  197.  
  198. // 更新头像显示
  199. function fnUpdateLocalAvatar(data_) {
  200.     if (!data_.avatar) {
  201.         return;
  202.     }
  203.  
  204.     // 缓存头像
  205.     var icon = $api.byId('icon');
  206.     api.imageCache({
  207.         url: data_.avatar.url
  208.     }, function(ret, err) {
  209.         if (ret) {
  210.             icon.style.backgroundImage = 'url(' + ret.url + ')';
  211.         } else {
  212.             api.toast({
  213.                 msg: '获取头像失败',
  214.                 duration: 2000,
  215.                 location: 'bottom'
  216.             });
  217.         }
  218.     });
  219. }
  220.  
  221. // 选择头像
  222. function fnSetAvatar() {
  223.     api.actionSheet({
  224.         title: '选择',
  225.         cancelTitle: '取消',
  226.         buttons: ['拍照', '相册']
  227.     }, function(ret, err) {
  228.         if (ret) {
  229.             var sourceTypes = [
  230.                 'camera',
  231.                 'album'
  232.             ];
  233.             if (ret.buttonIndex == (sourceTypes.length + 1)) {
  234.                 return;
  235.             }
  236.             api.getPicture({
  237.                 sourceType: sourceTypes[ret.buttonIndex - 1],
  238.                 allowEdit: true,
  239.                 quality: 50, // 指定图片质量
  240.                 targetWidth: 100, // 指定图片宽度
  241.                 targetHeight: 100 // 指定图片宽度
  242.             }, function(ret, err) {
  243.                 if (ret) {
  244.                     fnUploadAtavar(ret.data);
  245.                 }
  246.             });
  247.         }
  248.     });
  249. }
  250.  
  251. // 上传头像文件
  252. function fnUploadAtavar(avatarUrl_) {
  253.     api.ajax({
  254.         url: 'https://d.apicloud.com/mcm/api/file',
  255.         method: 'post',
  256.         headers: {
  257.             "X-APICloud-AppId": api.appId,
  258.             "X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825'
  259.         },
  260.         data: {
  261.             values: {
  262.                 filename: 'icon'
  263.             },
  264.             files: {
  265.                 file: avatarUrl_
  266.             }
  267.         }
  268.     }, function(ret, err) {
  269.         if (ret) {
  270.             fnUpdateUserAtavar(ret);
  271.         } else {
  272.             alert(JSON.stringify(err));
  273.         }
  274.     });
  275. }
  276.  
  277. // 更新用户头像
  278. function fnUpdateUserAtavar(avatar_) {
  279.     var userInfo = $api.getStorage('userInfo');
  280.     api.ajax({
  281.         url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
  282.         method: 'put',
  283.         headers: {
  284.             "X-APICloud-AppId": api.appId,
  285.             "X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
  286.             "Authorization": userInfo.id
  287.         },
  288.         data: {
  289.             values: {
  290.                 avatar: avatar_
  291.             }
  292.         }
  293.     }, function(ret, err) {
  294.         if (ret) {
  295.             fnUpdateLocalAvatar(ret);
  296.         } else {
  297.             alert(JSON.stringify(err));
  298.         }
  299.     });
  300. }
  301.  
  302. // 打开我的订单Window
  303. function fnOpenMyOrderWin() {
  304.     api.openWin({
  305.         name: 'myorder',
  306.         url: './myorder.html'
  307.     });
  308. }
  309.  
  310. // 打开我的账户Window
  311. function fnOpenAccountWin() {
  312.     api.openWin({
  313.         name: 'account',
  314.         url: './account.html'
  315.     });
  316. }
  317.  
  318. // 打开我的优惠券Window
  319. function fnOpenCouponWin() {
  320.     api.openWin({
  321.         name: 'coupon',
  322.         url: './coupon.html'
  323.     });
  324. }
  325.  
  326. // 打开收货地址Window
  327. function fnOpenAddressWin() {
  328.     api.openWin({
  329.         name: 'address',
  330.         url: './address.html'
  331.     });
  332. }
  333. </script>
  334.  
  335. </html>

personalcenter_frame.html

　　修改login_frame.html中登陆请求的回调函数

  1.       function (ret,err){
  2.             if(ret&&ret.userId){
  3.               $api.setStorage('userInfo', ret);
  4.               api.closeToWin({
  5.                   name: 'main'
  6.               });
  7.             }else{
  8.               alert("登陆失败！");
  9.             }
  10.           }

　　这里首先将登陆成果返回的结果保存到本地userInfo字段中。接着关闭当前屏幕Window栈里的所有Window，回到名称为main的Window(首页)

  1.   function fnOpenPersonalCenterWin() {
  2.           // 从缓存中获取用户信息
  3.           var userInfo = $api.getStorage('userInfo');
  4.  
  5.           // 判断当前用户是否登录了
  6.           if (userInfo ) {
  7.               // 登录成功，打开个人中心Window
  8.               api.openWin({
  9.                   name: 'personalcenter',
  10.                   url: './personalcenter.html',
  11.                   pageParam:{
  12.                     userId:userInfo.userId
  13.                   }
  14.               });
  15.           } else {
  16.               // 没有登录，打开登录Window
  17.               api.openWin({
  18.                   name: 'login',
  19.                   url: './login.html'
  20.               });
  21.           }
  22.       }

　　这里先获得本地存储的userInfo字段，如果找到，则打开个人中心界面，并使用其中的userId作为参数，如果获取不到则打开登陆页面

　　点击个人中心左下角的设置按钮进入设置页面，完成设置页面的静态页面setting.html和setting_frame.html的编写

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>设置</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     header {
  12.         width: 100%;
  13.         height: 50px;
  14.         background-color: #e3007f
  15.     }
  16.  
  17.     header .back {
  18.         position: absolute;
  19.         bottom: 0;
  20.         left: 0;
  21.         width: 80px;
  22.         height: 50px;
  23.         background: url(../image/back.png);
  24.         background-position: 12px 16px;
  25.         background-size: 11px 18px;
  26.         background-repeat: no-repeat;
  27.     }
  28.  
  29.     header h1 {
  30.         width: 100%;
  31.         height: 50px;
  32.         line-height: 50px;
  33.         text-align: center;
  34.         color: #fff;
  35.         font-size: 20px;
  36.     }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <header id="header">
  42.         <div class="back" tapmode onclick="api.closeWin();"></div>
  43.         <h1>设置</h1>
  44.     </header>
  45. </body>
  46. <script type="text/javascript" src="../script/api.js"></script>
  47. <script type="text/javascript">
  48. apiready = function() {
  49.     var header = $api.byId('header');
  50.     $api.fixStatusBar(header);
  51.     var headerH = $api.offset(header).h;
  52.     api.openFrame({
  53.         name: 'setting_frame',
  54.         url: './setting_frame.html',
  55.         rect: {
  56.             x: 0,
  57.             y: headerH,
  58.             w: 'auto',
  59.             h: 'auto'
  60.         },
  61.         bounces: true
  62.     });
  63. };
  64. </script>
  65.  
  66. </html>

setting.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>设置Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     .option {
  12.         position: relative;
  13.         box-sizing: border-box;
  14.         height: 61px;
  15.         border-bottom: 1px solid #ddd;
  16.     }
  17.  
  18.     .option .title {
  19.         position: relative;
  20.         width: 100%;
  21.         height: 60px;
  22.         box-sizing: border-box;
  23.         padding-left: 16px;
  24.         line-height: 60px;
  25.         font-size: 14px;
  26.         color: #444;
  27.         text-align: left;
  28.     }
  29.  
  30.     .option .arrow-panel {
  31.         position: absolute;
  32.         top: 0;
  33.         right: 12px;
  34.         width: auto;
  35.         height: 60px;
  36.         background-image: url(../image/arrow_right.png);
  37.         background-repeat: no-repeat;
  38.         background-size: 16px 24px;
  39.         background-position: right center;
  40.     }
  41.  
  42.     .option .arrow-panel .text {
  43.         box-sizing: border-box;
  44.         width: auto;
  45.         height: 60px;
  46.         padding-right: 20px;
  47.         line-height: 60px;
  48.         font-size: 13px;
  49.         color: #888;
  50.         text-align: left;
  51.     }
  52.  
  53.     .button {
  54.         width: auto;
  55.         height: 50px;
  56.         margin-left: 32px;
  57.         margin-right: 32px;
  58.         margin-top: 16px;
  59.         background-color: #f00;
  60.         line-height: 50px;
  61.         color: #fff;
  62.         font-size: 20px;
  63.         text-align: center;
  64.         border-radius: 8px;
  65.     }
  66.  
  67.     .highlight {
  68.         opacity: 0.7;
  69.     }
  70.     </style>
  71. </head>
  72.  
  73. <body>
  74.     <section>
  75.         <div class="option" tapmode onclick="fnClearCache();">
  76.             <div class="title">清除缓存</div>
  77.             <div class="arrow-panel">
  78.                 <div id="cacheSize" class="text"></div>
  79.             </div>
  80.         </div>
  81.         <div class="option" tapmode onclick="fnOpenAboutWin();">
  82.             <div class="title">关于</div>
  83.             <div class="arrow-panel">
  84.                 <div class="text"></div>
  85.             </div>
  86.         </div>
  87.         <div class="button" tapmode onclick="fnLogout();">退出登录</div>
  88.     </section>
  89. </body>
  90. <script type="text/javascript" src="../script/api.js"></script>
  91. <script type="text/javascript">
  92. apiready = function() {
  93.     getCacheSize();
  94. };
  95.  
  96. function getCacheSize() {
  97.     api.getCacheSize(function(ret) {
  98.         var size = ret.size;
  99.         var cacheSize = $api.byId('cacheSize');
  100.         size = parseInt((size / 1024 / 1024) * 100) / 100;
  101.         cacheSize.innerHTML = size + ' M';
  102.     });
  103. }
  104.  
  105. function fnClearCache() {
  106.     api.clearCache(function() {
  107.         api.toast({
  108.             msg: '缓存清除完毕'
  109.         });
  110.         setTimeout(function() {
  111.             getCacheSize();
  112.         }, 300);
  113.     });
  114. }
  115.  
  116. function fnOpenAboutWin () {
  117.     api.openWin({
  118.         name: 'about',
  119.         url: './about.html'
  120.     });
  121. }
  122.  
  123. function fnLogout() {
  124.     api.confirm({
  125.         title: '提示',
  126.         msg: '是否退出登录',
  127.         buttons: ['确定', '取消']
  128.     }, function(ret, err) {
  129.         if (ret) {
  130.             if (1 == ret.buttonIndex) {
  131.                 $api.rmStorage('userInfo');
  132.                 api.closeToWin({
  133.                     name: 'main'
  134.                 });
  135.             }
  136.         }
  137.     });
  138. }
  139. </script>
  140.  
  141. </html>

setting_frame.html

　　打开setting_frame.html，为退出登陆按钮添加点击事件

  1. function fnLogout() {
  2.     api.confirm({
  3.         title: '提示',
  4.         msg: '是否退出登录',
  5.         buttons: ['确定', '取消']
  6.     }, function(ret, err) {
  7.         if (ret) {
  8.             if (1 == ret.buttonIndex) {
  9.                 $api.rmStorage('userInfo');
  10.                 api.closeToWin({
  11.                     name: 'main'
  12.                 });
  13.             }
  14.         }
  15.     });
  16. }

　　这里使用api.comfirm()来弹出交互对话框。在用户点击某个按钮后会调用回调函数，ret.buttonIndex是用户点击的按钮索引

　　

  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.       <meta charset="utf-8">
  5.       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.       <title>title</title>
  7.       <link rel="stylesheet" type="text/css" href="../css/api.css"/>
  8.       <style>
  9.       header {
  10.           position: relative;
  11.           width: 100%;
  12.           height: 50px;
  13.           background-color: #ffaf45;
  14.       }
  15.  
  16.       header .left {
  17.           position: absolute;
  18.           bottom: 0;
  19.           left: 0;
  20.           width: 100px;
  21.           height: 50px;
  22.       }
  23.  
  24.       header .left .arrow {
  25.           position: absolute;
  26.           bottom: 21px;
  27.           left: 11px;
  28.           width: 13px;
  29.           height: 8px;
  30.           background: url(../image/arrow_down.png);
  31.           background-size: 13px 8px;
  32.           background-position: center center;
  33.           background-repeat: no-repeat;
  34.           -webkit-transition: 200ms;
  35.           transition: 200ms;
  36.       }
  37.  
  38.       header .left .arrow.active {
  39.           -webkit-transform: rotate(180deg);
  40.           transform: rotate(180deg);
  41.       }
  42.  
  43.       header .left .city {
  44.           position: relative;
  45.           z-index: 2;
  46.           width: 100%;
  47.           height: 50px;
  48.           padding-left: 27px;
  49.           box-sizing: border-box;
  50.           line-height: 50px;
  51.           font-size: 14px;
  52.           color: #fff;
  53.           text-align: left;
  54.       }
  55.  
  56.       header .center {
  57.           position: relative;
  58.           width: 100%;
  59.           height: 100%;
  60.           background: url(../image/book.png);
  61.           background-size: 74px 19px;
  62.           background-position: center center;
  63.           background-repeat: no-repeat;
  64.       }
  65.  
  66.       header .right {
  67.           position: absolute;
  68.           bottom: 0;
  69.           right: 0;
  70.           width: 40px;
  71.           height: 50px;
  72.           background: url(../image/home_membercenter.png);
  73.           background-size: 30px 30px;
  74.           background-position: center center;
  75.           background-repeat: no-repeat;
  76.       }
  77.  
  78.       nav {
  79.           display: -webkit-box;
  80.           display: -webkit-flex;
  81.           display: flex;
  82.           -webkit-box-orient: horizontal;
  83.           -webkit-flex-flow: row;
  84.           flex-flow: row;
  85.           position: relative;
  86.           width: 100%;
  87.           height: 40px;
  88.           background-color: #ffaf45;
  89.       }
  90.  
  91.       nav .menu {
  92.           -webkit-box-flex: 1;
  93.           -webkit-flex: 1;
  94.           flex: 1;
  95.           width: 100%;
  96.           height: 40px;
  97.           line-height: 40px;
  98.           font-size: 13px;
  99.           color: #ff7f00;
  100.           text-align: center;
  101.       }
  102.  
  103.       nav .menu.selected {
  104.           font-size: 14px;
  105.           color: #fff;
  106.           font-weight: bolder;
  107.       }
  108.       </style>
  109.   </head>
  110.   <body>
  111.     <!--header部分-->
  112.     <header id="header">
  113.           <div class="left" tapmode onclick="fnOpenCitySelectorFrame()">
  114.             <div class="arrow" id="arrow"></div>
  115.             <div class="city" id="city">厦门市</div>
  116.         </div>
  117.         <div class="center"></div>
  118.         <!--右上角注册点击事件-->
  119.         <div class="right" tapmode onclick="fnOpenPersonalCenterWin();"></div>
  120.     </header>
  121.     <nav id="nav">
  122.         <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">武侠</div>
  123.         <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">科幻</div>
  124.         <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">悬疑</div>
  125.         <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(3);">爱情</div>
  126.         <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(4);">恐怖</div>
  127.     </nav>
  128.   </body>
  129.   <script type="text/javascript" src="../script/api.js"></script>
  130.   <script type="text/javascript">
  131.       apiready = function(){
  132.           $api.fixStatusBar(
  133.             $api.byId('header')
  134.           );
  135.  
  136.           var header = $api.byId('header');
  137.           var nav = $api.byId('nav');
  138.  
  139.           var headerH = $api.offset(header).h;
  140.           var navH = $api.offset(nav).h;
  141.  
  142.           var frames = [];
  143.           for (var i = 0; i < 5; i++) {
  144.               frames.push({
  145.                   name: 'main_frame_' + i,
  146.                   url: './main_frame.html',
  147.                   pageParam: {
  148.                       wareTypeIndex: i
  149.                   }
  150.               });
  151.           }
  152.  
  153.           frames[0].pageParam.wareTypeId = "56c80da883af652643474b6b";
  154.           frames[1].pageParam.wareTypeId = "56c80db78d04c83d3d1dedea";
  155.           frames[2].pageParam.wareTypeId = "56c80dc031da9e480de1cb49";
  156.           frames[3].pageParam.wareTypeId = "56c80dc383af652643474b6d";
  157.           frames[4].pageParam.wareTypeId = "56c80dc88d04c83d3d1dedf3";
  158.  
  159.           // 打开FrameGroup
  160.           api.openFrameGroup ({
  161.               name: 'mainFrameGroup',
  162.               scrollEnabled: true,      //支持手势滑动
  163.               rect: {
  164.                    x: 0,
  165.                    y: headerH+navH,
  166.                    w: 'auto',          //自动填充所在Window宽度
  167.                    h: 'auto'           //自动填充所在window高度
  168.               },
  169.               index: 0,
  170.               frames: frames,
  171.               preload:frames.length
  172.           }, function(ret, err){        //回调函数
  173.               var menus = $api.domAll($api.byId("nav"),".menu");
  174.               for(var i=0;i<menus.length;i++){
  175.                   $api.removeCls(menus[i], 'selected');
  176.               }
  177.               $api.addCls(menus[ret.index],'selected');
  178.           });
  179.  
  180.           api.openFrame({
  181.               name: 'minicart_frame',
  182.               url: './minicart_frame.html',
  183.               rect: {
  184.                   x: 0,
  185.                   y: api.winHeight - 55,
  186.                   w: 150,
  187.                   h: 34
  188.               },
  189.               bounces: false // 关闭弹动
  190.           });
  191.           // 将mini购物车Frame放置在首页Window所有Frame的最上层
  192.           api.bringFrameToFront({
  193.               from: 'minicart_frame'
  194.           });
  195.  
  196.           api.addEventListener({
  197.               name: 'citySelected'
  198.           }, function(ret, err){
  199.               $api.removeCls($api.byId("arrow"),'active');
  200.               $api.html($api.byId("city"),ret.value.cityName);
  201.               api.closeFrame({
  202.                   name:'cityselectorFrame'
  203.               });
  204.               });
  205.  
  206.       }
  207.  
  208.       // 分类菜单点击的响应函数，切换Frame
  209.       function fnSetNavMenuIndex(index_) {
  210.           // 首先更新菜单选中状态
  211.           var menus = $api.domAll($api.byId("nav"),".menu");
  212.           $api.addCls(menus[index_], 'selected');
  213.           // 切换FrameGroup中的当前Frame
  214.           api.setFrameGroupIndex({
  215.               name: 'mainFrameGroup',
  216.               index: index_,
  217.               scroll: true
  218.           });
  219.       }
  220.  
  221.       function fnOpenPersonalCenterWin() {
  222.         api.openWin({
  223.             name: 'login',
  224.             url: './login.html'
  225.         });
  226.       }
  227.  
  228.       // 打开城市选择Frame
  229.       function fnOpenCitySelectorFrame() {
  230.           var header = $api.byId('header');
  231.           var headerH = $api.offset(header).h;
  232.           // 根据UI架构设计（ui-architecture.xmind），打开城市选择Frame
  233.           api.openFrame({
  234.               name: 'cityselectorFrame',
  235.               url: './cityselector_frame.html',
  236.               rect: {
  237.                   x:  0,
  238.                   y:  headerH,
  239.                   w: 'auto', // 自动填充所在Window的宽度
  240.                   h: 'auto' // 自动填充所在Window的高度
  241.               },
  242.             bgColor:'rgba(0,0,0,0.8)'
  243.           });
  244.           $api.addCls($api.byId("arrow"), 'active');
  245.       }
  246.  
  247.       function fnOpenPersonalCenterWin() {
  248.           // 从缓存中获取用户信息
  249.           var userInfo = $api.getStorage('userInfo');
  250.  
  251.           // 判断当前用户是否登录了
  252.           if (userInfo ) {
  253.               // 登录成功，打开个人中心Window
  254.               api.openWin({
  255.                   name: 'personalcenter',
  256.                   url: './personalcenter.html',
  257.                   pageParam:{
  258.                     userId:userInfo.userId
  259.                   }
  260.               });
  261.           } else {
  262.               // 没有登录，打开登录Window
  263.               api.openWin({
  264.                   name: 'login',
  265.                   url: './login.html'
  266.               });
  267.           }
  268.       }
  269.  
  270.   </script>
  271.   </html>

main.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>登录Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     body {
  12.         text-align: center;
  13.     }
  14.  
  15.     .row {
  16.         width: auto;
  17.         height: 70px;
  18.         box-sizing: border-box;
  19.         margin-left: 32px;
  20.         margin-right: 32px;
  21.         padding-top: 40px;
  22.         border-bottom: 1px solid #888;
  23.     }
  24.  
  25.     .input {
  26.         width: 100%;
  27.         height: 20px;
  28.         border: none;
  29.         outline: none;
  30.         font-size: 16px;
  31.         line-height: 20px;
  32.     }
  33.  
  34.     .btn {
  35.         width: auto;
  36.         height: 50px;
  37.         margin-left: 32px;
  38.         margin-right: 32px;
  39.         margin-top: 32px;
  40.         background-color: #ffaf45;
  41.         line-height: 50px;
  42.         color: #fff;
  43.         font-size: 24px;
  44.         text-align: center;
  45.         border-radius: 8px;
  46.     }
  47.  
  48.     .btn-third-party {
  49.         display: inline-block;
  50.         width: auto;
  51.         height: 50px;
  52.         box-sizing: border-box;
  53.         margin-top: 32px;
  54.         margin-left: auto;
  55.         margin-right: auto;
  56.         padding: 8px 8px 8px 36px;
  57.         font-size: 20px;
  58.         color: #888;
  59.         line-height: 32px;
  60.         text-align: left;
  61.         border: 1px solid #aaa;
  62.         background-image: url(../image/share_friend.png);
  63.         background-repeat: no-repeat;
  64.         background-size: auto 20px;
  65.         background-position: 8px center;
  66.         border-radius: 8px;
  67.     }
  68.  
  69.     .highlight {
  70.         opacity: 0.7;
  71.     }
  72.     </style>
  73. </head>
  74.  
  75. <body>
  76.     <div class="row">
  77.         <input id="username" class="input" type="text" placeholder="用户名">
  78.     </div>
  79.     <div class="row">
  80.         <input id="password" class="input" type="password" placeholder="密码">
  81.     </div>
  82.     <div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
  83.     <div class="btn-third-party">使用微信登录</div>
  84. </body>
  85. <script type="text/javascript" src="../script/api.js"></script>
  86. <script type="text/javascript" src="../script/APICloud-rest.js"></script>
  87. <script type="text/javascript" src="../script/SHA1.js"></script>
  88. <script type="text/javascript">
  89. apiready = function() {
  90.  
  91. };
  92.  
  93.     function fnLogin(){
  94.       var username = $api.byId("username");
  95.       var password = $api.byId("password");
  96.       var vusername = $api.val(username);
  97.       var vpassword = $api.val(password);
  98.       var now = Date.now();
  99.       var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
  100.  
  101.       api.ajax({
  102.           url: 'https://d.apicloud.com/mcm/api/user/login',
  103.           method: 'post',
  104.           headers: {
  105.               "X-APICloud-AppId": "A6099255481782",
  106.               "X-APICloud-AppKey":appKey,
  107.           },
  108.           data: {
  109.               values: {
  110.                   username:vusername,
  111.                   password:vpassword
  112.               }
  113.           }},
  114.           function (ret,err){
  115.             if(ret&&ret.userId){
  116.               $api.setStorage('userInfo', ret);
  117.               api.closeToWin({
  118.                   name: 'main'
  119.               });
  120.             }else{
  121.               alert("登陆失败！");
  122.             }
  123.           }
  124.       );
  125.     }
  126.  
  127. </script>
  128.  
  129. </html>

login_frame.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>设置Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     .option {
  12.         position: relative;
  13.         box-sizing: border-box;
  14.         height: 61px;
  15.         border-bottom: 1px solid #ddd;
  16.     }
  17.  
  18.     .option .title {
  19.         position: relative;
  20.         width: 100%;
  21.         height: 60px;
  22.         box-sizing: border-box;
  23.         padding-left: 16px;
  24.         line-height: 60px;
  25.         font-size: 14px;
  26.         color: #444;
  27.         text-align: left;
  28.     }
  29.  
  30.     .option .arrow-panel {
  31.         position: absolute;
  32.         top: 0;
  33.         right: 12px;
  34.         width: auto;
  35.         height: 60px;
  36.         background-image: url(../image/arrow_right.png);
  37.         background-repeat: no-repeat;
  38.         background-size: 16px 24px;
  39.         background-position: right center;
  40.     }
  41.  
  42.     .option .arrow-panel .text {
  43.         box-sizing: border-box;
  44.         width: auto;
  45.         height: 60px;
  46.         padding-right: 20px;
  47.         line-height: 60px;
  48.         font-size: 13px;
  49.         color: #888;
  50.         text-align: left;
  51.     }
  52.  
  53.     .button {
  54.         width: auto;
  55.         height: 50px;
  56.         margin-left: 32px;
  57.         margin-right: 32px;
  58.         margin-top: 16px;
  59.         background-color: #A9A9A9;
  60.         line-height: 50px;
  61.         color: #fff;
  62.         font-size: 20px;
  63.         text-align: center;
  64.         border-radius: 8px;
  65.     }
  66.  
  67.     .highlight {
  68.         opacity: 0.7;
  69.     }
  70.     </style>
  71. </head>
  72.  
  73. <body>
  74.     <section>
  75.         <div class="option" tapmode onclick="fnClearCache();">
  76.             <div class="title">清除缓存</div>
  77.             <div class="arrow-panel">
  78.                 <div id="cacheSize" class="text"></div>
  79.             </div>
  80.         </div>
  81.         <div class="option" tapmode onclick="fnOpenAboutWin();">
  82.             <div class="title">关于</div>
  83.             <div class="arrow-panel">
  84.                 <div class="text"></div>
  85.             </div>
  86.         </div>
  87.         <div class="button" tapmode onclick="fnLogout();">退出登录</div>
  88.     </section>
  89. </body>
  90. <script type="text/javascript" src="../script/api.js"></script>
  91. <script type="text/javascript">
  92. apiready = function() {
  93.     getCacheSize();
  94. };
  95.  
  96. function getCacheSize() {
  97.     api.getCacheSize(function(ret) {
  98.         var size = ret.size;
  99.         var cacheSize = $api.byId('cacheSize');
  100.         size = parseInt((size / 1024 / 1024) * 100) / 100;
  101.         cacheSize.innerHTML = size + ' M';
  102.     });
  103. }
  104.  
  105. function fnClearCache() {
  106.     api.clearCache(function() {
  107.         api.toast({
  108.             msg: '缓存清除完毕'
  109.         });
  110.         setTimeout(function() {
  111.             getCacheSize();
  112.         }, 300);
  113.     });
  114. }
  115.  
  116. function fnOpenAboutWin () {
  117.     api.openWin({
  118.         name: 'about',
  119.         url: './about.html'
  120.     });
  121. }
  122.  
  123. function fnLogout() {
  124.     api.confirm({
  125.         title: '提示',
  126.         msg: '是否退出登录',
  127.         buttons: ['确定', '取消']
  128.     }, function(ret, err) {
  129.         if (ret) {
  130.             if (1 == ret.buttonIndex) {
  131.                 $api.rmStorage('userInfo');
  132.                 api.closeToWin({
  133.                     name: 'main'
  134.                 });
  135.             }
  136.         }
  137.     });
  138. }
  139. </script>
  140.  
  141. </html>

setting_frame.html

实现清除缓存

　　通在setting_frame.html的apiready函数中得到缓存大小，并为“清除缓存”按钮添加点击事件

　　通过api.geyCacheSize()获取缓存大小

　　通过cnClearCache()函数清除缓存

  1. apiready = function() {
  2.     getCacheSize();
  3. };
  4.  
  5. function getCacheSize() {
  6.     api.getCacheSize(function(ret) {
  7.         var size = ret.size;
  8.         var cacheSize = $api.byId('cacheSize');
  9.         size = parseInt((size / 1024 / 1024) * 100) / 100;
  10.         cacheSize.innerHTML = size + ' M';
  11.     });
  12. }
  13.  
  14. function fnClearCache() {
  15.     api.clearCache(function() {
  16.         api.toast({
  17.             msg: '缓存清除完毕'
  18.         });
  19.         setTimeout(function() {
  20.             getCacheSize();
  21.         }, 300);
  22.     });
  23. }
  24.  
  25. function fnOpenAboutWin () {
  26.     api.openWin({
  27.         name: 'about',
  28.         url: './about.html'
  29.     });
  30. }
  31.  
  32. function fnLogout() {
  33.     api.confirm({
  34.         title: '提示',
  35.         msg: '是否退出登录',
  36.         buttons: ['确定', '取消']
  37.     }, function(ret, err) {
  38.         if (ret) {
  39.             if (1 == ret.buttonIndex) {
  40.                 $api.rmStorage('userInfo');
  41.                 api.closeToWin({
  42.                     name: 'main'
  43.                 });
  44.             }
  45.         }
  46.     });
  47. }

　　这里通过api.clearCache()清除缓存，之后弹出提示并在一定事件后重新获取缓存大小

　　可以看到，清除缓存后，缓存由原来1.75边了0.57，不过清除了缓存后首页图片出现了丢失图片现象

　　

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  8.     <title>设置Frame</title>
  9.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  10.     <style>
  11.     .option {
  12.         position: relative;
  13.         box-sizing: border-box;
  14.         height: 61px;
  15.         border-bottom: 1px solid #ddd;
  16.     }
  17.  
  18.     .option .title {
  19.         position: relative;
  20.         width: 100%;
  21.         height: 60px;
  22.         box-sizing: border-box;
  23.         padding-left: 16px;
  24.         line-height: 60px;
  25.         font-size: 14px;
  26.         color: #444;
  27.         text-align: left;
  28.     }
  29.  
  30.     .option .arrow-panel {
  31.         position: absolute;
  32.         top: 0;
  33.         right: 12px;
  34.         width: auto;
  35.         height: 60px;
  36.         background-image: url(../image/arrow_right.png);
  37.         background-repeat: no-repeat;
  38.         background-size: 16px 24px;
  39.         background-position: right center;
  40.     }
  41.  
  42.     .option .arrow-panel .text {
  43.         box-sizing: border-box;
  44.         width: auto;
  45.         height: 60px;
  46.         padding-right: 20px;
  47.         line-height: 60px;
  48.         font-size: 13px;
  49.         color: #888;
  50.         text-align: left;
  51.     }
  52.  
  53.     .button {
  54.         width: auto;
  55.         height: 50px;
  56.         margin-left: 32px;
  57.         margin-right: 32px;
  58.         margin-top: 16px;
  59.         background-color: #A9A9A9;
  60.         line-height: 50px;
  61.         color: #fff;
  62.         font-size: 20px;
  63.         text-align: center;
  64.         border-radius: 8px;
  65.     }
  66.  
  67.     .highlight {
  68.         opacity: 0.7;
  69.     }
  70.     </style>
  71. </head>
  72.  
  73. <body>
  74.     <section>
  75.         <div class="option" tapmode onclick="fnClearCache();">
  76.             <div class="title">清除缓存</div>
  77.             <div class="arrow-panel">
  78.                 <div id="cacheSize" class="text"></div>
  79.             </div>
  80.         </div>
  81.         <div class="option" tapmode onclick="fnOpenAboutWin();">
  82.             <div class="title">关于</div>
  83.             <div class="arrow-panel">
  84.                 <div class="text"></div>
  85.             </div>
  86.         </div>
  87.         <div class="button" tapmode onclick="fnLogout();">退出登录</div>
  88.     </section>
  89. </body>
  90. <script type="text/javascript" src="../script/api.js"></script>
  91. <script type="text/javascript">
  92. apiready = function() {
  93.     getCacheSize();
  94. };
  95.  
  96. function getCacheSize() {
  97.     api.getCacheSize(function(ret) {
  98.         var size = ret.size;
  99.         var cacheSize = $api.byId('cacheSize');
  100.         size = parseInt((size / 1024 / 1024) * 100) / 100;
  101.         cacheSize.innerHTML = size + ' M';
  102.     });
  103. }
  104.  
  105. function fnClearCache() {
  106.     api.clearCache(function() {
  107.         api.toast({
  108.             msg: '缓存清除完毕'
  109.         });
  110.         setTimeout(function() {
  111.             getCacheSize();
  112.         }, 300);
  113.     });
  114. }
  115.  
  116. function fnOpenAboutWin () {
  117.     api.openWin({
  118.         name: 'about',
  119.         url: './about.html'
  120.     });
  121. }
  122.  
  123. function fnLogout() {
  124.     api.confirm({
  125.         title: '提示',
  126.         msg: '是否退出登录',
  127.         buttons: ['确定', '取消']
  128.     }, function(ret, err) {
  129.         if (ret) {
  130.             if (1 == ret.buttonIndex) {
  131.                 $api.rmStorage('userInfo');
  132.                 api.closeToWin({
  133.                     name: 'main'
  134.                 });
  135.             }
  136.         }
  137.     });
  138. }
  139. </script>
  140.  
  141. </html>

setting_frame.html

Apicloud_(项目)网上书城02_后端数据获取的更多相关文章

  1. Apicloud_(项目)网上书城03_拓展模块实现

    Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 实现商品详情页 ...

  2. Apicloud_(项目)网上书城01_前端搭建

    [本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...

  3. 大项目之网上书城（九）——订单Demo

    目录 大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderite ...

  4. 大项目之网上书城（八）——数据库大改&添加图书

    目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...

  5. 大项目之网上书城（七）——书页面以及加入购物车Servlet

    目录 大项目之网上书城(七)--书页面以及加入购物车Servlet 主要改动 1.shu.jsp 代码 效果图 2.shu.js 代码 3.index.jsp 代码 效果图 4.FindBookByC ...

  6. 大项目之网上书城（六）——个人页面和书页面Demo

    目录 大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码 效果图 user.js 代码 3.shu.jsp 代码 效果图 4.其他小改动 LoginServlet ...

  7. 大项目之网上书城（五）——主页（End）

    目录 大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码 效果图 2.head.jsp的小改动 代码 3.login.jsp ###代码 效果图 4.login.js ...

  8. WEB 小案例 -- 网上书城（一）

    距离上次写博客有两周了吧,最多的原因就是自己期末考试了,上课没听就只能在期末狠狠的复习了,毕竟已经挂科了.当然还是因为自己懒吧!!!废话不多说开始我们今天的正题,网上书城! 一. 新建数据表(MySQ ...

  9. 前后端分离，如何在前端项目中动态插入后端API基地址？（in docker）

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

随机推荐

  1. GDOI2018游记

    前言 不知怎的,本蒟蒻居然拿到了GDOI参赛名额 于是乎,我稀里糊涂地跟着诸位大佬屁颠屁颠地来到了阔别已久的中山一中 腐败difficult and interesting的GDOI比赛就这样开始了. ...

  2. FFmpeg4.0笔记：封装ffmpeg的视频帧转换功能类CSws

    Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff CSws.h /************************* ...

  3. HTML5-placeholder属性

    HTML 5<input> placeholder属性 placeholder属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. ...

  4. NGINX工作原理(2)

    Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此location中所配置的各个指 ...

  5. 前端框架：Angular React 和 Vue的比较

    前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...

  6. Java爬取并下载酷狗音乐

    本文方法及代码仅供学习,仅供学习. 案例: 下载酷狗TOP500歌曲,代码用到的代码库包含:Jsoup.HttpClient.fastJson等. 正文: 1.分析是否可以获取到TOP500歌单 打开 ...

  7. Halide安装指南release版本

    Halide安装指南 本版本针对Halide release版本 by jourluohua 使用的是Ubuntu 16.04 64位系统默认Gcc 4.6 由于halide中需要C++ 11中的特性 ...

  8. 多线程编程-- part 4 线程间的通信

    线程间的相互作用 线程之间需要一些协调通信,来共同完成一件任务. Object类相关的方法:notify(),notifyAll(),wait().会被所有的类继承,这些方法是final不能被重写.他 ...

  9. 2019-2020-1 20199319《Linux内核原理与分析》第八周作业

    可执行程序工作原理 ELF目标文件格式 1.目标文件(ABI,应用程序二进制接口):编译器生成的文件. 2.目标文件的格式:out格式.COFF格式.PE(windows)格式.ELF(Linux)格 ...

  10. 跟着动画来学习TCP三次握手和四次挥手

    TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 点我查看如何应对面试中的三次握手.四次挥手 本篇尝试使用动画来对 ...