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


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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
Python是编译运行的验证方法
2015/01/30 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
详解Python中where()函数的用法
2018/03/27 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python中time、datetime模块的使用
2020/12/14 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
车贷收入证明范本
2014/01/09 职场文书
先进工作者获奖感言
2014/02/08 职场文书
初中生操行评语大全
2014/04/24 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
公务员个人年终总结
2015/02/12 职场文书
办公室岗位职责范本
2015/04/11 职场文书
2015年公务员工作总结
2015/04/24 职场文书
python全面解析接口返回数据
2022/02/12 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers