微信小程序的模块化开发（mixin）
Posted andy18601302047
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序的模块化开发（mixin）相关的知识，希望对你有一定的参考价值。
大前端时代我们都习惯把模块尽可能的拆的比较细，这样方便维护起来比较方便，找起来也很容易。
微信官方已经给出了模板的引用，
<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));
这样就实现了功能的一个拆分
以上是关于微信小程序的模块化开发（mixin）的主要内容，如果未能解决你的问题，请参考以下文章
零基础实现微信小程序云开发的无人机管理系统项目实例系列教程简述