微信小程序 制作小组件
对于我们日常中一些公共的东西可以封装成组件,然后在各个页面使用。对于小程序,我们也可以封装我们需要的一些公共的东西。
这里我们讲解一个小插件。
如上图所示,一个小插件,单击是展开,在单击关闭的时候,按钮关闭。
页面的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] });
引入对应文件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。