uni-app开发微信小程序踩过得坑项目说明一、iconfont图标不显示二、v-if在插槽上不起作用三、uView组件上定义的样式不生效四、PDF在线预览方案项目说明项目采用uni-app+uView框架，一套代码，发布成APP和微信小程序两端。由于前期都是在HBuilderX开发，等开发差不多了，在微信开发者工具运行的时候，才发现莫名踩了很多坑！特在此记录一下。一、iconfont图标不显示参考链接：https://blog.csdn.net/qq812457115/article/details/126160834二、v-if在插槽上不起作用开发过程中有些v-if一直不起作用，不论布尔值
uni-app开发微信小程序踩过得坑项目说明一、iconfont图标不显示二、v-if在插槽上不起作用三、uView组件上定义的样式不生效四、PDF在线预览方案项目说明项目采用uni-app+uView框架，一套代码，发布成APP和微信小程序两端。由于前期都是在HBuilderX开发，等开发差不多了，在微信开发者工具运行的时候，才发现莫名踩了很多坑！特在此记录一下。一、iconfont图标不显示参考链接：https://blog.csdn.net/qq812457115/article/details/126160834二、v-if在插槽上不起作用开发过程中有些v-if一直不起作用，不论布尔值
🧊前言本文主要讲述的是在使用uniapp中如何引入iconfont图标，以及两种常用的位置。位置一：App下原生导航栏的按钮使用字体图标。位置二：页面中的任意位置使用iconfont图标。🌺正文第一步：打开iconfont官网新建项目并添加自己所需要的图标这里是iconfont的网址链接：iconfon官网新建项目不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已\textcolor{red}{不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已}不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天
🧊前言本文主要讲述的是在使用uniapp中如何引入iconfont图标，以及两种常用的位置。位置一：App下原生导航栏的按钮使用字体图标。位置二：页面中的任意位置使用iconfont图标。🌺正文第一步：打开iconfont官网新建项目并添加自己所需要的图标这里是iconfont的网址链接：iconfon官网新建项目不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已\textcolor{red}{不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已}不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天
图标库的发展过程，iconfont图标库的重要性（项目常用）对于前端而言，图标的发展可谓日新月异。从img标签，到雪碧图，再到字体图标，svg，甚至svg也有了类似于雪碧图的方案svg-sprite-loader。在项目实践中，bootstrap，font-awesome，element-ui等UI库都基本标配了字体图标。一、Iconfont-图标管理工具阿里巴巴旗下阿里妈妈MUX团队打造的图标管理平台。这是一个专门为设计师和前端开发者打造的在线工具。设计师将图标上传到Iconfont，可以自定义下载多种格式的icon，也可将图标转换为字体，方便前端工程师自由调整与使用。通过这个免费的工具，设
图标库的发展过程，iconfont图标库的重要性（项目常用）对于前端而言，图标的发展可谓日新月异。从img标签，到雪碧图，再到字体图标，svg，甚至svg也有了类似于雪碧图的方案svg-sprite-loader。在项目实践中，bootstrap，font-awesome，element-ui等UI库都基本标配了字体图标。一、Iconfont-图标管理工具阿里巴巴旗下阿里妈妈MUX团队打造的图标管理平台。这是一个专门为设计师和前端开发者打造的在线工具。设计师将图标上传到Iconfont，可以自定义下载多种格式的icon，也可将图标转换为字体，方便前端工程师自由调整与使用。通过这个免费的工具，设
第一种：iconfont图标库里，当有‘查看在线链接’按钮时，点击复制“FontClass”的链接，在浏览器里面打开链接，复制里面的内容到小程序上面就行了，扩展名改成“.WXSS”第二种：当没有在线链接时候，我们就要‘下载到本地’，下载好了之后，就有一个压缩好的文件夹，我们只要里面的这四个文件，css文件里面的内容复制到小程序后缀名为‘.wxss’文件，css文件内容复制到小程序里面在小程序里面创建一个新的文件夹，放入另外三个文件，并且.wxss文件里面的路径要改接下来就是在app.wxss里面全局调用 然后页面直接调用就行了 第三种把iconfont的ttf文件进行base64转换网址：O
第一种：iconfont图标库里，当有‘查看在线链接’按钮时，点击复制“FontClass”的链接，在浏览器里面打开链接，复制里面的内容到小程序上面就行了，扩展名改成“.WXSS”第二种：当没有在线链接时候，我们就要‘下载到本地’，下载好了之后，就有一个压缩好的文件夹，我们只要里面的这四个文件，css文件里面的内容复制到小程序后缀名为‘.wxss’文件，css文件内容复制到小程序里面在小程序里面创建一个新的文件夹，放入另外三个文件，并且.wxss文件里面的路径要改接下来就是在app.wxss里面全局调用 然后页面直接调用就行了 第三种把iconfont的ttf文件进行base64转换网址：O
使用外部样式的方法是：@import '相对路径下的外部样式文件.wxss';iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.方案如下：1、到阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件 2、使用线上平台工具(Online@font-facegenerator—Transfonter)将字体文件转化base64格式将下载文件目录下.css文件直接修改成.wcss文
使用外部样式的方法是：@import '相对路径下的外部样式文件.wxss';iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.方案如下：1、到阿里巴巴矢量图标库(iconfont-阿里巴巴矢量图标库)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件 2、使用线上平台工具(Online@font-facegenerator—Transfonter)将字体文件转化base64格式将下载文件目录下.css文件直接修改成.wcss文
