uni-app踩坑之路（一）

        最近因为公司项目要求，开始着手uni-app的开发，目前我主要是以React开发为主，当然，我也不介意接触新技术，react当年也是一步步踩过来的，只是当年忘记留下路程，这次准备记录下uni-app的路程；

1.搭建骨架

        我暂时没有能力手写uni-app的骨架，所以，当然对着官方教程怼了：

首先，去Hbuider官网下载HbuiderX;新建项目，我选择的是默认模版，当然它还有别的模版，可以去体验下；

2.图标字体设置

        关于这个，首先想到的是阿里的Iconfont,然而，我搜索了多篇介绍，但还是有些不足，导致我卡在这里一段时间，那就是原生导航栏的图标显示问题，按照网上教程可以在页面上使用，也实现成功，但他们可能觉得导航栏这个太简单了把，照着教程都怼不了，没错，其实就是一句话的问题，下面展示下引入过程：

1.登录阿里icon，进入图标管理，我的项目

2.把需要的图标添加进项目，怎么添加的可以去百度查，添加完后可见下图，点击下图代码复制

3.打开HbuiderX里面的项目App.vue页面(这个是设定全局)或者别的单独页面的vue页面，最后如下图，到这里页面使用需要的就基本完成了，如果需要使用原生导航以及别的类似\ue633等的字体图标，请见4和5，别的可以跳过直接进使用

4.选中项目里面的Unicode，点击下载到本地，解压后可得到以下字体相关文件，点击复制iconfont.ttf，进入到Hbuider的项目文件夹，一定要复制到 static 文件夹，亲测别的文件夹不生效，到此字体图标的布置就结束了，最后提一点，如果后续有新的图标添加到该项目下，记得更新下代码，替换引入的链接，然后下载，替换static文件夹下的.ttf字体文件

3.使用图标字体

1.正常Unicode引用，我的是全局下的，所以不需要再次引用。直接使用创建标签，添加class为iconfont,然后复制从下图拿到的代码



2.原生导航下的图标使用，类似\ue633的，如下图在button里的fontSrc即为之前下载复制的.ttf文件路径，text即为阿里图标的Unicode的16位置编码e633,至于为什么要写成\ue633，在之前的基础上添加\u，这个可以去问Uni的开发人员，这个在官方介绍都有介绍的，细心点就能知道

3.最后放上一张我的原生滚动透明导航栏效果图，第一个坑到此结束，感谢你看到了这里，如果对你有帮助，请点下赞，谢谢