Detaillierte Erläuterung der WeChat-Miniprogrammentwicklung und selbst erstellter Widget-Beispielcode

In diesem Artikel werden hauptsächlich die relevanten Informationen zur WeChat-Miniprogrammentwicklung und Produktion von Widget-Beispielcodes erläutert. Sie können Ihre eigenen Widgets erstellen und diese im Projekt anwenden

WeChat Miniprogramm-Erstellung von Widgets

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, ein kleines Plug-in, zum Erweitern anklicken, beim Anklicken zum Schließen das SchaltflächeSchließen.

WXML (APP.wxml) auf 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 Plug-Ins , was im