小程序组件化

news/2025/2/12 10:32:42

微信小程序封装了一些基础的组件,使用起来很方便,但定制化程度不高,日常开发中难免有一些功能想要做成组件,在其他地方复用。在网上找了好久,有很多小程序模块化框架,比如labrador,wx-component,但是都不敢用。一方面这些框架都比较年轻,不敢轻易用到项目中;另一方面改了微信原先的page,app构造函数,不确定因素太多,指不定哪天出什么乱子。
今天看到一哥们写的小程序自定义公众组件,感觉简单靠谱。


其核心思想:

1、组件页面template,依赖组件的页面<import>
2、@import组件样式
3、组件逻辑:
在组件构造函数中获取到当前页面对象:

    let pages = getCurrentPages()let curPage = pages[pages.length - 1]

然后分别将组件的事件,方法复制到curPage中:

Object.assign(curPage,_comData,_comMethod)

设置组件数据:

curPage.setData({_comData})

登陆组件为例:

项目结构

Wechat-APP/
├─app.js
├─app.json
├─app.wxss
├─component/
│ └─login/
│   ├─login.js
│   ├─login.wxml
│   └─login.wxss
├─image/
├─pages/
│ └─index/
└─utils/

login.wxml

 <template name="login"> <view class="__lgpanel_mask" wx:if="{{!isHide}}"><view class="__lgpanel"><view class="__lgpanel_title">登录</view><view class="__lgpanel_username"><text>用户名:</text><input type="number" value="{{phone}}" /></view><view class="__lgpanel_pwd"><text>密码:</text><input type="number" value="{{password}}"/></view><view class="__lgpanel_login"><button size="mini" type="primary" bindtap="__lgpanel_ok">确定</button><button size="mini" type="warn" bindtap="__lgpanel_cancel">取消</button></view></view></view></template> 

login.wxss

/* login.wxss */
.__lgpanel_mask{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;justify-content: center;z-index: 10;
}.show{display: block;
}.hide{display: none;
}.__lgpanel{font-family: "微软雅黑", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;width: 80vw;margin: 0 auto;background: white;border: 2rpx solid #e3e3e3;border-radius: 8rpx;padding: 20rpx;
}.__lgpanel_title{display: block;text-align: center;margin: 10rpx;padding-bottom: 10rpx;border-bottom: 2rpx solid #ff9900;
}.__lgpanel_username,.__lgpanel_pwd{display: flex;flex-direction: row;justify-content: space-between;margin: 40rpx 10rpx;
}.__lgpanel_username text,.__lgpanel_pwd text{flex-shrink: 0;width: 30%;
}.__lgpanel_login{display: flex;justify-content: space-around;
}

login.js

// 组件数据
let _comData = {'__lgpanel__.phone':182*****535,'__lgpanel__.password':123456,'__lgpanel__.isHide':true
}
//组件事件
let _comEvent = {__lgpanel_ok:function(){console.log('OK')this.__lgpanel_hide()},__lgpanel_cancel:function(){console.log('Cancel')this.__lgpanel_hide()}
}
//方法
let _comMethod = {__lgpanel_show:function(){this.setData({'__lgpanel__.isHide':false})},__lgpanel_hide:function(){this.setData({'__lgpanel__.isHide':true})}
}
//组件类
function LoginPanel(){let pages = getCurrentPages()let curPage = pages[pages.length - 1]//组件中调用页面this._page = curPageObject.assign(curPage, _comEvent, _comMethod)curPage.setData(_comData)curPage.loginPanel = thisreturn this
}export { LoginPanel }

在index页面中使用login组件

1.index.wxml中引入login组件模板

<import src="../../components/login/login.wxml"/>
<view class="container"><template is="login" data="{{...__lgpanel__}}"></template><button type="default" plain bindtap="login">登录</button>
</view>

2.index.wxss中引入组件样式

@import '../../components/login/login.wxss';

3.index.js中注册组件

