小程序組件化

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

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

微信小程序封裝了一些基礎的組件，使用起來很方便，但定制化程度不高，日常開發(fā)中難免有一些功能想要做成組件，在其他地方復用。在網上找了好久，有很多小程序模塊化框架，比如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云服務器云服務器小程序組件開發(fā) 微信小程序組件小程序小程序小程序附近小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91386.html

業(yè)內首個 React Native轉微信小程序引擎 Alita 正式發(fā)布

摘要：得益于運行階段處理邏輯的設計，支持將使用的應用轉換成微信小程序。我們也在考察這一新的跨端方案和微信小程序融合轉化的可行性。作者：京東ARES多端技術團隊前言 Alita是一套由京東ARES多端技術團隊打造的React Native代碼轉換引擎工具。它對React語法有全新的處理方式，支持在運行時處理React語法，實現了React Native和微信小程序之間的主要組件對齊，可以用...

陸斌 2019-08-23 17:51 評論0 收藏0
cml遷移指南(CML Migrate Guide)

摘要：今天，為了讓大家的項目優(yōu)雅升級，快速接入，給你帶來一份豐盛的遷移指南目錄結構和微信小程序一樣，包含一個描述整體程序的和多個描述各自頁面的。 cml 作為真正讓一套代碼運行多端的框架，提供標準的MVVM模式，統(tǒng)一開發(fā)各類終端。同時，擁有各端獨立的運行時框架(runtime)、數據管理(store)、組件庫(ui)、接口(api)。此外，cml在跨端能力加強、能力統(tǒng)一、表現一致等方面...

FreeZinG 2019-08-26 13:42 評論0 收藏0
vue和微信小程序的區(qū)別、比較

摘要：相比之下，小程序的鉤子函數要簡單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下，小程序的鉤子函數要簡單得多。的鉤子函數在跳轉新頁面時，鉤子函數都會觸發(fā)，但是小程序的鉤子函數，頁面不同的跳轉方式，觸發(fā)的鉤子并不一樣。前言寫了vue項目和小程序，發(fā)現二者有許多相同之處，在此想總結一下二者的共同點和區(qū)別。相比之下，小程序的鉤子函數要簡單得多。寫了vue項目和小程序，發(fā)現二者有...

yck 2019-08-19 10:55 評論0 收藏0
vue和微信小程序的區(qū)別、比較

摘要：相比之下，小程序的鉤子函數要簡單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下，小程序的鉤子函數要簡單得多。的鉤子函數在跳轉新頁面時，鉤子函數都會觸發(fā)，但是小程序的鉤子函數，頁面不同的跳轉方式，觸發(fā)的鉤子并不一樣。前言寫了vue項目和小程序，發(fā)現二者有許多相同之處，在此想總結一下二者的共同點和區(qū)別。相比之下，小程序的鉤子函數要簡單得多。寫了vue項目和小程序，發(fā)現二者有...

mcterry 2019-08-02 11:11 評論0 收藏0
「輕算賬」小程序實踐筆記

摘要：資源開發(fā)文檔是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監(jiān)聽數據變化開發(fā)如何在微信小程序的頁面間傳遞數據需要時可以快速過一遍。微信小程序回調，，，的使用例子供參考這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當是做個總結，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...

BigTomato 2019-08-23 13:45 評論0 收藏0
詳解 mpvue 小程序框架及和原生的差異

摘要：在這一步，實例已完成以下的配置數據觀測，屬性和方法的運算，事件回調。可以直接寫等標簽的寫法之前會的工程師上手框架的成本較低簡介 1.美團工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點3.可完全組件化開發(fā) 特點 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構建項目5.最終H5...

IamDLY 2019-08-26 13:52 評論0 收藏0