小程序組件化

微信小程序封裝了一些基礎的組件，使用起來很方便，但定製化程度不高，平常開發中不免有一些功能想要作成組件，在其餘地方複用。在網上找了很久，有不少小程序模塊化框架，好比labrador，wx-component，可是都不敢用。一方面這些框架都比較年輕，不敢輕易用到項目中；另外一方面改了微信原先的page,app構造函數，不肯定因素太多，指不定哪天出什麼亂子。
今天看到一哥們寫的小程序自定義公衆組件，感受簡單靠譜。

---

其核心思想：

一、組件頁面template，依賴組件的頁面<import>
二、@import組件樣式
三、組件邏輯：
在組件構造函數中獲取到當前頁面對象:

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

    curPage.loginPanel = this
    return 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();    //使用組件方法
    }
})

最終結果：