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 d477f9ce7bf77f53fbcf36bec1b69b7a

JS (APP.js) de la page

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  //将接口的进行暴露，方便在外面调用

L'étape suivante consiste à l'encapsuler, voici ce qu'il faut faire d'occasion.

Dans la page WXML requise :

importez la page Jin via , puis utilisez-la via

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

.

Dans la page WXML requise :

Introduisez le JS correspondant via var iconList = require('../wdg/iconList');

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

Présentez le fichier correspondant.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos du mini-programme WeChat Introduction au développement de l'interface de bienvenue

Mise en œuvre du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!