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. 【Henu ACM Round#20 C】 Eevee

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 处理处所有的字符串可能的样子. 存在map里面就好. [代码] #include <bits/stdc++.h> usi ...

  2. HDU 4406 GPA

    GPA Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 440664 ...

  3. 虚构造函数与prototype

    注意,构造函数不能是虚的,不然不会生效?(构造函数里面调用虚的函数,也不会生效). 而虚构造函数,指的是通过一个虚函数,来调用clone方法,生成一个新的实例.而这个clone里面,一般调用的是拷贝构 ...

  4. 隐马尔科夫模型(HMM)

    基本概念 1Markov Models 2Hidden Markov Models 3概率计算算法前向后向算法 1-3-1直接计算 1-3-2前向算法 1-3-3后向算法 4学习问题Baum-Welc ...

  5. 3.菜鸟教你一步一步开发 web service 之 axis 服务端创建

    转自:https://blog.csdn.net/shfqbluestone/article/details/37610601 第一步,新建一个工程,如图: 选 Java 写一个工程名,选择好工程路径 ...

  6. 2017.9.17校内noip模拟赛解题报告

    预计分数:100+60+60=220 实际分数:100+60+40=200 除了暴力什么都不会的我..... T1 2017.9.17巧克力棒(chocolate) 巧克力棒(chocolate)Ti ...

  7. 由安装两块网卡的linux系统中引起网络不通想到的

    由安装两块网卡的linux系统中引起网络不通想到的 一天,小王突然急匆匆的来找我,他说:"我在机子上刚装的redhat怎么老也ping不通服务器,我网卡的驱动都安装了,ping 自己的两块网 ...

  8. 威联通212P 在admin用户密码正确情况下仍然无法登录WEB页面解决办法

    *登录 telnet 执行以下语句: [~] # cp /etc/default_config/passwd /mnt/HDA_ROOT/.config/passwd[~] # cp /etc/def ...

  9. 【Linux下tar命令详解】

    tar命令用于建立.还原备份文件,它可以加入.解开备份文件内的文件. 参数 带有*号的为常用的参数 . -A 新增压缩文件到已存在的压缩包 . -c 建立新的压缩文件* . -d 记录文件的差别 . ...

  10. 利用"SQL"语句自动生成序号的两种方式

    1.首先,我们来介绍第一种方式: ◆查询的SQL语句如下: select row_number() over (order by name) as rowid, sysobjects.[name] f ...