How to configure Iconfont on the homepage layout and applet—Introduction and actual combat of applet (7)

Posted Jun 6, 202011 min read

4-1

After studying the previous chapter, we have built the entire framework of the project, and the prototype has been established. Next we just need to pile things in.

Design draft URL(valid for 14 days, valid if expired, please contact me):
https://lanhuapp.com/url/Airvn
Password:I4DA

Analysis of homepage design draft

Write code must pay attention to details and structure, get the design diagram first analyze what should be done, what modules should be, which modules can be universal, must be written after design.

image

As can be seen from the design draft, the picture is transparent. After communicating with the designer, and still carousel, slide up and down. There are two tabs to switch between "HOT" and "Clothing Circle".

Below is the Tabbar tab bar, there are 3 tabs of "punch", "+" and "me", go to different pages respectively.

On the right there are "Avatar", "Like" and "Share".

Introduce two official components of WeChat Mini Program.

  • view:view container, equivalent to div.
  • swiper:sliding view container. One can only place swiper-item components, which are often used to play carousel images.
  • image:The component used to put pictures.

Below we use these two components to write the screen rotation carousel

 # index.wxml code

<!--A big box encloses all the elements-->
<view class="container-fill">
<!--Wrap the swiper component-->
 <view class="scroll-fullpage" style="height:100%">
 <!--swiper component usage, only the swiper-item component can be placed in it. The carousel diagram required in our project slides up and down, so setting vertical="true" means that the sliding direction is vertical. -->
            <swiper circular="true" vertical="true" style="height:100%">
            <!--Put two swiper-item, which is equivalent to two sub-items, slide twice -->
            <!--First subitem-->
                <swiper-item>
                <!--swiper-item component can put anything inside, we put pictures here -->

                <!--src represents the url of the picture, mode is the cropping and zooming mode of the picture, aspectFill maintains the aspect ratio to zoom the picture-->
                    <image mode="aspectFill"
                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590745760463&di=50d76742c6cb334acdac656a930c52e7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%092%2019%2Fitem2 .thumb.400_0.jpg"
                           class="slide-image">
                    </image>
                </swiper-item>
                <!--second subitem-->
                <swiper-item>
                    <image mode="aspectFill"
                           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590747427893&di=9fa9371dfd6f8ffcd062b18eeff58ec5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2019-09-11%2F2019-09-11%"
                           class="slide-image">
                    </image>
                </swiper-item>
            </swiper>
        </view>
</view>
Code analysis vernacular(the comments are quite detailed):
  • view is equivalent to div and is a container that cannot slide.
  • swiper is a slideable container, vertical = "true" indicates the sliding direction is vertical, circular="true" indicates the use of joint sliding, if you do not understand the joint sliding, you can remove this attribute first, and then Experience the difference.
  • swiper-item is a slider of swiper, if you add sliding content, then add it in swiper-item, the width and height are automatically set to 100%.
  • The image component is placed in swiper-item, among which the mode attribute is most commonly used widthFix, which means that the image is 100%wide and highly adaptive. I feel a bit like the background image.

The above is the code for wxml, followed by the style.

# index.less code
<!--Put the big box on the screen, please remember this method
Use the fixed positioning method to pass the screen. There will be no white borders on each model

If you are not familiar with less, go to Baidu to have a look.
In fact, it is the feeling of nesting.

In fact, the selector here, for example:
.container-fill {
    .scroll-fullpage{

    }
}
It is equivalent to css:
.container-fill .scroll-fullpage{

}
-->
.container-fill{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
  z-index:10;
      .scroll-fullpage {
        height:100%;
        transition:all 0.3s;
            swiper {
              height:100%;
              image {
                width:100%;
              }
            }
      }
}

Tab bar switch "HOT" | "Clothing Circle"

The Tab bar is definitely not part of the carousel that can slide. So we need to place the Tab bar outside swiper, which needs to be at the same level as swiper.

# index.wxml code
<!-- Divided into 3 layouts, use the telescopic box -->
 <view class="title-box">
            <view class="active">
                HOT
            </view>
            <view class="line">

            </view>
            <view class="circle">
                Clothing circle
            </view>
        </view>

<!--Use fixed positioning and telescopic box-->
.title-box {
    position:fixed;
    top:0;
    width:100%;
    font-size:16px;
    color:#ffffff;
    padding:10px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    .line {
      width:1px;
      height:10px;
      background:rgba(255, 255, 255, .4);;
      margin:0 10px;
    }
    .circle {
      color:rgba(255, 255, 255, .8);
    }

    .active {
      font-size:22px;
    }

  }

