【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程

今天药忘吃喽~ 2024-03-26 18:42 5阅读 0赞

> **介绍**
> 
> 这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！
> 
> 以下为小编最喜欢的两句话：
> 
> 要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。
> 
> 一个人为什么要努力？ 我见过最好的答案就是：因为我喜欢的东西都很贵，我想去的地方都很远，我爱的人超完美。因此，小编想说：共勉！

--------------------

**目录**

前言

一、步骤

1、下拉框实现

2、下载阿里巴巴的icon图标以及整合到微信开发者工具中

二、下拉框实现

第一步：创建包

第二步：右击pages==》新建文件夹==》components

第三步：接下来使用以下包来进行操作

第四步：test包中的代码（创建一个组件）

test.js

test.json

test.wxml

test.wxss

第五步：select包中的代码

select.js

select.json

select.wxml

select.wxss没有写任何代码

三、下载阿里巴巴的icon图标以及整合到微信开发者工具中

1、官网下载 iconfont-阿里巴巴矢量图标库

2、搜索图标之后，悬浮，加入购物车

3、加载至项目中

4、下载以及复制css代码

1、查看css代码

2、复制页面代码进，wxss

5、如果需要上图的第四步，那么进行以下操作

1、进入转换代码的官网，将@font-face转换成Base64 编码

2、解压阿里巴巴icon的压缩包

3、添加字体

4、下载

5、将style.css替换wxss

6、将图一stylesheet.css中的@font-face替换图二的@font-face

--------------------

## 一、步骤 ##

### 1、下拉框实现 ###

### 2、下载阿里巴巴的icon图标以及整合到微信开发者工具中 ###

## 二、下拉框实现 ##

### 第一步：创建包 ###

![5990ab1f145142b68b43728e33926e2d.png][]

### 第二步：右击pages==》新建文件夹==》components ###

![08eba582bb6d48b98d4b475e65e7191e.png][]

再右击components==》新建Components

![dc12ff8139ed4d9999965a647e959681.png][]

### 第三步：接下来使用以下包来进行操作 ###

![687c88514dc847559492903a2938b0f5.png][]

### 第四步：test包中的代码（创建一个组件） ###

#### test.js ####

Component({
      properties: {
       title:{
        type: String,
        value: ""
       },
       nameList: {
        type: Array,
        value: [],
        observer: function(){
        //有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发
         this.processData();
        }
       },
       nowId: {
        type: Number,
        value: -1
       },
       nowName: {
        type: String,
        value: "",
        observer: function(){
         this.setData({select: this. properties.nowName,
          selectId: this.properties.nowId,});
        }
       },
       placeholder: {
        type: String,
        value: ""
       }
      },
     
      /**
       * 页面的初始数据
       */
      data: {
       selectcontent: [],
       changable: false, //箭头切换
       select: undefined, //选中的值
       selectId: undefined, //选中的id
      },
      methods: {
      // 下拉框收起和展开
       startChange(e) {
        this.setData({
         changable: !this.data.changable
        })
       },
       // 选择数据后回显
       changecontent(e) {
        this.setData({
         select: e.currentTarget.dataset.datavalue.name,
         selectId: e.currentTarget.dataset.datavalue.id,
         changable: false
        })
        this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参
       },
       //处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。
       processData(){
        let options = [];
        let that = this;
        this.properties.nameList.forEach((item) => {
         options.push({
          id: item.id,
          name: item.name,
         });
        }); //forEach
        this.setData({
         selectcontent: options,
         select: that.properties.nowName,
         selectId: that.properties.nowId,
        });
       }
      }
     })

#### test.json ####

![9f1f6bc0d02f4d1ea2179206293e6882.png][]

#### test.wxml ####

