微信小程序的模块化开发(mixin)

时间:2024-02-24 15:18:53

大前端时代我们都习惯把模块尽可能的拆的比较细,这样方便维护起来比较方便,找起来也很容易。

微信官方已经给出了模板的引用,

 

<template name="title">
    <view class=\'container\'>
     <view class=\'title\'></view>
    </view>
</template>

在需要的地方导入,引用

 

<import src="../template/index/block.wxml"/>

<template is="title"/>

wxss当中也只需要

@import "../template/index/block.wxss"

但在js逻辑中,看到很多人大多是通过module.exports的方式导出一个模块,然后在需要用的地方require某个模块,然后在某个生命周期函数中调用这个模块的某个方法。但这样模块之间的耦合仍然很大,并不能实现真正的拆分。熟悉vue的同学一定会了解mixin,但微信官方并没有给出方案,所以就自己写了一个,仅供参考。

建一个utils的文件夹,文件夹下建一个utils.js,内容如下

 

module.exports.mixinModule = function() {
let tempModel = {}
let targetModel = {}
for (let model in arguments) {
for (let data in arguments[model]) {
let l = arguments[model]
if (tempModel[data] == undefined) {
tempModel[data] = []
}
tempModel[data].push(l[data])
}
}
for (let key in tempModel) {
if (typeof tempModel[key][0] == "object") {
targetModel[key] = {}
for (let tempKey in tempModel[key]) {
Object.assign(targetModel[key], tempModel[key][tempKey])
}
} else if (typeof tempModel[key][0] == "function") {
targetModel[key] = function () {
for (let func of tempModel[key]) {
func()
}
}
}
}
return targetModel;
}

比如我们现在的模块是block.js,在onReady里弹出一个toast,就随便举一个例子,大家可以在里面写自己的业务逻辑

 

// pages/type/index.js
module.exports = {

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.showToast({
title: \'成功\',
icon: \'success\',
duration: 2000
})
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
}

比如说在index.js里要用这个模块,那么只需要调这个方法把两个模块混合进来

 

var block = require("../template/index/block.js")
var mixinUtil = require("../../utils/util.js")
let page = {

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
 
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
}

Page(mixinUtil.mixinModule(page,block));

这样就实现了功能的一个拆分