Bottom Tabbar

# index.wxml code
<!--Use fixed positioning, the same level as Tab

Use dispaly:flex
-->
 <view class="tapbar-box">
            <view class="bar-item">
                <view class="name active">
                    Punch in
                </view>
            </view>
            <view class="bar-item">
                <view class="name">
                    <view class="iconfont icon-fabu submit"></view>
                </view>
            </view>
            <view class="bar-item">
                <view class="name">
                    I
                </view>
            </view>
        </view>

# index.less code

.tapbar-box {
    display:flex;
    align-items:center;
    position:fixed;
    bottom:0;
    width:100%;
    padding-top:10px;
    z-index:2;
    text-align:center;
    font-size:14px;
    color:rgba(255, 255, 255, .8);
    border-top:1px solid rgba(255, 255, 255, .2);
    .bar-item {
      flex:1;
      position:relative;
      .name {
        display:inline-block;
        padding-bottom:10px;

        &.active {
          font-size:16px;
          color:#ffffff;
          border-bottom:2px solid #ffffff;
        }
        .submit {
          font-size:30px;
        }
      }
    }
  }
Code analysis
  • Fixed positioning position:fixed
  • Telescopic box dispaly:flex

Both of these attributes must be used skillfully, and this piece of code can be reused, so we can later encapsulate this piece into a component. After writing the homepage, I will teach you how to package custom components on WeChat applet.

Avatar Like Share module

Avatar, like and share modules. Think about it, is it at the same level as the carousel module or is it in the carousel?

Of course, it is in the carousel picture, that is to say, it is put in the swiper-item component, because the dynamics of each of us are different, experience it~ douyin can understand.

# index.wxml code
  <!--Left operation bar-->
             <view class="left-operation">
                 <view class="avatar">
                     <image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591088302&di=d6211696ac35296b0e485ce3aa715e21&src=http://b-sslup.01/01 /20190110004111_dgsxc.thumb.700_0.png"></image>
                 </view>
                 <view class="operation-item">
                     <view class="iconfont icon-dianzan"></view>
                     <view class="num">5</view>
                 </view>
                 <view class="operation-item">
                     <view class="iconfont icon-fenxiang"></view>
                     <view class="num">Share</view>
                 </view>
             </view>

# index.less code
<!--We will use absolute positioning to center this sidebar-->
.left-operation {
      position:absolute;
      top:50%;
      right:15px;
       margin-top:-117px;
      .avatar {
        width:44px;
        height:44px;
        margin-bottom:30px;
        image {
          width:100%;
          height:100%;
        }
      }
      .operation-item {
        margin-bottom:20px;
        text-align:center;
        color:#ffffff;
        &.active {
          i {
            color:#FFE600;
          }
        }
        .iconfont {
          font-size:35px;
          text-shadow:2px 0px rgba(0, 47, 167, 0.61);
        }
        .num {
          margin-top:5px;
          font-size:12px;
          text-shadow:2px 0px rgba(0, 47, 167, 0.61);
        }
      }

    }
Code analysis
  • Use absolute positioning to center the sidebar

      position:absolute;
      top:50%;
      margin-top:-117px; //This is half of the total height of the element you want to position
  • You can notice that I used iconfont in wxml, so we will explain how to configure iconfont in the applet

Configure iconfont in small program

