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. WebKit载入流程 - 概述

    之前写了几篇载入流程的说明,是从下向上看,有点仅仅见树木不见森林的感觉.经过近期一段时间的学习,有了能加以概括抽象的方法. WebKit载入流程和页面组成是直接相关的,页面就是WebKit要载入的对象 ...

  2. android数据储存之存储方式

    能够将数据储存在内置或可移动存储,数据库,网络.sharedpreference. android能够使用Content provider来使你的私有数据暴漏给其它应用程序. 一.sharedpref ...

  3. ASIHTTPRequest导入出错-libxml出错， i386 "_deflate"

    导入需要 ASIHTTPRequest 依赖于以下5个框架或库: CFNetwork, SystemConfiguration,MobileCoreServices, CoreGraphics 和 l ...

  4. Codeforces 11B Jumping Jack(数学)

    B. Jumping Jack time limit per test 1 second memory limit per test 64 megabytes input standard input ...

  5. vim 插件之 surround.vim

    surround.vim-这个插件主要是用来插入一些特殊符号的(成对出现) 下载地址 http://www.vim.org/scripts/script.php?script_id=1697 http ...

  6. 无法往SQL Server Management Studio拖脚本

    解决方法:不要用Administrator权限打开sql server

  7. 125.C++输入小结

    #include <iostream> #include <iomanip> #include <cstring> #include <cstdlib> ...

  8. Android控件-ViewPager（仿微信引导界面）

    什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v ...

  9. 远程带参数POST访问接口，返回数据

    1. string token = GetRequest.GetString("token"); int customer_id = GetRequest.GetInt(" ...

  10. MySql免安装版绿化版安装配置，附MySQL服务无法启动解决方案

    整理于:https://www.cnblogs.com/cenwei/p/6249856.html      我下载的MySQL版本是:mysql-5.6.15-winx64 一.解压文件 下载好My ...