大前端时代我们都习惯把模块尽可能的拆的比较细，这样方便维护起来比较方便，找起来也很容易。
微信官方已经给出了模板的引用，
<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));
这样就实现了功能的一个拆分