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. 【DevExpress】GridControl添加按钮列并添加按钮事件

    在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

  2. java反射机制剖析（二）— Class Loader

    上一篇博客简要的提了一下java反射机制中涉及到的一些相关知识,那么ClassLoader就是当中之中的一个.本篇博客就具体的对ClassLoader做一个相对深入的了解. 作为了解须要知道的是.事实 ...

  3. Ubuntu下安装git工具

    环境:Ubuntu 9.10 git-1.8.2.3.tar.bz2 1.将安装包下载到所选文件夹下,如:/tmp 2.tar -xjf git-1.8.2.3.tar.bz2 3.cd git-1. ...

  4. 安卓ContentObserver模式获取短信用正则自己主动填充验证码

    近期做注冊的时候看到非常多app在手机接受到短信的时候直接填写验证码到界面省略用户自己主动输入,感觉这样确实蛮人性化的呵呵.于是自己也做了一个 步骤: 首先我使用了ContentObserver监听短 ...

  5. 1.windows（64位）下使用curl命令

    转自:https://www.cnblogs.com/xing901022/p/4652624.html Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景 ...

  6. javascript 提交弹窗

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 洛谷P2633 Count on a tree

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  8. 基于.NET平台常用的框架技术整理

    个人整理 部分收藏于:http://www.cnblogs.com/hgmyz/p/5313983.html 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线 ...

  9. word中添加Mathtype公式行间距改变问题

    转载链接:http://blog.sciencenet.cn/home.php?mod=space&uid=471807&do=blog&id=616838 最近碰到在word ...

  10. 处理某客户p570硬盘故障所思

    p570,硬盘故障. 机器有两个vg,rootvg和datavg,rootvg未做镜像,datavg已做镜像.系统errpt和HMC报硬盘有问题,查看错误代码可能是硬盘有坏道(坏块),在尽量保全用户数 ...