import { LoginPanel } from '../../components/login/login'
Page({data: {},onLoad: function () {new LoginPanel()  //注册组件},login: function () {this.__lgpanel_show();    //使用组件方法}
})

最终结果:
图片描述


https://dhexx.cn/news/show-3479040.html

相关文章

阿里宣布Atlas开源,提升大规模团队移动开发效率

继 Weex 之后&#xff0c;阿里在移动技术领域又有开源大动作。 3月13日&#xff0c;手机淘宝安卓客户端容器化框架 Atlas 正式宣布开源。Atlas 由阿里巴巴移动团队自研&#xff0c;以容器化思路解决大规模团队协作问题&#xff0c;实现并行开发、快速迭代和动态部署&#xff0c…

设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table)&#xff0c;并支持表格的跨行(RowSpan)与跨列(ColSpan)。同时它还支持报表Excel导出、图表显示及固定表头与左边列的功能。总体架构…

基于key/value+Hadoop HDFS 设计的存储系统的shell命令接口

对于hadoop HDFS 中的全部命令进行解析&#xff08;当中操作流程是自己的想法有不允许见欢迎大家指正&#xff09; 接口名称 功能 操作流程 get 将文件拷贝到本地文件系统 。假设指定了多个源文件&#xff0c;本地目的端必须是一个文件夹。 &#xff08;1&#xff09;依照…

ASP.NET(4):多语言的解决方案

说明&#xff1a;此处仅仅列了两个方案&#xff0c;方便自己记忆&#xff0c;请勿拍砖。 1.采用传统的资源文件方式定义的语言设计方案。具体参考微软MSDN。 2.轮询方式处理。具体实现如下。 1&#xff09;数据库或文件设计两列&#xff1a;Name1;Name2; 2&#xff09;定义取得…

解决js中引入js,以及跨域的问题

解决js中引入js&#xff0c;以及跨域的问题 推荐使用&#xff1a; addJs("https://cdn.jsdelivr.net/npm/vue2.6.9/dist/vue.min.js"); addJs("https://cdn.jsdelivr.net/npm/jquery3.3.1/dist/jquery.min.js"); function addJs(src){//document.write(&qu…

弟子规(清朝·李毓秀)

弟子规(清朝李毓秀) 根据朱熹《童蒙须知》改编。 弟子规&#xff0c;圣人训&#xff0c;首孝悌&#xff0c;次谨信&#xff0c;泛爱众&#xff0c;而亲仁&#xff0c;有余力&#xff0c;则学文。第一章 孝父母呼&#xff0c;应勿缓&#xff1b;父母命&#xff0c;行勿懒。父母教…

android获取屏幕尺寸、密度

http://developer.android.com/reference/android/util/DisplayMetrics.html DisplayMetrics metric new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metric); int width metric.widthPixels; // 屏幕宽度&#xff08;像素&#x…

C语言100题(1)

题目&#xff1a; /*m个人的成绩存放在score数组中&#xff0c;请编写函数fun,它的功能是&#xff1a; 将低于平均分的人作为函数值返回&#xff0c;将低于平均分的分数放在below所指定的函数中。*/ 程序&#xff1a; #include "stdio.h" #define M 5int fun(int s…

ServerLess -- 除了极简架构和极科运维外,更应该多考虑一下极简开发

文章开头&#xff0c;我向所有喜欢ServerLess的人们说一声对不起先&#xff0c;ServerLess我个人觉得是个好东西&#xff0c;但今天文章中会主要谈谈不足。 Serverless的初衷 极简架构&#xff1a;不需要考虑消息&#xff0c;缓存&#xff0c;数据库分库分表&#xff0c;并发等…

C语言100题(2)

题目&#xff1a;/*请编写函数fun&#xff0c;它的功能是&#xff1a; 求出1到100之内能被7或者11整除&#xff0c;但不能同时被7和11整除的所有数据&#xff0c;并将他们放在a所指的数组中&#xff0c;通过n返回这些数的个数。*/ 程序&#xff1a; #include "stdio.h&quo…