发表于: 2017-03-13 20:09:33
2 1272
今天完成的事情:
1、写了邀请页的html部分;
2、学习使用百度分享的插件功能,并初步写好了分享功能;
3、听周霆伟讲关于IconFont方面的知识。
明天计划的事情:
1、开发复制内容到剪切板的功能;
2、完善页面的css样式。
遇到的问题:
1、官网代码好复杂,熟悉代码花了一点儿时间。官网代码的controller用法和以前见到的不一样。
它把Ctrl函数也注入了controller,然后再独立写Ctrl函数。我们一般这样写:
angular.module("myApp",[]).controller("myCtrl",function(){});
相比之下,感觉官网的代码结构更好一些。
2、开发分享功能的时候,需要分享官网的logo,但是官网的logo并没有上传到服务器,而分享功能的图片logo需要用到在线地址,而不是相对路径的地址。一开始打算在官网找找哪里用到了图片上传,然后直接上传logo图片,并获取它在服务器的地址就可以了。找了半天,也的确找到了官网封装图片的service,但是需要传参,这一步完全糊涂了,感觉就算最后写出来了,也是很复杂的。于是问了下杨泽平,他说我们以前写过了图片上传的功能,直接从那里上传一张图拍,打印图片的地址就搞定了。最后,果然解决了这个问题。
收获:
1、看官网代码,感觉比萝卜多项目的代码更加复杂,但能学到的东西也更多一些,比如Ctrl函数的写法;
2、听周霆伟讲关于字体图标方面的知识,恰好今天也用到了字体图标,也搜集了相关的资料,可以谈谈自己的认识:
优点:
很好的解决了「响应式设计」中图形无损自适应的难题,可以直接通过font-size和color属性来控制icon的大小和颜色,体积小,兼容性好,可以无限拉申。
缺点:
样式单一、颜色单一
有少量的移动设备有可能会和 icon fonts 的字符编码冲突,导致icon 显示不正常。
使用方法
1、制件svg格式素材
2、制作字体文件(推荐阿里平台http://iconfont.cn/)
使用:
第一步:使用font-face声明字体
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome、firefox */url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步:定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
第三步:挑选相应图标并获取字体编码,应用于页面,也可以用:before3
问题:
1、跨域问题
2、文字图片大小设置
3、10px以下的字体chrome浏览器显示12px
评论