Dcloud课程8 开心一刻应用如何实现
2024-08-30 22:19:32
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>
最新文章
- input=text数字问题
- 七、Android学习第六天——SQLite与文件下载(转)
- React问题总结与归纳
- JQuery的Ajax跨域请求的解决方案
- [Eclipse] Eclipse is running in a JRE, but a JDK is required
- linux下搭建svn版本控制软件
- pythonweb自动化测试
- 关于smali插桩
- 杭州电 3711 Binary Number
- Spring Cloud:多环境配置、eureka 安全认证、容器宿主机IP注册
- springBoot(4)---热部署,配置文件使用
- Thread类(线程)
- Web组件流畅拖动效果
- Eclipse中项目Project Explorer视图与Package Explorer视图
- WiFi基本知识【转】
- Spring Boot 实现RESTful webservice服务端示例
- EMQ笔记
- js 创建对象的几种方法
- odoo开发笔记 -- 异常信息处理汇总
- Json日期格式 转化为 YYYY-MM-DD-hh-mm-ss