Android云端APP
使用HbuilderX打包APP
首先创建一个
5+APP+使用MUI项目
<!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" />
<style type="text/css">
.labels {
position: absolute;
top: 240px;
} .labels p {
font-size: 22px;
color: #FAFAFA;
} #details strong {
font-size: 22px;
color: #FAFAFA;
}
</style> </head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<div id="PetType"></div>
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">9°日报</h1>
</header> <!-- 主页面内容容器 -->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop" id="details"> </div>
<div class="mui-slider-indicator" id="dian"> </div>
</div><br /> <p class='title' style='font-size: 20px;'> 今日热闻</p>
<div id="lists"> </div>
</div> <div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
//初始化
mui.init();
//开启滑动
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005
}) var list;
//请求得到最新数据
mui.ajax('http://news-at.zhihu.com/api/4/news/latest', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒
crossDomain: true,
success: function(data) {
//第一个轮播显示
var img = "<div class='mui-slider-item mui-slider-item-duplicate'>";
img += "<a href='" + data.top_stories[0].id + "'>";
img += "<img width='400' height='300' title='" + data.top_stories[0].title + "'";
img += "src='" + data.top_stories[0].image + "'>";
img += "</a><div class='labels' ><strong>" + data.top_stories[0].title + "</strong></div> ";
img += "</div>";
//轮播标点
var str = '<div class="mui-indicator mui-active"></div>'; //得到TOP轮播数据
for (var i = 0; i < data.top_stories.length; i++) {
img += "<div class='mui-slider-item'>";
img += "<a href='" + data.top_stories[i].id + "'>";
img += "<img width='400' height='300' title='" + data.top_stories[i].title + "' ";
img += "src='" + data.top_stories[i].image + "' >";
img += "</a><div class='labels'><strong>" + data.top_stories[i].title + "</strong></div>";
img += "</div>";
if (i < data.top_stories.length - 1) {
str += '<div class="mui-indicator"></div>';
}
}
document.getElementById("dian").innerHTML = str;
// img += "<div class='mui-slider-item mui-slider-item-duplicate'>";
img += "<a href='" + data.top_stories[0].id + "'>";
img += "<img width='400' height='300' title='" + data.top_stories[0].title + "'";
img += "src='" + data.top_stories[0].image + "'>";
img += " </a><div class='labels'><strong>" + data.top_stories[0].title + "</strong></div>";
document.getElementById("details").innerHTML = img;
var gallery = mui('.mui-slider');
gallery.slider({
interval: 2000
}); list = " ";
list += "<div class='mui-card' style='margin-bottom: 5px;'>";
list += "<ul class='mui-table-view'>";
for (var i = 0; i < data.stories.length; i++) {
list += "<li class='mui-table-view-cell mui-media'>";
list += "<a href='" + data.stories[i].id + "'>";
list += "<img class='mui-media-object mui-pull-left' src='" + data.stories[i].images + "'>";
list += "<div class='mui-media-body'>";
list += "<p class='mui-ellipsis'>" + data.stories[i].title + "</p>";
list += "</div>";
list += "</a><li>";
}
//昨天热闻
old();
},
error: function(xhr, type, errorThrown) {
console.log(xhr + type + perrorThrown);
},
}); function old() {
mui.ajax('http://news.at.zhihu.com/api/4/news/before/20181115', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒
crossDomain: true,
success: function(data) {
list += "<p class='title' style='font-size: 20px;'> 昨日热闻</p>";
for (var i = 0; i < data.stories.length; i++) {
list += "<li class='mui-table-view-cell mui-media'>";
list += "<a href='" + data.stories[i].id + "'>";
list += "<img class='mui-media-object mui-pull-left' src='" + data.stories[i].images + "'>";
list += "<div class='mui-media-body'>";
list += "<p class='mui-ellipsis'>" + data.stories[i].title + "</p>";
list += "</div>";
list += "</a><li>"; }
list += "</ul>";
list += "</div> ";
document.getElementById("lists").innerHTML = list; //绑定图片点击事件
mui('#details').on('tap', '.mui-slider-item', function() {
var a = this.getElementsByTagName('a')[0];
var gg = a.getAttribute('href');
mui.plusReady(function() {
mui.openWindow({
url: 'detailsInfo.html',
id: 'new.html',
extras: {
myname: gg,
}
});
});
});
//绑定新闻列表点击事件
mui('#lists').on('tap', '.mui-table-view-cell', function() {
var a = this.getElementsByTagName('a')[0];
var gg = a.getAttribute('href');
mui.plusReady(function() {
mui.openWindow({
url: 'detailsInfo.html',
id: 'new.html',
extras: {
myname: gg,
}
});
});
}); },
error: function(xhr, type, errorThrown) {
console.log(xhr + type + perrorThrown);
},
});
}
</script>
</body>
</html>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head> <body>
<!-- 主界面移动、菜单不动 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 --> </div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 --> <div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll" id="details">
<!-- 主界面具体展示内容 -->
</div>
<div class="mui-off-canvas-backdrop"></div>
</div> </div>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005
}) var id;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
id = self.myname;
mui.ajax("http://news-at.zhihu.com/api/4/news/" + id + "", {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒
crossDomain: true,
success: function(data) {
var link = document.createElement("link");
link.rel = "StyleSheet";
link.type = "text/css";
link.href = data.css;
document.getElementsByTagName("head")[0].appendChild(link);
var str = data.body;
document.getElementById("details").innerHTML = str;
var div = document.getElementsByClassName("img-place-holder")[0];
div.style.background = "url('" + data.image + " ') no-repeat 100% center"; },
error: function(xhr, type, errorThrown) {
console.log(xhr + type + perrorThrown);
},
});
});
</script>
</body> </html>
最好使用真机测试
此文件可设置图标，加载时显示的图片
APP名称
然后选择发行-->原生APP云端打包
然后就OK了 然后通过链接下载安装。
Android云端APP的更多相关文章
- Bmob实现android云端存储
代码地址如下:http://www.demodashi.com/demo/12547.html 前言 一直很困惑,android到底能不能将本地数据传到一个公共的云端,让云端实现数据库功能,这样的话, ...
- Cordova 打包 Android release app 过程详解
Cordova 打包 Android release app 过程详解 时间 -- :: SegmentFault 原文 https://segmentfault.com/a/119000000517 ...
- 【Android端 APP GPU过度绘制】GPU过度绘制及优化
一.Android端的卡顿 Android端APP在具体使用的过程中容易出现卡顿的情况,比如查看页面时出现一顿一顿的感受,切换tab之后响应很慢,或者具体滑动操作的时候也很慢. 二.卡顿的原因 卡顿的 ...
- 分享我开发的网络电话Android手机APP正式版，图文详解及下载
分享我开发的网络电话Android手机APP正式版,图文详解及下载 分享我开发的网络电话Android手机APP正式版 实时语音通讯,可广域网实时通讯,音质清晰流畅! 安装之后的运行效果: 第一次安装 ...
- Android开发App工程结构搭建
本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构. 关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角 ...
- Android 启动APP黑屏解决方案
#Android 启动APP黑屏解决方案# 1.自定义Theme //1.设置背景图Theme <style name="Theme.AppStartLoad" parent ...
- Android手机app启动的时候第一个Activity必须是MainActivity吗
原文:Android手机app启动的时候第一个Activity必须是MainActivity吗 Android手机APP启动的第一个Activity是可以自己设置的,不是必须的MainActivity ...
- Android原生APP内分享
Android原生APP内分享,可实现数据分享以及assets文件夹分享及私有文件分享 项目地址:https://github.com/json-pu/AndroidAppShare.git
- Android替换APP字体 — Typeface
Android替换APP字体 — Typeface APP字体的思路一般都会想到自定义控件(TextView.EditView),但是项目中会有很多种控件,就算用也会承担一些风险和资源的消耗,主要是这 ...
随机推荐
- Prometheus（1） 概念
Prometheus Prometheus是一套开源的监控&报警&时间序列数据库的组合.对我来说,它跟 zabbix 最大的区别就是它没有模板,所有的告警规则都得自己写... 它有一套 ...
- java与JSON
XML 格式数据极其的冗长.因为每个离散的数据片段需要大量的 XML 结构,所有有效 的数据的比例非常低.XML 语法还有轻微的模糊.还有,解析 XML 是非常占程序员的精力的.你需要提前了解详细的结 ...
- iotop命令详解
iotop是top和iostat程序的混合体,能够显示系统中所有运行进程并将进程根据I/O统计信息排序. 这个软件使用了Linux内核的一些新特性,所以需要2.6.20或者更新的内核. 一般默认情况下 ...
- 【HDU5952】Counting Cliques
题目大意:给定一个\(N\)个点,\(M\)条边的无向图,求图中有多少个大小为\(S\)的团.\(N \le 100,deg(i)\le 20,i\in [1,n]\). 题解: 考虑搜索. 需要确定 ...
- k8s部署dashboard
1.首先去github上找到kubernetes 2.然后找到get started 3.复制yaml文件地址,并wget到服务器上并部署即可 PS:本文把自己部署的yaml文件贴出来:recomme ...
- 理解SqlMapConfig.xml文件
SqlMapConfig.xml mybatis的全局配置文件SqlMapConfig.xml,配置内容如下: properties(属性) settings(全局配置参数) typeAliases( ...
- 【bzoj2141】排队 [国家集训队2011]排队（树套树）
题目描述 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和. 红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的身高有所区别 ...
- 02 CSS和DIV对界面优化
01 网站首页的优化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- O(1)快速乘与O(log)快速乘
//O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){ x=x%MOD,y=y%MOD; return ((x*y-(LL)(((long d ...
- 数论之同余性质 线性同余方程&拔山盖世BSGS&中国剩余定理
先记录一下一些概念和定理 同余:给定整数a,b,c,若用c不停的去除a和b最终所得余数一样,则称a和b对模c同余,记做a≡b (mod c),同余满足自反性,对称性,传递性 定理1: 若a≡b (mo ...