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


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 22 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
Vue调用后端java接口的实例代码
Oct 28 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代码运行时间查看类代码分享
2011/08/06 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python中将字典转换为列表的方法
2016/09/21 Python
名片管理系统python版
2018/01/11 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
浅谈django channels 路由误导
2020/05/28 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
学生请假条
2014/04/11 职场文书
给校长的建议书400字
2014/05/15 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
给领导敬酒词
2015/08/12 职场文书