Angularjs整合微信UI(weui)

前端之家收集整理的这篇文章主要介绍了Angularjs整合微信UI(weui)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引子

不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react、vue。最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点。

适合读者

有一定的Angularjs基础,并且了解ngRoute、ngAnimate的人群。

包含文件

整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架。下面先说明一下引入的文件

  1. 使用angular.min.js 1.4.9
  2. 使用angular-route.min.js 1.4.9
  3. 使用angular-animate.min.js 1.4.9
  4. 使用weui.min.css 0.4.0

一开始想与官方的演示页面一样做一个单页面的,开发之后发现,把所有内容放到一个文件里显得杂乱,所以,使用了Angularjs的路由功能,把各个小功能独立成页面,在需要时加载进来。此处使用模板加载功能来实现。于是,导航页面代码显示很干净,如果想要使用哪部分的功能代码,直接使用相对应的html页面及js脚本文件即可,方便、快捷。

下是导航页面代码

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> WeUI