<view class="select_all_view">
     
     <view class="select_title" wx:if="{
       {title}}">{
       {title}}</view>
     <view class="select_view">
      
      <view class="inputPlaceholder" bindtap="startChange">
       <text wx:if='{
       {select}}'>{
       {select}}</text>
       <text wx:else="{
       {select}}">{
       {placeholder}}</text>
       <view class="jiantou1" wx:if='{
       {changable}}'>
        <icon class="iconfont icon-xiajiantou"></icon>
       </view>
       <view class="jiantou1" wx:else='{
       {changable}}'>
        <icon class="iconfont icon-xiajiantou"></icon>
       </view>
      </view>
      
      <view class="content" wx:if='{
       {changable}}'>
       <view class="{
       {item.id==selectId ? 'active':''}}" wx:for="{
       {selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{
       {item}}">
        {
       {item.name}}
       </view>
      </view>
     </view>
    </view>

#### test.wxss ####

注意：小编的已经引入了icon的css（可以根据你心仪的图标来，下面会讲到操作）

.select_all_view{
      display: flex;
      z-index: 999;
     }
     .select_view{
      display: inline;
     }
     .select_title{
      margin-right: 10rpx;
     }
     .inputPlaceholder{
      min-width: 300rpx;
      height: 45rpx;
      background-color: rgba(255, 255, 255, 0.5);
      border: 1px solid #DEDEDE;
      padding: 4rpx 0rpx 10rpx 10rpx;
      color: #252525;
      font-weight: 400;
      border-radius: 10rpx;
      position: relative;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
     }
     .jiantou1{
      position: absolute;
      right: 10rpx;
      top: 8rpx;
     }
     .content{
      position: absolute;
      z-index: 999;
      min-width: 280rpx;
      max-height:270rpx;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px 1px rgba(88, 88, 88, 0.8);
      border-radius: 0 0 5% 5%;
      padding: 20rpx;
      overflow-x: hidden;
      overflow-y: scroll;
     }
     .content>.inputPlaceholder{
      padding: 10rpx 0;
     }
     .select_view .active{
      color:#46678d;
     }
     /* icon标签 */
     @font-face {
      font-family: 'iconfont';
      src: url('iconfont.eot');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'iconfont';
      src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'),
          url('data:font/woff;charset=utf-8;base64,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') format('woff'),
          url('iconfont.ttf') format('truetype'),
          url('iconfont.svg#iconfont') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-xiajiantou:before {
      content: "\eb6d";
    }
    
    .icon-caidananniu1:before {
      content: "\eac2";
    }
    
    .icon-xiaoxiduihuakuang-:before {
      content: "\e671";
    }
    
    .icon-huabanwang:before {
      content: "\e602";
    }
    
    .icon-tupian1:before {
      content: "\e601";
    }
    
    .icon-zhuti_tiaosepan:before {
      content: "\e604";
    }
    
    .icon-cangku:before {
      content: "\e614";
    }
    
    .icon-erweima:before {
      content: "\e65b";
    }
    
    .icon-liebiao:before {
      content: "\e60d";
    }
    
    .icon-qianbao:before {
      content: "\e645";
    }
    
    .icon-dunpaibaoxianrenzheng:before {
      content: "\e600";
    }
    
    .icon-dengchu:before {
      content: "\e603";
    }
    
    .icon-shutiao:before {
      content: "\e727";
    }
    
    .icon-weibiaoti-:before {
      content: "\e60e";
    }
    
    .icon-yanjing:before {
      content: "\e857";
    }

### 第五步：select包中的代码 ###

#### select.js ####

data: {
        curfId: 4,
        fruits: [{name: "苹果" ,id: 1},
        {name: "西瓜" ,id: 2},
        {name: "李子" ,id: 3},
        {name: "梨" ,id: 4}
       ],
       curfruitName:"梨" ,
       title: "水果"
      },
        changeFruit(e){
         console.log(e.detail.selectId);
         console.log(e.detail.select);
         // process();
      },

#### select.json ####

下面的路径为组件所在位置（组件是键值对的形式，名字可以按自己的习惯取）

{
      "component": true,
      "usingComponents": {
        "my_select":"/pages/components/test/test"
      }
     }

#### select.wxml ####

键的名字即为标签（可以说是自定义的）

<my_select 
    	nowId="{
       {curfId}}"
    	nameList="{
       {fruits}}" 
    	nowName="{
       {curfruitName}}" 
    	placeholder="请选择水果" 
    	bind:handleChange="changeFruit">
    </my_select>
    
    <my_select 
    	title="水果"
    	nowId="{
       {curfId}}"
    	nameList="{
       {fruits}}" 
    	nowName="{
       {curfruitName}}" 
    	placeholder="请选择水果" 
    	bind:handleChange="changeFruit">
    </my_select>

#### select.wxss没有写任何代码 ####

![e10b1f9d73e544d68248e5f42d605253.png][]

完成以上步骤，就会出现一个简单的下拉框

出现下图即为成功

![554552e2f9634a03bbaa1633b932bc9a.png][]

