小程序开发遇见的常见问题

小程序开发遇见的常见问题

1. 搜索框样式设置
   
   . wxml文件中插入下列代码

<view class="container">
  <view class="box">
  <view class="search">
        <view class="searchItem">
          <icon class="icon-search" type="search" size="20"></icon>
            <input placeholder='请输入订单号'></input>
        </view>
    </view>
  </view>
</view>

.wxss中插入下列代码

.container{  width: 100%;  height: 100%;  display: flex;  flex-direction: column;}
.box {    width: 100%;  position: absolute;  top: 0;}
/**搜索框icon的样式**/
.icon-search{  height: 42rpx;  width: 42rpx;  align-self: center;  margin-left: 10rpx;  margin-right: 20rpx;}
.search {  display: flex;  flex-direction: row;  height: 98rpx;  background: #efeff4;  align-items: center;}
.searchItem {  display: flex;  width: 100%;  background: #fff;  flex-direction: row;  border-radius: 10rpx;  margin-right: 20rpx;  margin-left: 20rpx;}
.searchItem input {  flex: 1;  font-size: 30rpx;}

2. 字体图标icon的使用问题
   参考这篇文章微信小程序使用字体图标
   运用效果如下图所示
   
   代码如下
   .wxml

 <view class="weui-tabbar" style="background:white">
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on">
      <text class="iconfont icon-yijianqujian" style="font-size:50px;color:#31c1fd"></text>
      <icon class="weui-tabbar__label" bindtap='scanCode'>取件</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <text class="iconfont icon-jijian" style="font-size:50px;color:#31c1fd"></text>
      <icon class="weui-tabbar__label" >寄件</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <text class="iconfont icon-jisuanqi" style="font-size:50px;color:#31c1fd"></text>
      <icon class="weui-tabbar__label">运费计算器</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <text class="iconfont icon-yizhan_o" style="font-size:50px;color:#31c1fd"></text>
      <icon class="weui-tabbar__label">我的驿站</icon>
    </icon>
  </view>

.wxss

@font-face {
  font-family: 'iconfont';
  src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWgAA0AAAAACyQAAAVJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCYhEICok4hxoLEgABNgIkAxgEIAWFCAdfGwwJUZROToPsiwObyNgL9YhiDG1xo9NRmhObiJ4oZX1ueLI+9WP8QX8LKlrL6tk9pFfRLDywJfZsNKDwsVEROkLHsVKBh//93J2i0dtrmETTUBe/mJREguhtjUxepRF3OvDw7Xy/dWPYyLubWJfNhhyOIEngD7WpB9QhpeoGqaeriSSbA6nakqnJL+vMi7P+Ym1VxBP1GrZYJRRqFvXsSUSnUwJDJIm/eDXJhMh8SR/qt/qLeTWT+PYJCKDdfHxuxACfz19N+ugOyMEIGHEi4oEBVfQJYG+5Ajyjn9fmOGbBBAfS3vV2r3O10D1BenbHAoqantBonaAdi6GP1aJ+o28e5GLGr4W1+W60dvxP/idQp6//WP9c36a+u3RNhzKis4tpVAAD/x5BfMrEUGKkWv4IGtAPwv52npMy7qeFliakoaurhWnJScILY5iCghpLqYarks8wfL5yHt1JpXAtSIZRStpzTydz8rhz08LI8LJREkUpJVmLSHpBmaD5qmy+kJmnyqg0M5RyxshB08AN2Jz799l37xJ37oRBwt269+6RzLEmde40B5d+2VPHeUe1QSeNEntPaoPpO0Eyi5csSMGcpaqQZ66cgu4/rgsxAhVycRsEdTFcCsC7DFdJiRpWJuiDHBR00jy+KoTy+F2MjAzE5DoASA13J11BqtFUZ2UcVQZRTYynaSoJifwuRCkugXkX5QZZ7hEtsYmjzvj+47rik8caMUaggrAgDOELVVlN1LISFoqw6M3KhX2IWm1l+/NbQOedO/dsli9wL1lsYfbfg6C8zRddeZ6wLHIQ3XvZkp/Lu9wiCyZu8k7rQihHPJl2WxdB4c4dRqVWLe6CkCpqXoZ7SaMRw/AF78CiCsBrX3HHhV5HmcYd1ssGoY36AVo63hUK1XoHIraHmJVFeTjexO029B37YzK6v2S66reLdAjfUX/8xZrWEikpdsmcw+3vP6cFXzsY3oMUykEmytPVqLDei/b8MuasB7FbGzPgDLitEWIDf88czZC+q6qwX0ZqMBwCp6dCfubPekI0sSMeUkBEoc+QCdgR/uU6Q0EHNKJjpp++eGI6tt3cmnSs864b4ao+tRPBB1kmp3+53u1QmcD+q33A9hQW5snnORaIscd2bKkGF+5jYqQEcgLJmGhpgbxAOjpGMqSQkkQQbDA5LQVqKXOB/TERgR/GCdEViypHHEbLka6Idgnx4Pmkt/qHwVuYu2jUpHBWCJzTb9rPwYkVjsZtDJT9YVV/4qgR0+yoZG3gJsA54e5dS/uAeNVozWqLsoA2jWrn++LV7P0t7x5Pk64HjsZOpLOLA6iXVs8PygcOuzrJuwgIW0EsLC2QFeJvBwgWQDvL1oA0sM3SBkkN3UGyFMLPuYfrYe4nUdyNKQAgILyJ/RepOjubeZblh13kCTd7N4gZAGEpnbkC4OZCZvPV+T7gMeubeWNeEYjdkAIwkErBP0BrSsc72JVBYttgIlfgxK7RHv8Cgcw7hGJ/kJqJm8szXTxxVBNgGgikdgOmdAJOrUB7/CMERsYQqv1Aatff4cx4hOYtSRkUucmrE1SNoEMTCZkTcvNI7xeJ1m3RfwU6U0pH+uWwyWAp+BQpvgpYa/HaOcFdhlTGyReO7DvE9YTxj/YPq6LX1GH1ivN8TKZkOZbLmQRTKhIQHppYZfD5IkKcforLoMnt41FUclZax3luXoEQPXctugyQfaHaDaftzxY7ceCA2bJ7n9anlstDrVlZtMMq2ap7SSl0vFcsTE5egcLw/FHDSrjYWKakIBSzhDErAgZnmEJqbc2sZZIiAAAA') format('woff2'),
      url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAfsAA0AAAAACyQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAH0AAAABoAAAAcjtOL1UdERUYAAAewAAAAHgAAAB4AKQAOT1MvMgAAAaAAAABDAAAAVjx5TbhjbWFwAAAB/AAAAFQAAAFizP+8Jmdhc3AAAAeoAAAACAAAAAj//wADZ2x5ZgAAAmQAAAOyAAAEuNvhLBhoZWFkAAABMAAAADAAAAA2HE6ozGhoZWEAAAFgAAAAHQAAACQHoAOFaG10eAAAAeQAAAAXAAAAGA1nASlsb2NhAAACUAAAABIAAAASBJwDAm1heHAAAAGAAAAAHQAAACABHACUbmFtZQAABhgAAAFJAAACiCnmEVVwb3N0AAAHZAAAAEEAAABfonr4KXjaY2BkYGAA4oMK0dbx/DZfGbhZGEDgzvRNaXDa7v8B5kPMzkAuBwMTSBQAL9gLUHjaY2BkYGBu+N/AEMPCAALMhxgYGVABCwBVXAMuAAAAeNpjYGRgYOBg6GDgYgABJiDmArP/g/kMABdQAbEAAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PuF8fY27438AQw9zA0AAUZgTJAQDqugyxAHjaY2GAABYItmPYw+DAsJphNQAMJgKdAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHAxMDyjPuZxrPwZxteH/v/n4EBmSf5Q/KO5DrJMBFHqAlwwMjGABdiZAISTAxoChiGPQAAIA0VoAAAAAAAAAAAAHgA/gHIAgQCXAAAeNpVU1trG0cUnjMzml1pddn1anclWRfvSpUUy0jRytIqsSX5EuxCahVSTNOEOinkoYZC81La1LT0JWlp/0LyEOglOBTat5om4DalUCh501NI3gr9AYU+2Fr3rBycdNk55zszh/PNfGeGcNI/GrNfWZxESZWsknOEgFOBOvTBAjMpdKeBQQJEucLKHQvyEMcoGEKq5KEAZmeAuQPoeOUKlIWl5ycB1ULcv8RBjnL4NiQ72ak+ldlebV3a4HWbhbMqM/P3JJVf1bIfJtJyX3BxVS6o9xKcxQ//jXDY4EVrL3wASxxuciUM3N8JKWH/YeE6Y3BePVWnCyVH9XcSOSslV2lU+nkG9iEeux6B8INEilc54xLcDDFl/FvKCJ/nZYIfIw+O9tkqWyJp0iVvEqL3wcuDFQepjagOFURJ0zLq4PXBRZA0WxYmGDhfrEMDynjgjlsAvYX57WCmDj2YLzvC0CplJxCngDL9Tj/Z2vqUwqKbzlG2tbb+Ns2n3cUvobFeB04P7Fmgw4Wnhb5+W2cmT/VSka+elhoAeuzAyKqpxLakSXgAcVup0vcu3mDsxsWVa9k1s19dvszY5eVTg+Ra9ppeajRKdyjvym3np4XXAXKpHzJ9i5tmxP8bGsW9uMW7Idu8E1XVqP/athBcNuQfYzpqESFLR4/YL2yVTJMK9v4Ncom8Q94l75Md8jkq08Kzux2v3XI78+Ua4FkdkYOiI5LmKxO7AMEKSAjdAViYPN8AD6dQBZRCJC2wHSFpKJ+NYml1ABsV1uy2rWFso1SSPYlsTIHnPEFl7yX8x1BRFdgIK0p4AxAOEdGPHsmKIgdm/Hggogkx6IlEVCz2RFQVvYFQlRD9ZjxtzwHM2fSvifff8u+qJsAt/2MwVbgC36Pz707iK7jgPzkp+sLQtWEAh4qmnIAKDvz95UHAOZhwIrMaDZhxL3Rzzn6Z+/C7CV9lwnL4z2QPFbiFk+Pt41IfHDtCKLlPamyTjohGivgWjWQcyngnncAEFw2vlud6mq2ZLbODN9ftsE33wjCleyvdqdTwggv7WtduFce7JdfualPeOY+ORrXVVLY4nc9PF7PpldrI/zqDr9v/E9oWWJmMZeG7OOa9TyxSwpdBwDaC4tj9/3utpSWxpTY2s61hA4vOyfYCaNisNt6F5qunoQann9smzFr6eFe36GbYiM2cVbUzK2c09exMzAhTQj8blZrN0uzsCwvkiOSaqv8MHLWZA+J/wUK5TCYXjBB7Rsh/XOrMYQAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOOMCiTIxMjMyMLIysjGxsWZlZmYl5PJVgqrAURHJkZRaXAjmZbJWZVRlAPoSKzwcAiyYRMwAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAcAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPSd6ZvSYDQAQqEGwAAA') format('woff');
  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-jijian:before {
  content: "\e60b";
}

.icon-yijianqujian:before {
  content: "\e628";
}

.icon-jisuanqi:before {
  content: "\e657";
}

.icon-yizhan_o:before {
  content: "\ebc6";
}

.icon-yizhan:before {
  content: "\e6b0";
}