Dcloud课程8 开心一刻应用如何实现

Dcloud课程8 开心一刻应用如何实现

一、总结

一句话总结：app就是远程调用接口获得数据，我们在后台要做的，就是写一个个让页面获得接口的数据。这里用的是公共笑话接口。

1、ajax返回给页面的html代码可以在哪些地方写？

a、php中，直接写好返回给页面

b、在页面的ajax接收到后台数据之后，在页面js的ajax中拼装

14               mui.ajax('http://api.1-blog.com/biz/bizserver/xiaohua/list.do?size=1&page='+Math.floor(Math.random()*1000),{
15                 data:{
16
17                 },
18                 dataType:'json',//服务器返回json格式数据
19                 type:'post',//HTTP请求类型
20                 timeout:10000,//超时时间设置为10秒；
21                 success:function(data){
22                     //服务器返回响应，根据响应结果，分析是否登录成功；
23                     if(data.status==000000){
24                         str+='<p>'+data.detail[0].content+'</p>';
25                         if(data.detail[0].picUrl){
26                             str+='<img src="'+data.detail[0].picUrl+'">';
27                         }
28
29                         main.innerHTML=str;
30                     }
31                 },
32                 error:function(xhr,type,errorThrown){
33                     //异常处理；
34                     console.log(type);
35                 }
36             });

2、dcloud写的app项目，为什么在电脑上面用浏览器打开，有些功能不能正常显示（比如js中的页面跳转）？

mui.plusReady()中的js实现页面跳转，在电脑上浏览器的时候是打不开的，但是在手机上面就可以，真机，因为本来就是为手机服务的

3、这个dcloud中可以用比如ueditor.js那些js么？

可以的，肯定可以啊，感觉做的app像是一个浏览器，在那个特定的浏览器里面运行这些网页

二、开心一刻应用如何实现

1、截图

 

2、代码

index.html

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     <title></title>
     <script src="js/mui.min.js"></script>
     <link href="css/mui.min.css" rel="stylesheet"/>
     <script type="text/javascript" charset="utf-8">
           mui.init();
         mui.plusReady(function(){
             xiaohua=document.getElementById('xiaohua');
             xiaohua.addEventListener('tap',function(){
                 mui.openWindow({
                     url:'info.html',
                     id:'info',
                 })
             })
         });
     </script>
 </head>
 <body>
     <header class="mui-bar mui-bar-nav">
         <h1 class="mui-title">首页</h1>
     </header>
     <div class="mui-content">
         <ul class="mui-table-view">
             <li class="mui-table-view-cell mui-media">
                 <a href="javascript:;" id="xiaohua">
                     <img class="mui-media-object mui-pull-right" src="img/1.jpg">
                     <div class="mui-media-body">
                         笑话
                         <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                     </div>
                 </a>
             </li>
             <li class="mui-table-view-cell mui-media">
                 <a href="info.html">
                     <img class="mui-media-object mui-pull-right" src="img/2.jpg">
                     <div class="mui-media-body">
                         木屋
                         <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                     </div>
                 </a>
             </li>
             <li class="mui-table-view-cell mui-media">
                 <a href="javascript:;">
                     <img class="mui-media-object mui-pull-right" src="img/3.jpg">
                     <div class="mui-media-body">
                         CBD
                         <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                     </div>
                 </a>
             </li>
         </ul>

     </div>
     <nav class="mui-bar mui-bar-tab">
         <a class="mui-tab-item mui-active">
             <span class="mui-icon mui-icon-home"></span>
             <span class="mui-tab-label">首页</span>
         </a>
         <a class="mui-tab-item">
             <span class="mui-icon mui-icon-phone"></span>
             <span class="mui-tab-label">电话</span>
         </a>
         <a class="mui-tab-item">
             <span class="mui-icon mui-icon-email"></span>
             <span class="mui-tab-label">邮件</span>
         </a>
         <a class="mui-tab-item">
             <span class="mui-icon mui-icon-gear"></span>
             <span class="mui-tab-label">设置</span>
         </a>
     </nav>
 </body>
 </html>

info.html（笑话那个页面）

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     <title></title>
     <script src="js/mui.min.js"></script>
     <link href="css/mui.min.css" rel="stylesheet"/>
     <script type="text/javascript" charset="UTF-8">
           mui.init();
           mui.plusReady(function(){
               var str='';
               var main=document.getElementById('main');
               mui.ajax('http://api.1-blog.com/biz/bizserver/xiaohua/list.do?size=1&page='+Math.floor(Math.random()*1000),{
                 data:{

                 },
                 dataType:'json',//服务器返回json格式数据
                 type:'post',//HTTP请求类型
                 timeout:10000,//超时时间设置为10秒；
                 success:function(data){
                     //服务器返回响应，根据响应结果，分析是否登录成功；
                     if(data.status==000000){
                         str+='<p>'+data.detail[0].content+'</p>';
                         if(data.detail[0].picUrl){
                             str+='<img src="'+data.detail[0].picUrl+'">';
                         }

                         main.innerHTML=str;
                     }
                 },
                 error:function(xhr,type,errorThrown){
                     //异常处理；
                     console.log(type);
                 }
             });
           })
     </script>
 </head>
 <body>
     <header class="mui-bar mui-bar-nav">
         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
         <h1 class="mui-title">笑话</h1>
     </header>
 <div class="mui-content">
     <div id="main"></div>
 </div>
 <nav class="mui-bar mui-bar-tab">
     <a class="mui-tab-item mui-active">
         <span class="mui-icon mui-icon-home"></span>
         <span class="mui-tab-label">首页</span>
     </a>
     <a class="mui-tab-item">
         <span class="mui-icon mui-icon-phone"></span>
         <span class="mui-tab-label">电话</span>
     </a>
     <a class="mui-tab-item">
         <span class="mui-icon mui-icon-email"></span>
         <span class="mui-tab-label">邮件</span>
     </a>
     <a class="mui-tab-item">
         <span class="mui-icon mui-icon-gear"></span>
         <span class="mui-tab-label">设置</span>
     </a>
 </nav>
 </body>
 </html>