3种方式教你轻松创建webapp

移动开发行业发展迅速,为迎合用户的需求,大多数传统互联网公司在主导web网站的同时还需兼顾移动开发方向。在已有PC端网站的基础上,考虑到人力、成本和技术、开发周期等因素,许多公司会选择开发快速、维护便捷且成本更低的webapp 。

AppCan与webapp

移动云平台AppCan在为开发者提供简单高效的Hybrid混合模式App开发服务的同时,也兼备了webapp 开发模式,且在分辨率适配方面,已经支持大部分主流机型。

如果你的apk存在适配问题,请先检查下:
1.3.0在线打包(IDE本地打包的引擎不能保证版本最新);
2.保证启动图按照要求的分辨率上传;
3.网页中增加标准属性:

<metaname="viewport" content="target-densitydpi=device-dpi,width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0,maximum-scale=1.0">
4.注释掉自己写的修改分辨率的代码;
5.创建一个新项目,使用官方提供的模版打包,解压后对比一下关于适配的代码。

下面为大家介绍如何在AppCan平台创建webapp的3种方式:

1.在线自动创建webapp

注册AppCan开发帐号,创建一个项目,选择webapp通道,在网址一栏中输入需要生成webapp的web网址,配置app相关选项,从启动icon、启动图、状态栏到插件选择、证书选择等,最后点击生成安装包,即可下载安装(支持安卓&iOS平台)。

注意事项:

(1) Web网址填写要按照规范加上http协议,且不支持二级目录。

(2) 此方式符合一个网址可创建一个项目app标准,一旦创建不可修改。

(3) 安装生成的webapp,需要用户在有网的情况下才能正常浏览,否则提示页面无连接。

2.配置config.xml文件为web网址

在线创建一个项目,选择Hybird模式,然后打开IDE本地开发工具,使用在线同步项目功能,具体参考使用文档《IDE开发流程之同步AppCan项目》:

http://newdocx.appcan.cn/newdocx/docx?type=1480_1234

选择刚创建的hybrid项目,同步到本地IDE,提示签出代码成功后,说明你操作基本正常。

打开config.xml文件可以编辑,这里有2处涉及到webapp配置:

NO.1:起始页替换成你的web网址,代表你生成的App打开的是你的web网址

NO.2:<webapp>false</webapp> 此选项可以配置true 和 false ,true代表生成的App启动不带loading进度条,false代表代表生成的App启动带loading进度条。

如图:

3.使用Hybird模式代码创建webapp

具体参考文档《创建一个AppCan应用》,这里不做过多陈述:

http://newdocx.appcan.cn/newdocx/docx?type=1353_1291

打开IDE,在起始页修改代码:

appcan.ready(function() {

var titHeight = $(’#header’).offset().height;

appcan.frame.open("content","http://www.appcan.cn”,0,titHeight); window.onorientationchange = window.onresize = function() {

appcan.resizePopoverByEle("content", 0, $("#header").offset().height);

}

}

以上代码中,appcan.frame.open("content","http://www.appcan.cn”,0,titHeight);

第二个参数url为窗口要加载的页面的网页地址。

配置config.xml文件:

添加 <webapp>false</webapp> ,此选项可以配置true 和 false,同方法2中说明。

最后几点需要注意:

(1)以上webapp都是需要确保适配移动端的,如何适配在AppCan论坛中有很多开发者分享的教程,这里不再叙述;

(2)AppCan封装的基础框架已经适配移动端,采用上述描述的方法3即可。

(3)使用AppCan平台开发,都支持调用AppCan原生功能插件,前提是你的web网址中有调用集成的AppCan原生插件接口,可参考各插件文档配置。

以上3种方法供各位参考。为进一步提高用户体验,建议使用AppCan混合模式开发移动App,同样简单高效,大大降低开发成本。

时间: 2024-08-05 15:15:59

3种方式教你轻松创建webapp的相关文章

陈松松:三种方式教你打造一个行业内10万视频播放量

这是我写的第82篇原创视频营销文章 陈松松,6年视频营销实战经验 在任何一个行业内, 判断一个视频受不受欢迎, 不管是谁,第一个想到的就是视频播放量. 你的视频播放量高, 哪怕你的视频内容讲的不咋好,大家也觉得你专业你厉害. 你的视频播放量低, 哪怕你的内容讲的再好,大家也认为你不行,你不专业: 至于通过视频吸引了多少目标客户,这个大家根本就不关心. 既然视频播放量成为了一个参考标准, 那如何让自己的视频达到行业内最大的浏览量呢? 不同的行业判断标准不同, 有的行业非常热门,可能要按亿这个单位来

3种方式教你怎样显示手机wifi密码,不再愁密码忘记了

有很多小伙伴在日常使用手机的过程当中,会出现忘记WiFi密码的问题,比如说家里来了客人想要连接家里的WiFi,比如自己的手机取消保存了WiFi的密码,要重新接入的时候提示要输入密码,之后一头雾水. 今天小编要来跟大家介绍三种可以快速显示手机WiFi密码的方法. 一.借助电脑 如果你的电脑是连接WiFi的,那么可以在电脑的右下角看到如下的WiFi标记,鼠标右击WiFi信号,打开网络共享中心. 之后会弹出电脑的控制面板,在控制面板当中点击右边WiFi的名字. 在WiFi状态的窗口当中,点击无线属性

iReport+jasperreport创建子表的几种方式(1)

在制作报表的过程中,子表是必不可少的,今天就研究了一下制作子表的几种方式 一.连接数据库创建子表 以MySQL为例: 1)iReport 创建父表 这个就是创建一个新的表格,不过记得数据源要选择mySQL ,其他的数据库数据源也一样的. 2)创建好之后,我们来创建子表,在组件面板找到拖动到父表当中的任意一个地方,我是放到detail里面的 它会产生一个向导 一路next下去,只是在最后一项选择use empty datasource,不过选其他的也行,待会我们还要修改 3)说一下原理:这种方式就