## 三、下载阿里巴巴的icon图标以及整合到微信开发者工具中 ##

### 1、官网下载 [iconfont-阿里巴巴矢量图标库][iconfont-] ###

![aec9feed7cd74d2e9a70ae283685bf06.png][]

### 2、搜索图标之后，悬浮，加入购物车 ###

![8f37ba50ad72454b87fdadebba05ed78.png][]

### 3、加载至项目中 ###

### ![72ab2763d81b489aa2e0a60bd59e8ec5.png][] ###

### 4、下载以及复制css代码 ###

#### 1、查看css代码 ####

![fc401fa8d2d14a7388a4db74e72cd1df.png][]

#### 2、复制页面代码进，wxss ####

![34894c5237e24bed92f5237b4f741a30.png][]

### 5、如果需要上图的第四步，那么进行以下操作 ###

#### 1、进入转换代码的官网，将@font-face转换成Base64 编码 ####

[在线@font面生成器 — Transfonter][font_ _ Transfonter]

![6d7cd3f7216147fa9eff90c3f943c7a3.png][]

#### 2、解压阿里巴巴icon的压缩包 ####

![b001dbe470ac43feb1365b2820ddb8fa.png][]

#### 3、添加字体 ####

![e93dded12e84408c830890047db8e08e.png][]

#### 4、下载 ####

![05a3193a5817491c8f4c87ade576c6b9.png][]

#### 5、将style.css替换wxss ####

![1e1b09317047443d943e934406ded3b6.png][]

#### 6、将图一stylesheet.css中的@font-face替换图二的@font-face ####

图一

![1f13f80069b94127864812bb5c56cc14.png][]

图二

![5a34c179e8f54f53baf990f139c3d61e.png][]

![ba7243566b2b42e9bd48a1c65a7beec7.png][]

这样，icon的图标就会显示出来了

以上就是小编所讲的全部内容，希望各位大佬可以多多指教！！！

[5990ab1f145142b68b43728e33926e2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dc0fb1eea53e4d0f930fcdc9c89cb339.png
[08eba582bb6d48b98d4b475e65e7191e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f1bcbd8ffec40e8bd66786090f24651.png
[dc12ff8139ed4d9999965a647e959681.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/912b0f4ec679472fa732e20df463b050.png
[687c88514dc847559492903a2938b0f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/74d9eb1ea24049b8bfaf15fc7230a4b8.png
[9f1f6bc0d02f4d1ea2179206293e6882.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/993956d24ca145879c3e89aacc7aa548.png
[e10b1f9d73e544d68248e5f42d605253.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aff8dcde92a746e99908e8054874dbd1.png
[554552e2f9634a03bbaa1633b932bc9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d01cf6aaa046476f907d02af26233b96.png
[iconfont-]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[aec9feed7cd74d2e9a70ae283685bf06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/29da9fc06eb34611ba5e5b29e4f148e9.png
[8f37ba50ad72454b87fdadebba05ed78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b8a7f70503c64f228874511d51586155.png
[72ab2763d81b489aa2e0a60bd59e8ec5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4b776f18dfac4a67ba6c50ca7ab3e31e.png
[fc401fa8d2d14a7388a4db74e72cd1df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/28111b0dfbf148f4bead5a628e2bb349.png
[34894c5237e24bed92f5237b4f741a30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fdd8a6ae525e42ce8b09a19491cf7e3b.png
[font_ _ Transfonter]: https://transfonter.org/
[6d7cd3f7216147fa9eff90c3f943c7a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/872ecaf54f3b43a18b94fa26961fe54b.png
[b001dbe470ac43feb1365b2820ddb8fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4997e15fa6ff4966879adc7c0d6d7038.png
[e93dded12e84408c830890047db8e08e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e5fb8002b3ea441d84f11a2e1c0d0938.png
[05a3193a5817491c8f4c87ade576c6b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/735a32e7f46645629f69d21bf9e0ff49.png
[1e1b09317047443d943e934406ded3b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e14bc1834e1c4780851ed92d73a87241.png
[1f13f80069b94127864812bb5c56cc14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a38136c76e3d4dbabd4bf499d56d47e1.png
[5a34c179e8f54f53baf990f139c3d61e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/30b9b0becf7749c799f8a367fa2cb0ac.png
[ba7243566b2b42e9bd48a1c65a7beec7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fa183508ecaf4ccc937b0352930c99c7.png