欢迎光临,了解微信小程序开发,就上易用通!

AngularJS迁移小程序

发布:2018-02-07 10:19浏览: 来源:网络 作者:cola

1 AngularJS与小程序架构比较
整体架构设计异同点:
1、都是基于单页应用设计思想来做的整体框架设计;小程序更极端,整个应用就是一个大模块,里面所有页面都是子模块页面;
2、都将每个页面分为页面结构(.wxml)、业务逻辑(.js)、样式(.wxss)、数据结构(.json)四部分,在小程序里面更加直接,四部分的文件名字都必须严格相同,只是文件扩展名不同。

AngularJS迁移小程序(图1)


3、都有模块内路由策略的配置,小程序配置策略更简单,统一在app.json设置,基于上面的点2,路由策略就是配置子模块路径,且默认第一条记录就是首页;

AngularJS迁移小程序(图2)

4、都是基于双向绑定设计思想来实现数据模型与页面渲染的同步,不过小程序的动态绑定没有AngularJS强大,数据变化时,需要手动通过setData方法来更新页面,而AngularJS是自动刷新页面的(大部分情况下)。
5、均有自己独立的数据操作作用域,也因此均对第三方js开源类库的支持性不太友好,这一方面AngularJS稍好一点,只要将第三方类库对象挂载到全局Window对象上,在各模块作用域内依然可以使用,但小程序不行,这一点比较致命,如果不改变,小程序必定也活不长久。
6、均支持模块或功能组件的引用,也即依赖动态注入;
7、对于异步请求,AngularJS采用基于点号(.)的链式写法,小程序采用方法入参型写法;

小程序不足方面:
1、不支持基于控件id的Dom元素查询;
2、不支持js第三方通用类库集成;(这一点比较致命)
3、绝对依赖微信原生能力,无法自主集成第三方原生类库能力,例如语音识别、面部识别、图形识别等前沿技术;

2 迁移细节
2.1 目录迁移
1、每个子模块页面换成Pages目录下的一个子目录,目录命名就是原子模块名。
2、原来的通用css、image、fonts等静态资源统一移到resource目录下,需要使用时,对于css样式文件,在对应子模块的wxss文件首部通过import命令引入;

2.2 html
2.2.1 替换规则
1、div需统一转换成View;
2、ng-show统一转换为wx:if;
3、ng-click统一转换为bindtap;
4、ng-repeat统一用wx:for替换;
5、ng-class中的样式选择性绑定可以直接把条件绑定语句嵌入class属性;

2.3 js代码
模块级代码迁移:
可将模块级作用域使用的通用逻辑搬到app.js中,通过app对象来引用;或者定义一个util模块,来做动态引入;
对于原生与h5交互时用到的自定义事件,需要根据具体场景做处理。

    子模块级代码迁移:
    可将Angular子模块代码直接迁移到小程序对应Page对象中,当然,对于Angular特定语法的$***对象(例如$scope、$rootscope)的操作,需要做全局替换,替换原则是:
    1、$scope:与Page对象同生命周期内的$scope,可以直接替换成this;而对于非同一生命周期的(最常见的即是各种callback回调函数),需要将Page对象在方法外做引用保存(例如var self=this),然后在回调函数中使用。
    2、$rootScope:推荐放入app对象中引用,或者自定义通用模块,然后动态引入;
    3、数据模型:各页面中建立的数据模型,直接放入***.json文件中,如果涉及Angular特定语法的操作,可参考上述两点的做法进行替换;
    4、jsonp请求:将jsonp请求统一替换成wx.request请求,只是原来的链式写法要换成参数型写法;
    5、子模块间的页面跳转,$state.go统一替换成wx.navigateTo或wx.navigateBack;

2.4 css样式
大部分css样式可以直接复制到wxss中,直接引用,不过需要注意的是某些css3高级样式,小程序目前还不支持,这一点需要特别小心。
目前发现的是css3动画的某些属性wxss不支持,例如keyFrame属性中基于百分比的声明方式wxss并不支持,仅支持from..to写法;因此复杂动画建议换成wx.createAnimation来实现;






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。