创建多对多表关系的三种方式

创建多对多表关系的三种方式 在我们之前创建多对多表的时候,一直用的都是全自动的方式来创建第三张表的. 1.全自动(推荐使用**) 好处在于 django orm会自动帮你创建第三张关系表 但是它只会帮你创建两个表的关系字段 不会再额外添加字段 虽然方便 但是第三张表的扩展性较差 无法随意的添加额外的字段 class Book(models.Model): ... authors = models.ManyToManyField(to='Author') class Author(models.M

WiFi攻击的三种方式

WiFi的安全问题已经引起了不少的使用者重视,甚至已经出现草木皆兵的现象.那么黑客到底是如何做到绕过身份验证来获取WiFi使用权的呢?主要有以下三种方式,其中最后一种方式十分简单. WiFi的安全问题已经引起了不少的使用者重视,甚至已经出现草木皆兵的现象.那么黑客到底是如何做到绕过身份验证来获取WiFi使用权的呢?主要有以下三种方式,其中最后一种方式十分简单. 1. 伪造MAC地址 很多时候开放网络的身份验证往往就是通过上网设备的MAC地址连同上网凭证一起实现的.但由于设备的MAC地址都容易进行

Windows10-UWP中设备序列显示不同XAML的三种方式[3]

阅读目录: 概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述 Windows10-UWP(Universal Windows Platform)增加一个新特性设备序列(DeviceFamily)特定视图,它允许开发者为指定的设备序列定义指定的XAML显示,(Desktop.Mobile.tablet.Iot等). 如果你想为不同的设备序列显示较多不一样的UI时,它是非常有用的.当然,使用Relative

进程间共享句柄三种方式

windows核心编程第三章中,句柄的共享讲了三种方式 1.在创建句柄的时候,设置可继承,在创建进程时,让子进程继承句柄, 然后通过各种途径(如命令行参数.环境变量.发送消息)让子进程知道即可.2.复制句柄,得先知道目的进程,然后在目标进程中复制句柄, 最后通过各种途径(如发送消息)通知目标进程3.给句柄命名,进程间相互知道名字即可. 第3种在使用Mutex限制只运行一个实例时已使用,前2种没有例子,因此自己写了个实例. 运行后,点击创建进程,会创建一个文件句柄,并置为可继承,然后创建一个环境变

实现动态代理的两种方式介绍+例子demo(JDK、CGlib)

JDK实现动态代理需要实现类通过接口定义业务方法,对于没有接口的类,如何实现动态代理呢? 这就需要CGLib了.CGLib采用了非常底层的字节码技术,其原理是通过字节码技术为一个类创建子类,并在子类中采用方法拦截的技术拦截所有父类方法的调用,顺势织入横切逻辑. JDK动态代理与CGLib动态代理均是实现Spring AOP的基础. 一.JDK这种方式动态代理 1. 没引入spring配置文件时,怎么实现JDK动态代理 情景介绍:如何解决全站中文乱码问题? 我们会定义一个过滤器:Character

java生成二维码使用QRCode和ZXing两种方式

QRCode是日本人开发的ZXing是google开发的 QRCode开发需要包http://download.csdn.net/detail/xiaokui_wingfly/7957815 ZXing开发需要包http://download.csdn.net/detail/u010457960/5301392 QRCode方式: package cn.utils; import java.awt.Color; import java.awt.Graphics2D; import java.aw