小程序组件化

Allen 发布于2019-08-22 10:53 / 824人阅读

摘要：微信小程序封装了一些基础的组件，使用起来很方便，但定制化程度不高，日常开发中难免有一些功能想要做成组件，在其他地方复用。在网上找了好久，有很多小程序模块化框架，比如，，但是都不敢用。今天看到一哥们写的小程序自定义公众组件，感觉简单靠谱。

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

其核心思想：

1、组件页面template，依赖组件的页面
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

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 = curPage
    Object.assign(curPage, _comEvent, _comMethod)
    curPage.setData(_comData)

    curPage.loginPanel = this
    return this
}

export { LoginPanel }

在index页面中使用login组件

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

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();    //使用组件方法
    }
})

最终结果：

云服务器 GPU云服务器小程序组件开发微信小程序组件小程序小程序小程序附近小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91386.html

业内首个 React Native转微信小程序引擎 Alita 正式发布

摘要：得益于运行阶段处理逻辑的设计，支持将使用的应用转换成微信小程序。我们也在考察这一新的跨端方案和微信小程序融合转化的可行性。作者：京东ARES多端技术团队前言 Alita是一套由京东ARES多端技术团队打造的React Native代码转换引擎工具。它对React语法有全新的处理方式，支持在运行时处理React语法，实现了React Native和微信小程序之间的主要组件对齐，可以用...

陆斌 2019-08-23 17:51 评论0 收藏0
cml迁移指南(CML Migrate Guide)

摘要：今天，为了让大家的项目优雅升级，快速接入，给你带来一份丰盛的迁移指南目录结构和微信小程序一样，包含一个描述整体程序的和多个描述各自页面的。 cml 作为真正让一套代码运行多端的框架，提供标准的MVVM模式，统一开发各类终端。同时，拥有各端独立的运行时框架(runtime)、数据管理(store)、组件库(ui)、接口(api)。此外，cml在跨端能力加强、能力统一、表现一致等方面...

FreeZinG 2019-08-26 13:42 评论0 收藏0
vue和微信小程序的区别、比较

摘要：相比之下，小程序的钩子函数要简单得多。一生命周期先贴两张图生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。前言写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。相比之下，小程序的钩子函数要简单得多。写了vue项目和小程序，发现二者有...

yck 2019-08-19 10:55 评论0 收藏0
vue和微信小程序的区别、比较

摘要：相比之下，小程序的钩子函数要简单得多。一生命周期先贴两张图生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。前言写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。相比之下，小程序的钩子函数要简单得多。写了vue项目和小程序，发现二者有...

mcterry 2019-08-02 11:11 评论0 收藏0
「轻算账」小程序实践笔记

摘要：资源开发文档是一套完全免费的微信小程序开发框架，扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调，，，的使用例子供参考这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案，就当是做个总结，也希望其中有能够帮助到他人的信息。 showImg(https://segment...

BigTomato 2019-08-23 13:45 评论0 收藏0
详解 mpvue 小程序框架及和原生的差异

摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

IamDLY 2019-08-26 13:52 评论0 收藏0