uni-app+iconfont 实现星级评分（vue）

效果图

​​

需求

点击星星进行评分，若评分低于三星，则展示问题原因，星级评分多少则高亮几颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。

因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成一个组件，这里就主要记录星星评分组件的实现。

1. uni-app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。
这里不多做赘述，开发的方法基本同VUE，安装及使用可查看官网教程。
因此需求主要应用于手机浏览器，手机浏览器的标题栏和uni-app的标题栏重复，因此这里将uni-app默认的浏览器隐藏。

	//pages.json
	"style" : {
     
        "navigationStyle":"custom"     //单个取消导航栏
    }, 
	"globalStyle" : {
   
		"navigationStyle": "custom"		//全局取消导航栏
    }

2. iconfont

uni-app的iconfont引入，目前只能成功引入Unicode格式，也就导致之后的开发不能通过动态绑定class实现。
iconfont Unicode引入方法

• 将选择好的图标添加至项目
• 拷贝项目下面生成的font-face
• 在项目中新建.css文件，将生成的font-face复制添加进去
• url地址前添加 https:
• 定义使用iconfont的样式
• 挑选相应图标并获取字体编码，应用于页面

@font-face {
   
  font-family: 'iconfont'; 
  src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot');
  src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff2') format('woff2'),