小程序組件化

Allen 發(fā)布于2019-08-22 10:53 / 798人閱讀

摘要：微信小程序封裝了一些基礎(chǔ)的組件，使用起來很方便，但定制化程度不高，日常開發(fā)中難免有一些功能想要做成組件，在其他地方復(fù)用。在網(wǎng)上找了好久，有很多小程序模塊化框架，比如，，但是都不敢用。今天看到一哥們寫的小程序自定義公眾組件，感覺簡單靠譜。

微信小程序封裝了一些基礎(chǔ)的組件，使用起來很方便，但定制化程度不高，日常開發(fā)中難免有一些功能想要做成組件，在其他地方復(fù)用。在網(wǎng)上找了好久，有很多小程序模塊化框架，比如labrador，wx-component，但是都不敢用。一方面這些框架都比較年輕，不敢輕易用到項(xiàng)目中；另一方面改了微信原先的page,app構(gòu)造函數(shù)，不確定因素太多，指不定哪天出什么亂子。
今天看到一哥們寫的小程序自定義公眾組件，感覺簡單靠譜。

其核心思想：

1、組件頁面template，依賴組件的頁面
2、@import組件樣式
3、組件邏輯：
在組件構(gòu)造函數(shù)中獲取到當(dāng)前頁面對象:

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

然后分別將組件的事件，方法復(fù)制到curPage中：

Object.assign(curPage,_comData，_comMethod)

設(shè)置組件數(shù)據(jù)：

curPage.setData({_comData})

登陸組件為例：

項(xiàng)目結(jié)構(gòu)

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

// 組件數(shù)據(jù)
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]
    //組件中調(diào)用頁面
    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();    //使用組件方法
    }
})

最終結(jié)果：