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. 概率dp HDU 3853

    H - LOOPS Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ci ...

  2. Visual Studio2008 和2010 执行程序出现的黑框马上消失解决方法

    1 在程序最后加         system("PAUSE");  要注意包括头文件#include"stdlib.h"   //system须要调用这个   ...

  3. 使用LruCache和DiskLruCache来下载图片

    LruCache是一个非常好用的图片缓存工具: 主要做法是:滑动图片时将图片的bitmap缓存在LruCache<String, Bitmap>中,退出程序后将图片缓存进文件中.採用Dis ...

  4. netflix feign概述

    1.什么是feign?feign的作用是什么? Feign is a java to http client binder inspired by Retrofit, JAXRS-2.0, and W ...

  5. 线性同余同余方程组解法（excrt）

    [问题描述] 求关于 x 的同余方程组 x%a 1 =b 1  a1=b1 x%a 2 =b 2  a2=b2 x%a 3 =b 3  a3=b3 x%a 4 =b 4  a4=b4 的大于等于 0 ...

  6. Network Stack‎ : CookieMonster

    CookieMonster   The CookieMonster is the class in Chromium which handles in-browser storage, managem ...

  7. 在Ubuntu14.04中配置mysql远程连接教程

    上一篇文章,小编带大家学会了在Ubuntu14.04中安装MySQL,没有来得及上课的小伙伴们可以戳这篇文章:如何在Ubuntu14.04中安装mysql,今天给大家分享一下,如何简单的配置MySQL ...

  8. 【js基础】判断是否是合法邮箱地址（正则表达式的应用）

    2019-01-21 09:11:21 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  9. Android Studio使用Mob来获取手机验证码加上倒计时

    再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...

  10. Spring Cloud学习笔记【二】Eureka 服务提供者/服务消费者（ribbon）

    Ribbon 是 Netflix 发布的开源项目,主要功能是为 REST 客户端实现负载均衡.它主要包括六个组件: ServerList,负载均衡使用的服务器列表.这个列表会缓存在负载均衡器中,并定期 ...