\ 用apicloud创建webapp (原创)
用apicloud创建webapp (原创)
Web前端工程师
这位同学不懒，个性签名很长，躲在大树后面会被部落看见。新年快乐！！！
作者的热门手记
之前在慕课网学习了2048小游戏，虽然课程给出了适应响应式的方法，但终归他还是一个web程序。so ，就想研究一下怎么开发一个app版本的。经过跟Android工程师讨论后发现，如果单纯拿web 程序开发app 的话，APIcould 是个不错的工具，你只需要把你的 css，js 文件放入相应的文件下，然后再修改config.xml 里的属性，然后云端同步，进行云端编译即可。好了，废话不多说下面讲解一下APIcloud使用方法:
1、登录/ 进行注册，下载版本编辑器
2,、下载好后，打开studio 点击 文件 ---&新建 --& apicloud项目 输入项目名称 后 点击完成.如下图
3、项目建好后左侧会把整个项目的结构展示出来，如图：
4、把你项目中用到的文件结构复制粘贴到新建的 项目中即可，（当然你也可以自己创建文件夹导入相应的文件）例如css javascript 如图：
&meta name = "viewport" content = "width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/&
&meta name="apple-mobile-web-app-capable" content="yes" /&//兼容iphone
&link rel = "stylesheet" type = "text/css" href = "./css/2048.css"&
&script type="text/javascript" src = "script/jquery-1.9.0.min.js"&&/script&
&script type="text/javascript" src = "script/showadmination.js"&&/script&
&script type="text/javascript" src = "script/main2048.js"&&/script&
&script type="text/javascript" src = "script/support.js"&&/script&
//引用路径一定要写对，否则真机同步测试看不到效果.
5、当所有文件都按项目结构放置好后，这是你可以进行真机同步测试（建议先真机测试完后在云端同步） 选中项目 文件夹 点击右键 选择真机同步测试
PS 可以先下载一个模拟器。
6，同步测试会有各种问题，个人认为如果你的代码在web上应用响应式没问题而真机上有各种各样的问题的话，多半是配置原因，建议登录官网仔细研读开发指南，下面把我的配置代码粘出来分享一下：
&preference name="pageBounce" value="false"/&
&preference name="appBackground" value="./images/bg.jpg"/&
&preference name="windowBackground" value="./images/bg.jpg"/&
&preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/&
&preference name="hScrollBarEnabled" value="true"/&
&preference name="vScrollBarEnabled" value="false"/&
&preference name="autoLaunch" value="true"/&
&preference name="fullScreen" value="true"/&
&preference name="autoUpdate" value="true"/&
&preference name="smartUpdate" value="false"/&
&preference name="debug" value="false"/&
&preference name="iOS7StatusBarAppearance" value="true"/&
&permission name="readPhoneState"/&
&permission name="call"/&
&permission name="sms"/&
&permission name="camera"/&
&permission name="record"/&
&permission name="location"/&
&permission name="fileSystem"/&
&permission name="internet"/&
&permission name="bootCompleted"/&
&permission name="hardware"/&
&permission name="contact"/&
7、真机同步测试没有问题后，可以云端同步到服务器上。
8、云端编译流程如图：
（1）点击开发控制台--&选取项目
（2）点击云编译
（3）选择Android 测试版
再点击云编译
（4）编译好后会生成链接和二维码两种形式，选择下载apk 即可
（5） 本人做的“”大白版“仿2048 下载地址：/app/download?path=1.z0./1b185b5c3a7e7b928519bdfbd25a9804_d
希望慕课的小伙伴们，能喜欢。
相关标签：
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2距离上一次发文都过去十天了, 下班回来懒的就想睡觉, 今天520一个重要的节日, 恩爱已经秀完, 该干点事情了！！
总结一下最近开发遇到的一些问题, 以及解决方案
纯css三角形
/* 没有哪个方向的边框, 三角形就朝向那边 */
height: 0;
border-top: .5rem
border-left: 1
border-bottom: .5rem
:after和:before伪元素
在设置宽高之前,必须先设置display属性
content: "";
display: inline-block;
width: .18rem;
height: .18rem;
background-color: #f00;
禁止换行, 使文字在一行内显示
white-space:
text-overflow:
朋友圈上传图片, 根据图片数量自适应大小
// 根据上传图片的多少自适应图片的大小
(function() {
// 获取所有有图片内容的容器, apicloud的选择器, 其他选择器亦可
var listContent = $api.domAll('.listContent');
for (var i = 0; i & listContent.length; i++) {
// 每个图片容器中有几个图片
var imgArr = listContent[i].getElementsByClassName('content_img');
var imgCount = imgArr.length
// 根据每个容器中的图片输了设置当前容器中图片的尺寸
if (imgCount == 1) {
$api.css(listContent[i].getElementsByClassName('content_img')[i], 'width:2.86margin:0');
} else if (imgCount == 2 ||　imgCount == 4) {
for (var j = 0; j & imgCount; j++) {
$api.css(listContent[i].getElementsByClassName('content_img')[j], 'height:2.78rem');
for (var j = 0; j & imgCount; j++) {
$api.css(listContent[i].getElementsByClassName('content_img')[j], 'height:1.8rem');
qq历史聊天记录--网页面上部添加标签后不滚动
// 获取历史聊天记录前 页面高度
mainH=$api.offset($api.dom('.main')).h;
_main = mainH
// 修改获取聊天记录后的页面位置
mainH = $api.offset($api.dom('.main')).h;
scrollH = mainH - _main;
window.scrollTo(0,scrollH-50);
apicloud阻止冒泡事件
// 添加到标签上
// 阻止默认事件
onclick = 'event.preventDefault();'
// 阻止冒泡事件
onclick = 'event.stopPropagation();'
onclick = 'api.closeWin();event.preventDefault();'
onclick = 'api.closeWin();event.stopPropagation();'
排他原则(干掉所有人,留下我自己)
function li_span(ele) {
// 选择传入元素的所有同级元素
var allDom = ele.parentNode.childNodes
for (var i = 0; i & allDom.length; i++) {
$api.removeCls(allDom[i], 'sel');
$api.addCls(ele, 'sel');
android4.4 兼容flex
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
主轴对齐方式
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
/* 旧版语法有4个参数，而新版语法有5个参数，兼容写法新版语法的 space-around 是不可用的 */
box-pack: start | end | center | justify;
/*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
侧轴对齐方式
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
/* 参数 */
box-align: start | end | center | baseline | stretch;
/*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
是否允许子元素伸缩
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
/* 参数 */
box-flex: &value&;
/*伸缩：&一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对&*/
flex-grow: &number&; /* default 0 */
/*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
flex-shrink: &number&; /* default 1 */
/*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
ios系统下 数字变蓝
多位数字在ios系统下会被识别为电话变得可点击
&!-- 阻止方法加meta标签 --&
&meta name="format-detection" content="telephone=no" /&
textarea去掉右下角可拖动按钮
可以使用 resize: 来禁用 textarea 右下角的拖动图标。
apicloud获取本地文件路径
阅读(...) 评论()三个问题告诉你，开发一个App到底难不难？_新浪浙江_新浪网
　　App软件开发是一件非常专业的技术性的工作，所以大众总是有一些常见的困惑，比如“为什么开发App要花这么多钱?”，或“为什么开发App要花这么长时间?”或“App开发的难点到底在哪里?”。自APICloud定制平台上线，我们就接到了无数个客户类似的询问。因此，小编在这里，用非常通俗的话去解释一下这些问题。
　　首先，我们先理解一下客户的这些问题的本质：
　　App开发到底是什么?
　　一句话来解释，开发一款App就是从构思到实现的过程。这个过程具体包括什么呢?
　　? 需求预评估：把客户的构思一一梳理、落实到表格中，最终形成一份App需求报告
　　? 产品原型设计：根据App需求报告，做出一版App的雏形，主要将每一个功能安排好合适的位置
　　? UI设计：设计每一个页面
　　? App端开发：也就是用户端(前端)的开发，这一步完成后，App呈现给用户的样子就出来了
　　? 服务端开发：也就是数据后台端的开发，比如用户的数据，或是电商的后台等
　　? 接口联调：将App端和服务端连接起来，形成一个完整的App。客户可以运营App，用户可以使用App
　　? 测试及验收：把App放到各型号手机中进行测试，修改bug，调整细节等
　　了解了开发App的全部过程后，下一个问题就是：
　　App开发是根据什么来进行报价的呢?
　　答案是：工作量(时间和人员)
　　开发一个App需要多长时间和多少人将最终决定花多少钱，而决定时间和人员的因素有两个：
　　? App功能的多少和难易：App功能越多、业务越复杂，所需的时间越长，所需的人手越多
　　? 技术团队的实力：目前市面上包括个人开发者、开发团队和专业的App开发公司，选用不同的团队会有很大的报价差，当然质量也会有比较大的差距，一般报价从低到高：个人-团队-公司，App质量从低到高也是：个人-团队-公司
　　? 不同的开发方式：开发一款App可以选用不同的开发技术和方式，有原生开发、混合开发、Web开发。
　　1)Web开发：通俗讲就是用一个手机网站加个壳，就变身为一个App。这种方式简单、便宜，但效果差、质量低。有个别的不良商家用这种方式欺骗客户。
　　2)原生开发：iOS和Android分别用不同的语言进行编程，这种方式最成熟，成本也是最高的;
　　3)混合开发：顾名思义，混合开发就是结合了原生和Web进行开发。像APICloud就使用了这样的开发技术，用简单的网页语言就可以开发出原生性能的App。这样不仅开发快，而且App质量高。像手机淘宝、微信等大型App都使用这种开发方式。
　　现在，我们已经基本了解了App开发报价的决定因素，App开发看似是“一分钱一分货”，App很复杂，功能很多，那价格就会高;但事实上，选用混合开发方式，可以在较低的价格中开发出质量很高的App。
　　下面再介绍一下：
　　App开发的难点都有哪些?
　　1.沟通
　　小编认为沟通是最大的难点，客户很难描述清自己的构思，那就会导致最终的产品不是客户想要的样子。因此从App需求梳理开始到接下来的每一阶段，都需要双方进行充分的沟通和确认。APICloud定制服务为了解决沟通的问题，采用协同后台，每一阶段完成都需要客户在后台进行确认，才可以继续进行下一步。另外，客户还可以随时发起视频会议，和开发团队讨论App开发的想法。
　　2.开发方式
　　App之所以开发比较复杂，是因为不仅要开发前端、后端、后台三端，而且还要开发iOS和Android两个系统的App。和网站相比，这简直复杂多了。开发一个网站只需要开发一端就好。
　　因此，混合开发就使得开发一个App像开发一个网站一样简单，只需开发一端就好。APICloud的原理就是：用原生语言将底层框架都写好，各个不同的功能也已经成为集合在平台上，直接调用就可以。因此开发团队所需要做的就是：用Web语言像拼积木一样将App拼装起来，iOS和Android两个App就开发完毕了。
　　总而言之，开发一个App和做网站相比是较为复杂的工作，不同的端、不同的系统平台，开发App要考虑的很多。因此，APICloud将所有端、不同平台的开发都集合起来，一次性解决问题，开发App也可以像开发网站一样简单，快速，高性价比。
　　免责声明：本文为商业文章仅代表作者个人观点，与本网无关。对本文以及其中全部或者部分内容、文字的真实性、完整性、用时性本站不作任何保证和承诺，请读者仅作参考，并请自行核实相关内容。纠错请发信至：chenxin@.cn邮箱。
11-03 15:01|分享
11-03 14:39|分享
11-02 11:46|分享
11-01 06:55|分享
10-31 19:23|分享
10-28 17:51|分享
10-26 11:49|分享
10-26 11:41|分享
10-26 10:45|分享
10-26 10:35|分享
新浪地方站