如何为ionic 开发web网站webapp开发自定义插件

查看: 240|回复: 2
ionic 怎么引入百度报表插件 ECharts
主题帖子积分
新手上路, 积分 15, 距离下一级还需 35 积分
新手上路, 积分 15, 距离下一级还需 35 积分
因为项目需要,需要在WEBAPP里显示报表,找到百度报表插件ECharts,请问大神们,怎么加载啊。
主题帖子积分
以前js怎么用就这么用,只不过是把调用的js放在对应的controller里面了
主题帖子积分
新手上路, 积分 15, 距离下一级还需 35 积分
新手上路, 积分 15, 距离下一级还需 35 积分
以前js怎么用就这么用,只不过是把调用的js放在对应的controller里面了
请问俱体怎么用啊
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案,Angularjs号称下一代web应用,Ionic移动app开发教程值得拥有
Powered byionic框架,快速开发webAPP神器。
  官网地址&/&& & &这个国外框架已经很火了。会使用插件的话更好,例如支付宝支付插件,调用摄像头拍照,二维码扫描,通讯录,文件上传,推送信息等等。最主要的是界面的html+css搭建,框架里面的css已经很丰富了,手机上各种样式例子官网上都有,基本齐全。在该项目目录里面运行命令&命令:& & 1。&ionic start park tabs 创建& & 2。ionic platform add android 添加安卓平台& & 3。 ionic build android &添加安卓环境  4。 ionic run android 在真机上运行&5. ionic serve --lab 或 ionic serve 在网页上浏览,见下图(1)6. cordova plugin add (输入插件地址) &添加插件7. cordova plugin remove&(输入插件地址) &移除插件8.&&cordova plugin list 插件已安装插件 如图(2)(图1)&图(2)
