微信小程序 自己制作小组件实例详解


Posted in Javascript onDecember 22, 2016

微信小程序 制作小组件

对于我们日常中一些公共的东西可以封装成组件,然后在各个页面使用。对于小程序,我们也可以封装我们需要的一些公共的东西。

这里我们讲解一个小插件。

微信小程序 自己制作小组件实例详解

微信小程序 自己制作小组件实例详解

如上图所示,一个小插件,单击是展开,在单击关闭的时候,按钮关闭。

页面的WXML (APP.wxml)

<template name="widget-dialog-iconList">
  <view class="com-widget-iconList {{close==1?'hideImg':''}}" 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?'hideImg':''}}">
    <image class="iconOnlyPic" src="http://m.dev.vd.cn/static/xcx/v1/goo/md_logo.png" bindtap="showAllIcon"></image>
  </view>
</template>

这里主要是插件的压面展示效果,都写在<template>标签里面就可以了。

页面的JS (APP.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  //将接口的进行暴露,方便在外面调用

接下来封装好了,就是该怎么使用了。

在需要的WXML页面:

通过 引入斤页面,再通过

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

进行使用。

在需要的WXML页面:

通过var iconList = require('../wdg/iconList');引入对应的JS

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

引入对应文件。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
js模拟实现烟花特效
Mar 10 Javascript
JS正则子匹配实例分析
Dec 22 #Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 #Javascript
jQuery无缝轮播图代码
Dec 22 #Javascript
jQuery实现两列等高并自适应高度
Dec 22 #Javascript
JS常用加密编码与算法实例总结
Dec 22 #Javascript
Javascript 制作图形验证码实例详解
Dec 22 #Javascript
jquery中用函数来设置css样式
Dec 22 #Javascript
You might like
php读取csv文件并输出的方法
2015/03/14 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python http基本验证方法
2018/12/26 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
党员承诺书内容
2014/03/26 职场文书
美化环境标语
2014/06/20 职场文书
市场营销毕业求职信
2014/08/07 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
初中政治教学工作总结
2015/08/13 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
详解Python flask的前后端交互
2022/03/31 Python