Explication détaillée du développement de l'applet WeChat et du code d'exemple de widget créé par vous-même

Cet article explique principalement en détail les informations pertinentes sur le développement du mini-programme WeChat et la production d'exemples de codes de widgets. Vous pouvez créer vos propres widgets et les appliquer dans le projet. Les amis dans le besoin peuvent se référer à

. Production de widgets par mini-programme WeChat

Certaines choses courantes dans notre vie quotidienne peuvent être encapsulées dans des composants puis utilisées sur différentes pages. Pour les petits programmes, nous pouvons également encapsuler certains éléments publics dont nous avons besoin.

Ici, nous expliquons un petit plug-in.

Comme le montre l'image ci-dessus, un petit plug-in, cliquez pour développer, lorsque vous cliquez pour fermer, le boutonFermer.

WXML (APP.wxml) sur la page

<template name="widget-dialog-iconList">
  <view class="com-widget-iconList {{close==1?&#39;hideImg&#39;:&#39;&#39;}}" style="display:flex;flex-direction:row;">
    <view style="display:flex;flex-direction:row;">
      <view class="left-icon" style="display:flex;flex-direction:row;">
        <view class="left-circle"></view>
        <image class="icon1" src="http://m.dev.vd.cn/static/xcx/v1/goo/md_logo.png"></image>
      </view>
      <view class="middle_icon " style="display:flex;flex-direction:row;">
        <navigator url="../tua/home">
          <view class="section1">
            <view><image class="icon2" src="http://m.dev.vd.cn/static/xcx/v1/goo/firsticon.png"></image></view>
            <view class="text">首页</view>
          </view>
        </navigator>
        <navigator url="../ord/list">
          <view class="section2">
            <view><image class="icon2" src="http://m.dev.vd.cn/static/xcx/v1/goo/orderIcon.png"></image></view>
            <view class="text">订单</view>
          </view>
        </navigator>
        <navigator url="../usr/center">
          <view class="section3">
            <view><image class="icon3" src="http://m.dev.vd.cn/static/xcx/v1/goo/myself.png"></image></view>
            <view class="text">我的</view>
          </view>
        </navigator>
        <view class="right-icon" style="display:flex;flex-direction:row;">
          <image class="iconright" src="http://m.dev.vd.cn/static/xcx/v1/goo/delAllIcon.png" bindtap="closeAllIcon"></image>
        </view>
      </view>
 
    </view>
  </view>
  <view class="iconOnly {{close==0?&#39;hideImg&#39;:&#39;&#39;}}">
    <image class="iconOnlyPic" src="http://m.dev.vd.cn/static/xcx/v1/goo/md_logo.png" bindtap="showAllIcon"></image>
  </view>
</template>

Il s'agit principalement de l'effet d'affichage de surface du plug-in. , qui est écrit dans la balise