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>
 

Dcloud课程8 开心一刻应用如何实现的更多相关文章

  1. Dcloud课程9 天气小助手如何实现

    Dcloud课程9 天气小助手如何实现 一.总结 一句话总结:调用天气的接口,如果网上找不到好用的,而如果仅仅是测试,那就自己写一个简单的接口就可以了. 1.dcloud中的css样式怎么调? 和网页 ...

  2. Dcloud课程7 单例模式一般用在什么场景

    Dcloud课程7 单例模式一般用在什么场景 一.总结 一句话总结:连接数据库,这样就保证了和数据之间只有一个连接,从而能够不占用多余资源,这样就极大的减少了资源浪费,减少了mysql或者说服务器压力 ...

  3. Dcloud课程6 php脚本如何在Linux下定时更新数据

    Dcloud课程6 php脚本如何在Linux下定时更新数据 一.总结 一句话总结:linux下用crontab命令实现定时任务. 1.linux下执行php脚本用什么命令? 直接用php命令php ...

  4. Dcloud课程5 php如何实现文件缓存技术（静态数据缓存）

    Dcloud课程5 php如何实现文件缓存技术(静态数据缓存) 一.总结 一句话总结:保存在磁盘上的静态文件,用PHP生成数据到静态文件中.其实cookie和session使用的就是这样的技术,所以c ...

  5. Dcloud课程4 如何进行APP接口开发

    Dcloud课程4 如何进行APP接口开发 一.总结 一句话总结:通过json或者xml. 1.APP如何进行通信? 通过在地址上接参数指明传递的数据的类型.而数据传递的类型一般是XML和json. ...

  6. Dcloud课程3 什么是HBuilder和MUI

    Dcloud课程3  什么是HBuilder和MUI 一.总结 一句话总结:DCloud(数字天堂)推出一款支持HTML5的Web开发IDE.最大的特点是快.MUI是高性能App的框架,也是目前最接近 ...

  7. Dcloud课程2 什么是Dcloud

    Dcloud课程2  什么是Dcloud 一.总结 一句话总结:DCloud提供了一套快速开发应用的跨平台技术方案. 1.DCloud的产品架构? MUI+(H5+)+HBuilder 2.什么是MU ...

  8. Dcloud课程1 APP的架构有哪些

    Dcloud课程1 APP的架构有哪些 一.总结 一句话总结:B/S架构和C/S构架 1.APP的分类? 主流的四大APP系统:1.苹果ios系统版本,开发语言是Objective-C:2.微软Win ...

  9. swift - 开心一刻

    let array = ["one", "two", "three", "four", "five" ...

随机推荐

  1. Spring Cloud学习笔记【四】断路器Hystrix

    雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因 “服务提供者” 的不可用导致 “服务消 ...

  2. MethodFilterInterceptor（方法拦截器）配置excludeMethors

    由于该类有setExcludeMethods方法,因此在xml中可以配置一个excludeMethods参数 刚开始老是拦截不成功,tomcat显示这个参数没找到,后来终于找到错误:不应该在拦截器栈中 ...

  3. HDU 4714 Tree2cycle(树型DP)

    解题思路: 将一棵树变成一个环.假设一个结点的分叉数目大于等于2.则将它与父节点断开.而且断开子结点数目sum - 2条边,并再次连接sum-2个儿子形成一条直链然后这条游离链与还有一条游离链相连,共 ...

  4. Connect the Campus (Uva 10397 Prim || Kruskal + 并查集)

    题意:给出n个点的坐标,要把n个点连通,使得总距离最小,可是有m对点已经连接,输入m,和m组a和b,表示a和b两点已经连接. 思路:两种做法.(1)用prim算法时,输入a,b.令mp[a][b]=0 ...

  5. IIS 无法读取配置节&quot;system.web.extensions&quot;,由于它缺少节声明

    作者:jiankunking 出处:http://blog.csdn.net/jiankunking 今天在本地安装iis.搭建站点,应用程序的时候报错以下的错误: server错误 Internet ...

  6. vim插件之delimitMate.vim

    delimitMate.vim--这个插件主要是在插入模式下,用来自动补全括号.引号等 下载地址 http://www.vim.org/scripts/script.php?script_id=275 ...

  7. HTTP 各种特性应用（二）

    一.Cookie 通过 Set-Cookie 设置. 下次浏览器请求就会带上. 键值对,可以设置多个. Cookie 属性 max-age 和 expires 设置过期时间 Secure 只在 htt ...

  8. AnkhSvn介绍 插件

    转载:http://www.cnblogs.com/lyhabc/articles/2483011.html AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新 ...

  9. 紫书 习题 10-22 UVa 10479 (找规律）

    自己一直在纠结这个串的构造方法 而没有观察串本身的规律-- 2的63次方用 unsigned long long 然后可以发现串是递归构造的. 将串分成1,1,2,4,8,16, 然后会发现s串里面1 ...

  10. Volley简单学习使用五—— 源代码分析三

    一.Volley工作流程图: 二.Network     在NetworkDispatcher中须要处理的网络请求.由以下进行处理: NetworkResponse networkResponse = ...