Since you don't have an iconfont project, you can find me to compress the package.

  • Create a new font.wxss file in the directory src/assets/css

    @font-face {

      font-family:'iconfont';
      src:url('data:application/x-font-woff2; charset = utf-8; base64, d09GMgABAAAAABYQAAsAAAAAJmQAABXBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGJgq6BK01ATYCJANsCzgABCAFhG0Hgk8bFB9FRoaNA6DA8xjZ/3UCJ/fC + rEOZwRDT9GjN0XMk8RiIhj0F58dvXLP/ZOKEIqRjrawJWHLe57CULjHMUMpj6c5 + 9l9bzebzSZssjFCnAQ/SgTVCqIplBNK6/+ 4HlWsklKFM2q0QHuf1qHqduaFf/h79dw/xuZQOMAR69i2BtewVJCKlorv/W9NTWr5y1AQGAoYLvJpiQeKcFrglkfX0WnfEyS8YEjsIiaLGNPhtum/F2LRaRudCViIE + C + l0aJ0NtGL/qlEr1IaSAtACBoc + ALOXlvGonPUWe6v6XfOYVDGGivsvYvPz1wYdzKPUi6huZS + 1hSA5KYYcbe3CV5OChcUroS50dJhvkfsaqumtATKkmBUQ3cVjVwcxPSdW7C + EFNHYfpossDLVajBmOzHa4asZA5bMrYPmNsQAAAC0YIAyIjK6cEGMBw7IgAAKJq + NBKYAQNcMFuApgcWtInTiBagAKGbCLPAMB34a8nXoOTYABIoBAcx1UwJHMQpDz7/DmDvB8MPkGNME0dlwCY9wcusAcP9C8t/RMoRvuQJLJkzDdLlXEyNTmKSQL63YmJlSe6uPh/+ fGFne9F0LJYTsPbdgdIiAgIEW1D/huvH8Zp7qo6xScjx6PAJcahBAWQOzMAHYGXu6JQEQmYXEQEphERgGlFhGCCCIFBRItJIhrMJKumCxg96ArGALqDMYIeYEygJxgz6AVGB3qDUYE + YNSgHxgp6A8RPlghIgMrReRglQgPrBZRgDWYLLVgxKAOmCY0QwolACvr4wA/8W96fcz + Ct0CTlxCUpwT8Z47uz0C5DMiUVqUO4g2OWMc16nnQzJ 7wfSyOHKTeC2DKuALSiUj8BQWMXIlLcKYUmWdBTn2obGao3iljDeuZLAUHlN8eZlUyaiCRTeRlRb5YspfwrLXXXzCMeY5nIjpMgXYdsUXNnzO4ODEYqPJj9HaZBwn55UhWM + n49RZLwaTDDM + LG3mtPJwlXojq8BSmsNzGWyaC2pls6n1R9l4Vl54ryFp2odxq6XqWfQ0HpcTR0sTKZV7rszAqhXtCVrvIa7IqhqLRv3IHuYASDCiYQbwFWMmvYjacu6csBZytkxowFgZE + lQa2udI4TDXKp7mTGEqLIQ3COAgbISj0ZjxSqPdGylUxZpc5gdXQAsRRKCKOewtJCNNIDAjJ/ftRMiiJ9g4S5CAEoA1DBxN2hzEHw21tTGFLOIhFOIUTHzlpboiCnBNWienh51Qhlkp58zFBHCWtCUQySZL2DuJjcYEwfXyEQxp4Yo + Yqadh1rBCwQSBAM2G6SMMoc7hZBM42YE4wQVKK5uiGUP6s5d2uQpogl0MYR4cg4MpISQE8Z9xHlqJX2qHOf66vkPs5a5kO41B2AzVmNvEzrHjgwolMRtTYbm80w/QYBhFJsUvYOYiERVqvbpBOxvmuT2/QgyW2R3durja5VtpvWTDKjBGZj3DypU1OmnBCD + 4t8I4yWewggfiSnT88SQB4hABGgJcqIc4Mk84TDEBrGRK5qT5Q5ZpjggigBSGwZCGJe5TAGZEUAbaU4lNiN + XZKtJymG2wIUFluYM8AQQgC4fNsrFGh5QRsLcbMSUwbMh6ms1fmZ4eEeXaJZENi7gpWzrvqh7qvhAAzihpJbX5YcCvZDWD8oL0HvJW/QxSZaHPdmMUVCUFJaLlGS7wkohpGsBqQkVbNDmOuu/U4YzcMpZaTmroxgF3Leg5LDDNQLYwRXSeZPidz8zoB6Jkor + 8AoBoapYOTHR7gogbzBR7Z9w1zYhAUJ3Bu5H + a5T5mcTsvAGt3tYMsAqKD5bn + rDV/mzUv2uhgBzX65Aa dWY + oEnAAbgwEp1c7KBJnn3vyagTCC5A/Y + uJbyVoWQDI9jrBMRtoftf2breYgImoGb8I9SrLmSw4kcLprhSVvpBa9jQzo + 3ZyvTKifzM9vGz8BqkErLAJ4osVlMvsM8W0LYdTuBWHlhu0gi8bJs0H3Suu9bskKcNM2KuctYYgiPOej7m07jURyVHY9e9i9OGAMmI/b4RO5cD24wSO/YZQw4dhCcJASeQBEKXoa0ddokfQrGS9mYIsemhx4dOal6PrPEW6wjqKcWafzZoOv2hkZqx8OAceQlR2qd0iqG9m0FH5pXF1BHV5YPBejNKM25seLNnLnmfCwH1jjUeGMnxc/NmC2fnzuQv1D9l41u1/q75601fbwFiHng6rgyIMLCyqpgfuntD1LvQzMebUdffmWhNbirD14dgjcSL/t16woW62JiqYtmyjLnBZCfsyjc/8zlUvQ902HyN8dPomZqQ48nIbU9q26SxPLAVADOeVUG2/mfw7DNjLH1Pen3PVvqr4oSrigOu30Iqf6rprZ19Q5m9g/+ 6G04/jree1L1jRSGmLG5E + myvEZrlU + WB/k/w/LIqMnRiCBIcT57M + vEiokLzYz59qFPs1JlEcy9y1UySU6IiITYPa2pSDWAsK5CYKksA8ShqmK/EJPtLMK/wxsLPpZpZCkmrqqzsnccD89l5g254ELqRyn3q6UF2INlluRXYHLbf/bs6Yr5R4oyTnNuYnnxI8c + BaJXFBfM1HNFfKaWEbhkEW/7V40X/RQodacvKydp5UwWswJKR1LB0fCVPEhMYk7PJ4KqstCWWGTJd4Hx4vM36LRjIt9Z/vyg3vL0E8dbCVWQ4LYxoz82eq7 + q2S1PEel9RpI4WXzQ/qBl6sjdWGR5DaufD + QFrgZE3qeadiw0LMqwDNS2FFmQMENR7 + iKQlsC/bFGsnnDmoGv8SIpnCirlYZlh8JzSW/GS37FjGHszHjRlYOHk1NpnHKCCJ34ZMCb3luxuiz sft + j9rDBJnycGFqTV0 //rRrUgX2ufZF8sqmyVVxzrdlvZP897fPCv9oFnWO/XI7m9/PK/lTd9BHh291 + x9ueP95K3v/CL/HeesKqhyviY6PN8BBvd/hWQ9/MPqsljT5TleNxx8nTlUfen + g8dVIPDo0R1X3m1BgpV0eG + eMfLYyrPnCQTBZBsxnP6mq9HAh5q + CLCCa9uPNC7R2M/2s9m3MD/SVah7nykE9E9QLd96HGxTfF6gC/oCOmFQ4AF2fEsPUv + Wkbz5yR9MOk6CwQpHenkt4PglgxUkKyQ3IYSDK4AfpzpLQSpIiDAcTAUG9QMMKo69VkqcTDJsz2bRg0ZNDYmqEcSEkJkhIcYgcIjKKNGlTC9l2trifSWqBONU/7fXQluRv9dR5/D/0 + mV0cG9bYkTOzFxesSrnTA82 + fDC/0TA47qT7zjgwODaMx + L4MBdNu7mpnVxMXt70fI1o + uWNi5EljWPqUs1fpEd4Jr2uV + 0K3hXSHdx9j1StDuoO2RW0GyxVP0viuYDz + HyANF7yhRWBRa74v8/3PRUWSxQWdYn5eE4zHmjgaDOJyR3KXi8vjQ9/weIGYuOYFaX/i7omIhhdb2gY1UOm7iiDlPcDHXTKzzBtfBdR20a068DFswhJ4qWT4mqZtIhpLKOYLnF/5EQ0R1H + g/yUX0o7xF9Jd8f1GSOm2HjOjv3t8Z3U9Dl/4QD/eVxLOXISSomAsYbiEUvLsIxAYpEUy6j0oE51J21GPNVfJEco6iZVgG3kWgyok5JSMpyBCgSEZiEhgKK4FKqaIOW4ml1Ki + XIjMXc4a8BTXQJRSKtlpJS0ogmqfMokrWQFpFAEDIRXZ2iQNgnCwjSyxRGLKOWNM9E3kzGcshbbcWyO93R6bSDkG1AVAFdRmmpQXMXsdTgTf35/jgSiVDRR0a0P8I0BtRCS3EG4RRhSlEzWnyBRoo0roVyWqm/sShVTgfRrDnTaT1IWalrWIN5kkqh9VYHOYW oC + h0Ozx9FUfRneoNVOc9CYLuj2ykfwSulnfykHgzxXTHU2LJwQgKIyzF/jQsGOam3fzN8yQ5Nq4CV1ZSU4nOoQxdb9cMZVbWyb8EkVwdh3tiqV5tw2aZ3maSiVsukKT0AMewpskmRV + 784I8Inehoo63KSPKXwuhnBUbdUZsVYQqUHCuUiTBEq7hGADBBKWPy7Qu8JQuwzqknj1TLu + OtArNSZg3WjDW + WE/X4wthhidSmdQ + arqZAqk4AQUipRcfEiuQh/NX4FRNMLpyc7o2Ogyi9NttToLcZwp7rGG1SCNRLMy/LyGkySmdUgnXa44CkadqFpGkFJObLBOCMNaC7ZY9TgRG6xWbG1TLbbpfHpEO3uZeZV55Gws7SaFkl70csVeqgn7MpjxXXmscu4IKpsK + yrZJrkFrJZ0BdFJARJJRbQYs2KWF9NyREaAGgWKAjI/jojNCGLVWMNiCoNdAnWWJlJkkUW7ixXzszrVauCLHJmC3FLPE77I908HGSVEBIarebVLxsiMFlekVeGaQOuwTjBgA495pU1JRFR0gKr7RquFUfrHUPrjXthSaS4pthZ7vgb5OP/BzlQt0vqkoFlKFCHTYI1MYcTYgrFRkP0kt8pXONodFRXpmcpMe46Qk2BLjZiYolSrbix03XXvmRAfkK5Mt1cK54RyE + e653qtTSV7CrHr + kUq3gUQp3i/Gfo02f2i9LAlgUpFnVT0bpBnUKGPO9V9fCo/NaRjHiZoUQrSNXlEK9ZsS1xjFQl0teLDK4Ycjyo5Olnoa0sX0u3ukKCYGJvWvk7j/jtyeBVy + lcIaaY1D5Po11 + j1oDrsrf + wQxZtWzGgzBVeLw/gbfoLTz77GXe + t/rIVkRUPxzZs3X8VW2sQy7IjPn080L5vnMlLaOykqTpo3Nmst/I2vtqtiUnrNKkjLXnVg1piXrp + Pfi4YRmhFY52xqCaXmuAeHKUcMJzQT3nncFXFZkYPCtF9+Gh3LNfLTKGp RbGrkoJis5L0TH30rq8QXsWfdunNlP1DLbDsrlTaZU7m3UuuOTh12rz13I7HH6B4woDF1kWWopSt1jP + Y1CF/uIfWDDmo6RXyd2zDreKR6v9NtUxNrfWv/XVexkdVA/0bAkJHpY6tu9Xmn7X03zUuw61P6nOGTPlcc8lkz/DLnVVTLhnZb6Rh7Jx1cw7tNjwzPO1lCDPJ2n64KaqStFzREjlNZdGjLcuTyvCWzWWbS/+ IjHsf1KtPQOoYy9ikVsuIihEBc6e5mJxdPz5HsFau00lGA0DS6Ofnz50HM/LeoMxm6gbggH6Mz4RprXFP9ZPIdnYsWtjRZfRw7QvbOxZ2G0uMXZkhv21acG9hO0T + kKRPdztLHP9kaly7e4yamIfLykb1mAg6Hv4D7nralaH5p8Rh9cQ25z4YHYbIE8KqSkqqwmoBDd4uE2CI/xCA3EHZxIDGxgFkgKURAzgMAN1Ab8HYndCV0JbQ/sDYDnB ++ 91zCqqXlSVusp7WO7lwnxKZ64dw77Iy68mkLZxlQwHvNrkcLQ8choAH7/wvRHCxPcWpeyU1Ph6p + 4eazvM/3g + J7ZW11AtZjjf365ki5kH9zvDAxzvenJbnJf3w24Uc98lbK30/mj6kn + aSqNRYKrpUb6e0GrhorWlpqbFehL + F5/YEpzlXmlZOd8OxHau5H7gYDiSrV3M + 0bMyQwT8M2eUxh/VHo2XGs1tgQvSfoy9INxam8BK + Qe61HLplE2BTfGF7J2ADtvZuppxX55F7Y7bbS136Ttww/Sn0Iawsk35J4XesokS7gXerak9bT8dEnLWdjb9jP0MTRUVvw30ja22S7dW + VYdldr72NH7Olfas7F8Qd3IXl09lH4tGlI9r3pc0OvAGnJKn3m/mv7zWqv90Oqg1cgv20+5OniC+ogAq9KvOvVQQZ4ps9AWkRfRJphcYkiSryKF1mmc9JJHD7 lthsLE/lBmftcqQnant3hXEIrC0lP + 0X2 + Hdb3dd1G3ht6PDcJTSt2Jg4W0nhK2y5WIzC9ASekDW/89ASTTdxobPpRqiJYXl3EWNVN37admXd0SWR0bJyjc/hytVJKoi81v9d + Lv + Pt ++ NLz4toujHij8GWLn/dMC + 34zpdy/wnbuM1uDC3xHH1Q2AMpSOhPT1IcVPDOnOFdTNOwze7n1a/kOcXT4h3pvu5lrKDSX5/fSPrk2KlXe7jdzWNzXkFOUMXfljVxjkWlzoSnPeGJ7 + ryl4O1zOPITo6t0Ra8EQ + 3u0ROdhhQMpiWH57W6/vvq23fOWa1zO4bCwJrVvLV5KFVZ59ky2dmvors39cCVmOLZuPVtWlpt0sIf5rbzUDxpwgRwWCL4CeO3iY + wRhATjtY9lRcPKTTmxCrX8pcOFp55wmbcxHn4ZgCgH + PDoy47z + SZC62bCi15lro6c561cJNlcn9dXZ65wLq50NqKpOeNaZ3zYecP6Qxjhs8PspoHO2NncHtr8qPbS/AJieTkjOMBMcSTHHuCGgKfBF9r373rap5/WRd69AiZsfvRwy7cjZki6s6L + XZYu7RNzvvvOdl + oZjrAJ8po/dY9mzduHn7mP4Cy + lzl + QAe6xnLp3b7Q/e4OazZ8 + dbQ6OfHi + dX5rQSsJ5DuDFwAayeF/lalT07zrEl0GhG72Ns85F + jxDN42x2PxfI/PyHjZLoEUVHLo3 + BPf6tK + qLJ/GVzctVvn367AZJH1xYWFRXKv + wueLSQiWM8/ugW4AXqeHx6bxcAfJiNn6o0fvCiGcj7wROTMIkaxQJMyOITAxLUSHZP + iA45sh83IGG6V6qL5qMI4vQYzRwfwMWgs + yJ6konY6UpHQm3kj4DMxD + RupLYj69M36Cp + EXxnJv00Nt3672BVCc2j1SY0AwAAJxzIC4C8iRnkKfGK7qIf89hzwL9TfEoCGDx/wzCMoHfUBru8CoDzZd9mKoyS8gfqQZlR vIhs + 5odHQIVOAgB7agbwN1KhAv6ukv9yiHBOALNQIJAgAoOAgAGbH4fDBAok4BZoYCBZYCEUeholIMAoQGRicXkITINAAA/rBRJksF9AwMNZPw7fFShQw1uBBp5AAgt9CWGIEgi4Bt2t3hJoglKYp4gWO5eFtIru/gbPjU7paHj4H1KODaJQ58sbX9BBUtFNvvkLkRMuYSs + J + ODpkHRJ6zAkgpE/fV0crJulcV2sBq8JdDETi8F5nlltNi5lmmV + fnf4LnRqeCZ2yv/IeX44YICxbmC/4t0lZ7pij3f/AUi3An6cMJW8Ek4NKerKOjlrVVgSREa6P2VE3mXq0qU + ez26UF48D332PsqR648 + QoUKlL8495SZspVqFSlWo1adeo1aNSkWYtWbczlG8RH7A51se5ygM577CbHYvYUkKu4DKyz0H/XvhBOi6PRjZ6Cd + CFR76zDTCXtfQnzCpusxs/k5faQXeUgbFcoTYLK + idX8hLVfFX8oW89 + wNd3v5GWLJq4ljJTdPbYMZ5jokAaq0IGfG + bqekBcN1GL5ODNJgkwLLZKFRX51WVDMDdgnThuePaFNq4MBAAA = ') format(' woff2 ');
      font-weight:normal;
      font-style:normal;

    }

    .iconfont {

    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    }

Unzip the compressed package, open iconfont.css, copy

image

Replace the above src, then copy all the icons below iconfont.css to font.wxss.

  • Then introduce font.wxss in app.wxss.

    app.wxss code

    @import "assets/css/font.wxss";

As we said before, .wxss can be imported with styles. Use the @import statement to import the outgoing style sheet. @import is followed by the relative path of the outgoing style sheet to be imported. Use ; to indicate the end of the statement .

to sum up

At this point, our homepage static page is almost complete.

One task for everyone:There is still a "nickname + copywriting" layout in the design draft. I did not teach you here, so you need to write it yourself.

I won't write it, I can go to the middle of my source code.

The next chapter will tell you how we should interact logically, that is, js.

image

This article is published by the blog group openWrite