ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
2016-08-23 08:41
225 查看
ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
OniPlatform 在ionic的基础上配置ocLazyLoad,使得项目满足微信应用-单页面表现的需求,使得单页面访问,不会因为项目的庞大而造成读取缓慢,加快启动项目的速度。 拆分ionic视图控制器的绑定,使之底层的服务能够用于pc端,pc端的页面使用bootstrap编写,用ionic的控制器和服务支持。 使用此框架要遵循一下规定(以下以移动端路径说明,pc端在最前面加上ionicforpc): 1、命名规则 ①文件夹命名全部小写 ②文件命名以首字母大写的驼峰式命名 ③服务以Service结尾 ④控制器以Ctrl结尾 ⑤指令以Directive结尾 2、文件存放路径 ①所有服务放于js/services ②所有控制器放于js/controllers ③所有指令放于js/directives ④所有工具类放于js/util ⑤所有的html文件放于templates ⑥路由在App.js中定义 ⑦所有的文件都要在Config.js文件中写明路径 3、发布(发布文件路径为www/dest,相对路径不变,可以直接拷贝里面的文件发布) ①首次使用运行firstbuild.bat,安装相关插件 ②首次发布运行buildall.bat,压缩js、css、html、image,拷贝lib里面的文件和index.html ③只修改js,再次发布,运行buildjs.bat ④只修改css,再次发布,运行buildcss.bat ⑤只修改html,再次发布,运行buildhtml.bat ⑥只修改image,再次发布,运行buildimage.bat ⑦增加lib里面的文件,最好重新buildall 4、按需加载的实现 ①按需加载html,在路由中配置属性templateUrl: 'templates/xx.html',prefetchTemplate:false,不会提前加载html ②按需加载js,在路由中配置resolve: loadSequence('DashArgs'),resolve: loadSequence('DashCtrl'),resolve: loadSequence(['DashCtrl','DashService','MainService']) resolve:预载入 使用预载入功能,可以预先载入一系列依赖或者数据,然后注入到控制器中。 在路由中的resolve,能够保证在路由到达前载入数据保证(promises). 预载入对象需要一个对象,这个对象的key纪要注入到控制器的依赖,这个对象的值为需要被载入的服务。 如果传入的是字符串,路由会视图匹配已经注册的服务。 如果传入的是函数,该函数会被注入,并且该函数返回的值便是控制器的依赖之一。 如果该函数返回一个数据保证(promise),这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。 loadSequence:自定义的加载js文件的方法,返回的是一个数据保证(promise)。resolve会保证在控制器被实例化之前载入相关数据。 loadSequence接受三种格式的参数。 第一种单个文件名称(该名称需要在Config.js中配置真实的文件路径)。 第二种一个文件名称的数据对象(要求同上)。 第三种单个的数组对象名称(该名称需要在Config.js中配置相应的文件名称的数组对象) 建议使用第三种格式的参数,提供一个数组对象的名称,在Config.js中匹配对应的数组对象,再通过遍历数组对象,匹配单个文件真实的文件路径,实现加载。 ③按需加载css文件,在对应的服务中调用 $ocLazyLoad.load( [{type: 'css', path: 'css/ChatsStyle.css'}]),需要注入服务$ocLazyLoad。 注意需要写在它特有的服务中,不要写在多个界面通用的服务里面。也可以使用按需加载js文件的方式,在配置表中配置。 5、相关规范 ①服务是按照界面区分的,不是按照功能区分的。 ②在index.html中使用的服务和指令需要在index中使用script标签加载相关文件。 在index编译完成启动app之后才会触发路由 6、关于自由复制 在ion-content中设置 overflow-scroll="true" 在需要的复制的对象增加样式selectable .selectable{ -webkit-user-select: auto; -moz-user-select: all; -ms-user-select: all; user-select: all; }
项目在github上面:https://github.com/xiaohuoni/ionic-for-wechat
--- 转自:http://blog.csdn.net/onil_chen/article/category/6113346 ---
相关文章推荐
- ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
- ionic入门教程第十六课-在微信中使用ionic的解决方案(按需加载加强版)
- ionic入门教程第十六课-在微信中使用ionic的解决方案(按需加载加强版)
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- AJAX技术与Struts1框架配合使用入门教程
- Hadoop中的集群配置和使用技巧——分布式计算开源框架Hadoop入门实践(二)
- IdentityServer3——入门教程:.NET开源OpenID Connect 和OAuth解决方案IdentityServer v3 介绍
- Android开源框架OrmLite使用出现的问题及解决方案
- ionic入门教程第四课-使用$controllerProvider按需加载controller
- 在使用Android-Universal-Image-Loader-master这个开源的图片缓存框架的时候,在下拉刷新时,出现闪烁的解决方案
- PHP的Yii框架入门使用教程
- Google的开源C++单元测试框架Google Test使用教程
- 开源框架Pushlet入门,使用Pushlet将消息从服务器端推送到客户端
- 使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案
- ijkplayer --B站开源播放框架使用教程(iOS版)
- PHP的Yii框架入门使用教程
- PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
- FaceBook pop 动画开源框架使用教程说明
- Farseer.net轻量级开源框架 入门篇:使用前说明
- java微信开发框架wechat4j入门教程