Programme WeChat Mini Créez vos propres widgets

Cet article présente principalement des informations pertinentes sur des exemples détaillés de widgets créés par vous-même pour les mini-programmes WeChat. Vous pouvez créer vos propres widgets et les appliquer dans des projets. Les amis dans le besoin peuvent se référer à

. Widgets de production de mini-programmes 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 est développé lorsque vous cliquez dessus, et le bouton est fermé lorsque vous cliquez pour fermer .

WXML (APP.wxml) de 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 de le plug-in, écrivez-les simplement dans la balise