WeChat Mini-Programm Erstellen Sie Ihre eigenen Widgets

In diesem Artikel werden hauptsächlich relevante Informationen zu den detaillierten Beispielen selbst erstellter Widgets für WeChat-Miniprogramme vorgestellt. Sie können Ihre eigenen Widgets erstellen und diese in Projekten anwenden

Widgets zur Produktion von WeChat-Miniprogrammen

Einige alltägliche Dinge in unserem täglichen Leben können in Komponenten gekapselt und dann auf verschiedenen Seiten verwendet werden. Bei kleinen Programmen können wir auch einige öffentliche Dinge kapseln, die wir benötigen.

Hier erklären wir ein kleines Plug-in.

Wie im Bild oben gezeigt, wird beim Klicken ein kleines Plug-In erweitert, und beim Klicken wird die Schaltfläche zum Schließen geschlossen .

WXML (APP.wxml) der Seite

<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>

Dies ist hauptsächlich der Oberflächenanzeigeeffekt des Steckers -in. Schreiben Sie es einfach in das