微信小程序开发中如何使用iconfont字体图标

本文小编为大家详细介绍“微信小程序开发中如何使用iconfont字体图标”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序开发中如何使用iconfont字体图标”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

使用iconfont字体图标

新建项目并添加图标

在app.wxss中以unicode方式引入

@font-face {
  font-family: 'iconfont';  /* project id 431644 */
  src: url('//at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.eot');
  src: url('//at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.svg#iconfont') format('svg');
}
复制代码

定义通用icon样式，定义伪元素

.icon{
  display: inline-block;
  font-family: 'iconfont';
}
.icon-home::before{
  content: "\e600";
}
复制代码

使用

<view class="icon icon-home"</view>
复制代码

小程序事件绑定及处理器

小程序并没有类似vuejs的v-model进行双向绑定，使用bindinput类似jQuery监听input事件在事件处理器中更新数据，通过event对象e.data.value即可获得input的值。

// bindconfirm监听键盘回车事件，focus属性聚焦渲染组件时会自动弹出手机软键盘
<input type='text' placeholder='歌曲名 / 歌手' bindinput='bindSearchInput' bindconfirm='onSearch' focus></input>
复制代码

bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}
复制代码

小程序中的事件处理器并不能像vue一样传入参数，因为事件处理器只有一个默认的参数event对象，在for循环的组件中如果要想获取元素绑定的id，可以通过和jQuery相同的方式绑定data属性。

<!-- 轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{banner_list}}" wx:key="{{index}}"><swiper-item bindtap="navigateToDetail"  data-id="{{item.href}}">  <image src="{{item.image}}" class="slide-image" mode="widthFix"></image></swiper-item>
  </block>
</swiper>
复制代码

获取id：

//事件处理函数
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}
复制代码

阻止事件冒泡

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle
复制代码

对应阻止冒泡事件将bind用catch替代

setData

小程序的视图更新需要调用setData修改绑定数据，直接对数据进行修改是不会触发视图层更新的。setData接受一个对象，为需要添加或修改的属性。属性名有点特殊，[]中的值会被识别为变量，因此如果要对对象数组中的某个属性进行修改，只能预先拼接好属性名。 错误做法：

// 视图不更新
this.data.searchSongs[index].love_flag': 2
// SyntaxError: unknown: Unexpected token
this.setData({
  'searchSongs[' + index + '].love_flag': 2
})
复制代码

正确做法：

setSongFlag(e) {
// 注意setData属性名[]中的非整数值会被识别为变量
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
  [key]: 2
})
复制代码

关于image组件

小程序wxss的background-image及image组件都不支持本地url 在H5的开发中，通常我们会将页面一些不需要根据容器大小来选择显示方式的图片使用img标签，需要一些特殊显示方式的使用background。但小程序只需要image组件便可。它提供的mode属性和背景定义图片及img元素控制图片显示方式对比

其他的top、bottom、right、left等不缩放图片调整位置的属性与background-position作用相同，img元素则只能通过定位控制。

小程序API异步方案

如果没有强迫症，小程序API使用默认回调的方式即可；另外由于小程序只支持es6，不支持async及await，也可以将API封装成promise的方式。

function promisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)//执行函数，obj为传入函数的参数
    })
  }
}
module.exports = {
    promisify: promisify
}
复制代码

使用：

const promisify = require('./promisify.js')
const request = promisify(wx.request);

request({
    url: 'some URL'
    method: 'GET',
}).then(res => {   
    console.log(res)                 
}
复制代码

小程序问题

• 调试器没有css快捷提示功能和颜色面板，影响布局及颜色调整效率（随性派）

• 无法引入第三方js库

• 内置组件单调，没有考虑字体数量比较多时的自适应情况

• 不支持跳转外部链接

• 背景图片或者image组件不能用本地图片

读到这里，这篇“微信小程序开发中如何使用iconfont字体图标”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。