Explication détaillée du développement de l'applet WeChat et du code d'exemple de widget créé par vous-même

Cet article explique principalement en détail les informations pertinentes sur le développement du mini-programme WeChat et la production d'exemples de codes de widgets. Vous pouvez créer vos propres widgets et les appliquer dans le projet. Les amis dans le besoin peuvent se référer à

. Production de widgets par mini-programme 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, cliquez pour développer, lorsque vous cliquez pour fermer, le boutonFermer.

WXML (APP.wxml) sur 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 du plug-in. , qui est écrit dans la balise

JS

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

(APP.js)

est encapsulé et voici maintenant comment l'utiliser.

Dans la page WXML requise :

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

introduisez la page via

puis utilisez-la via

.

Dans la page WXML requise :

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

Introduisez le JS correspondant

via var iconList =

require

('../wdg/iconList');
Présentez les fichiers correspondants.

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!