上一章节的认识
上一章节我们一起了解了微信小程序的定位,调用第三方导航等功能,传送门
遇到的问题
当我们将微信小程序进行上传的时候,也许你会收到微信的反馈,XXX文件未被上传,这是因为微信在服务器内设置了只可以上传它定义的名称类型
下面是微信上传的文件类型
可上传文件类型
因此我们的字体样式iconfont.eot等是不能上传的,若上传则显示未上传成功,如图所示:
解决方式
- 打开网址https://www.iconfont.cn/,注册登录,新建一个项目,如图:
然后进入图标库中搜索我们想要的图标,比如搜索 我的,
加入传说中剁手的购物车
可以看到右上角购物车有我们添加的图标数量
点击右上角购物车按钮之后,将图标添加到项目中。如图所示:
然后进入到项目中
生成结果如图所示:
点击复制代码
然后将我们复制的代码粘贴到Hubilder编辑器 项目中的App.vue中(作为一个全局文件)
然后将//at.alicdn.com替换成https://at.alicdn.com,
如图所示:
App.vue如图所示:
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@font-face {
font-family: 'iconfont'; /* project id 1943942 */
src: url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.eot');
src: url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.woff') format('woff'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.svg#iconfont') format('svg');
}
</style>
打开我们刚刚下载的项目并打开iconfont.css
iconfont.css如下:
复制方框中的代码粘贴到Hubilder编辑器 项目中的App.vue中(作为一个全局文件,这样我们在项目中都可以使用了)
最后App.vue文件如下:
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@font-face {
font-family: 'iconfont'; /* project id 1943942 */
src: url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.eot');
src: url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.woff') format('woff'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1943942_5nj2aimy7tc.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconicon-test:before {
content: "\e634";
}
.iconwodedangxuan:before {
content: "\e600";
}
.iconwode:before {
content: "\e601";
}
</style>
使用方法
比如我们要使用.iconwodedangxuan这个类元素,则直接在代码中如下即可:
<view class="iconfont iconwodedangxuan icon_iconwodedangxuan"></view>
注: iconfont 是必须要有的,后面跟着的是类元素名称 icon_iconwodedangxuan是我自己添加的样式,可以自定义颜色大小等,如下所示:
.icon_iconwodedangxuan{
color: #007AFF;
font-size: 25rpx;
height: 30rpx;
line-height: 30rpx;
}