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 d477f9ce7bf77f53fbcf36bec1b69b7a

JS (APP.js) der Seite

var iconList = {};    //设置一个对象名字存放数据
iconList.Wdg= {
      //存放要给VIEW层的页面数据，closeAllIcon ，showAllIcon 是对应的方法  
  data: {        
    index: 0,
    close:0
  },
  closeAllIcon: function(e){
      this.setData({
        close:1
      })
  },
  showAllIcon :function(e){
      this.setData({
        close:0
      })
  }
};

module.exports=iconList  //将接口的进行暴露，方便在外面调用

Der nächste Schritt ist, wie man es verwendet.

Auf der erforderlichen WXML-Seite:

Führen Sie die Jin-Seite über ein und verwenden Sie sie dann über

<template is="widget-dialog-iconList" data="{{你要传到页面的数据}}"></template>

.

Auf der erforderlichen WXML-Seite:

Führen Sie das entsprechende JS über var iconList = require('../wdg/iconList');

var util= require('../../util/util');
var Page = new util.Page({
  Wdgs: [iconList.Wdg]
});

Stellen Sie die entsprechenden Dateien vor.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über das WeChat Mini-Programm Einführung in die Entwicklung von Willkommensschnittstellen

Implementierung des Pull-up-Ladens und Pull-down-Aktualisierens der WeChat-Applet-Liste

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programm Erstellen Sie Ihre eigenen Widgets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!