最新教程周点击榜
微信扫一扫&&&&ionic sublime 2/3 提示插件
ionic-sublime-plugin
ionic sublime 2/3 提示插件
ionic-sublime-plugin
ionic-sublime-plugin
支持sublime2、3版本
若举报审核通过,可奖励20下载分
被举报人:
举报的资源分:
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题,侵犯个人或公司的版权
*详细原因:
您可能还需要
移动开发下载排行如何为ionic webapp开发自定义插件_百度知道
如何为ionic webapp开发自定义插件
今年你就会技术很牛, IONIC 很好很强大,就说明你已经了解并厌倦了国产开发IDE做出来的 APP的混乱了,开整吧:运行1
ionic build android噼里啪啦的运行之后。你的问题有点儿混乱,调试也极其方便,然后可以在模拟器或者真是设备上调试了就?Ionic 自身就是架在 PhoneGap&#47:接下来进入那个项目的根目录下1
cd BuZhiDao添加 Android 平台支持,就说了,吼吼,还要 upload 一下下,我最喜欢的是Sublime Text)进入到这个应用的目录下的www目录下:用你最喜欢的编辑器(额:当然了,放别人儿我还不说这么多呢,你会看到生成的调试apk的位置,赚很多钱,我觉得你应该是根本就没看 Ionic 吧亲:我觉得你既然开始了解IONIC了,并且有美美的CSS组件了;Cordova + AngularJS 上的一个支持自己在js中配置路由的 Hybrid APP 开发框架,其简洁和快速程度达到了无以复加的地步了.js 中:路由配置就在 app,看你骨骼惊奇,采纳的话:1
ionic start BuZhiDao tabs就开始了,我就先回答这么多吧,使用IONIC 附赠的云端loader程序进行调试的话,下面build下调试,是的
其他类似问题
为您推荐:
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁自iPhone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。
开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。
一、META/LINK相关:
1、百度禁止转码
通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:
&meta http-equiv="Cache-Control" content="no-siteapp" /&
相关链接:
2、添加到主屏后的标题(IOS)
&meta name="apple-mobile-web-app-title" content="标题"&
3、启用 WebApp 全屏模式(IOS)
当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果)
&meta name="apple-mobile-web-app-capable" content="yes" /&
&meta name="apple-touch-fullscreen" content="yes" /&
PS:然而,经本人用5S测试,设置”apple-touch-fullscreen”并没有什么卵用,希望了解者能在底部评论告知
4、设置状态栏的背景颜色(IOS)
设置状态栏的背景颜色,只有在 ”apple-mobile-web-app-capable” content=”yes” 时生效
&meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /&
content 参数:
default :状态栏背景是白色。
black :状态栏背景是黑色。
black-translucent :状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
6、移动端手机号码识别(IOS)
在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
7位数字,形如:1234567
带括号及加号的数字,形如:(+86)
双连接线的数字,形如:00-00-00111
11位数字,形如:
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:
&meta name="format-detection" content="telephone=no" /&
但某些时候,你关闭电话自动识别后,又希望某些电话号码长按时能够链接到 iPhone 的拨号功能和短信功能,你可以使用下面的方法实现:
(2)开启电话功能:
&a href=”tel:43;&123456&/a&
(3)开启短信功能:
&a href=”sms:43;&123456&/a&
7、移动端邮箱识别(Android)
与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:
&meta content=”email=no” name=”format-detection” /&
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
&a mailto:"&&/a&
8、添加智能 App 广告条 Smart App Banner(IOS 6+ Safari)
&meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”&
9、IOS Web app启动动画
由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小
&!-- iPhone --&
&link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"&
&!-- iPhone (Retina) --&
&link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"&
&!-- iPad (portrait) --&
&link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"&
&!-- iPad (landscape) --&
&link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"&
&!-- iPad (Retina, portrait) --&
&link href="apple-touch-startup-image-.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"&
&!-- iPad (Retina, landscape) --&
&link href="apple-touch-startup-image-.png" media="(device-width: 1536px)
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"&
(landscape:横屏 | portrait:竖屏)
10、添加到主屏后的APP图标
指定web app添加到主屏后的图标路径,有两种略微不同的方式:
&!-- 设计原图 --&
&link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"&
&!-- 添加高光效果 --&
&link href="short_cut_114x114.png" rel="apple-touch-icon"&
apple-touch-icon:在IOS6及以下的版本会自动为图标添加一层高光效果(IOS7开始已使用扁平化的设计风格)
apple-touch-icon-precomposed:使用"设计原图图标"
图标尺寸:
可通过指定size属性来为不同的设备提供不同的图标(但通常来说,我们只需提供一个114 x 114 pixels大小的图标即可 )
官方说明如下
Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
11、优先使用最新版本 IE 和 Chrome
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&
二、HTML/CSS
1、关闭iOS键盘首字母自动大写
在iOS中,默认情况下键盘是开启首字母大写的功能的,如果启用这个功能,可以这样:
&input type="text" autocapitalize="off" /&
2、关闭iOS输入自动修正
和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。如果不希望开启此功能,我们可以通过input标签属性来关闭掉:
&input type="text" autocorrect="off" /&
3、禁止文本缩放
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
  -webkit-text-size-adjust: 100%;
需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport’。
4、移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
textarea {
  border: 0; /* 方法1 */
  -webkit-appearance: /* 方法2 */
5、快速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史:
早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iS
Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:
overflow: /* auto | scroll */
-webkit-overflow-scrolling:
PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:
6、移动端禁止选中内容
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
.user-select-none {
-webkit-user-select:
/* Chrome all / Safari all */
-moz-user-select:
/* Firefox all (移动端不需要) */
-ms-user-select:
/* IE 10+ */
7、移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。
8、如何禁止保存或拷贝图像(IOS)
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
&img&{&-webkit-touch-callout:& }
来源:/WhiteCusp/p/4502961.html
关注微信下载离线手册}

我要回帖

更多关于 ionic 自定义插件 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信