浅析如何在小程序中优雅地处理模块化？（小程序模型）

如何在小程序中优雅地进行模块化处理？本文将教你如何在小程序中优雅地模块化，希望对你有所帮助！

本文谈谈如何在微信小程序中优雅地进行模块化处理。通过浓缩和总结近期的一些开发经验，探索出一些能够提高微信小程序开发效率、减轻脑力负担的方法。

微信小程序中的ES6和commonJS模块化语法都支持ES6和commonJS的选择。在传统的web项目中，我习惯于统一使用ES6模块化语法。

一开始我也是把小程序中所有常用的方法都提取到单独的文件中，用export或者export default导出，用import导入。

注意了。

但是！在实际开发中，小程序的js文件不支持绝对路径的引入！这意味着如果需要在页面中引入公共方法，必须使用../../xxx/xxx.js .当你在同一个页面中引入多个模块时，这种写法肯定会大大挫伤你的开发热情。

解决方法

那怎么解决这么长的导入路径呢？在web项目中，我们经常使用路径别名，例如webpack或vite中的resolve.alias来缩短导入路径。

别名:{“@ src“:路径。resolve（“src”），但在原生微信小程序中，虽然可以使用一些前端工程工具（如gulp或webpack）来改造小程序，但作为一个开源项目，我希望它的启动过程不需要太多的额外配置。最好能够使用母语语法来实现。

最后，我选择在app.js中添加一个require方法用于导入模块，这样在页面中导入模块时，我们只需要使用app的实例来导入模块，这样我们就可以使用与app.js文件的相对路径来导入文件。

//app . jsapp（{ require（path）{ return path } }）用法

//使用基于app.js的相对路径导入文件，从而避免编写大量“../“const app = getapp（）const upload = app . require（“lib/upload“）。当然，这并不是特别方便。首先，代码提示并不完善。如果使用上述方法，可能无法提示参数或某些返回值，但影响不大。如果我以后找到其他更好的实现方式，我会写一篇文章来分析它。其次，commonJS的模块化语法必须在全球范围内统一使用，但这不是一个大问题。

单页模块化小程序没有提供特殊的模块化方式。通常将一些方法提取到单独的js文件中，然后引入它们。避免页面文件代码太长的最好方法是组件化，但是在小程序中，编写组件确实令人不快。

Applet组件有自己的生命周期，它们必须在引入时预先在页面json中定义。因为组件挂在shadow根节点上，如果要与页面共享样式，例如colorUI的全局样式，则需要编写单独的配置项styleIsolation。与vue相比，整体开发体验较为分散。

基于以上个人观点，我在编写小程序时很少使用组件。如果我需要脱离wxml或js，我通常使用以下方法。

Wxml模块化

在小程序中，我通常使用模板模板进行提取和重用。与组件相比，微信小程序模板文档和模板只提取了部分页面，不包括功能部分。

下面是我拉出来的一个模板，是一篇文章的列表项。它没有任何单独的功能，但代码很长，并且在许多页面中重复使用，因此我将其抽出。以内嵌样式的方式编写所有样式，以便在任何地方都引入相同的样式。

{ { topic } } { { title } } { { content } } { { viewNum | | 0 } } { { favorNum | | 0 } } { { user . nickname } } { { create time } }在页面中使用时需要提前引入，因为可以引入多个模板。因此，有必要使用is属性来声明使用哪个模板，并且可以通过data属性传入数据。这里的例子是我在分配遍历的项之前对其进行了解构。

当然，使用模板进行模块化提取的模板代码不能包含太多的功能逻辑，具体使用还是需要根据业务而定。

Js模块化

小程序中最基本的js模块化就是直接提取js文件，比如一些全局通用的方法。下面显示了全局上传方法的封装。

// lib/upload.js// upload方法module . exports = async function upload（path）{ returnwaitwx . cloud . uploadfile（{ cloud path:new date（）。gettime（））+path . substring（path . lastindexof（。“）），filePath: path，}）}//pages/form/form . jsconst app = getApp（）const upload = app . require（“lib/upload“）Page（{ async submit（）{ wx . show loading（{ mask:true，Title:“Published“}）const img list =【】for（let img of this。data . form . img list）{ const uploads = aware upload（img）img list。推送（上传。fileid）}/...其他业务代码}}）当然，上述方法对于一般方法来说是方便的，但是对于一些与页面操作逻辑耦合度高的业务代码来说，这样抽离就不方便了。

在vue2中，我们可以使用混合的方法来模块化代码，在vue3中，我们可以使用hook的方法来模块化代码，但小程序中不支持以上两种。一开始想模仿vue3的hook方法进行页面的js打包改造，但最终效果不尽如人意，于是选择实现一种模仿vue2 mixin实现模块化的方法。

具体代码已经被其他博主实现了，所以我直接用了。具体代码如下。如果你不知道如何在vue中使用mixin，你可以自己去官网阅读文档，所以我在这里不做过多介绍。

//mixin.js//保存原生页面函数const originPage = Page//定义内置属性/方法const prop =【& # 39；数据& # 39；, '属性& # 39；, '选项& # 39；】const methods =【& # 39；onLoad & # 39, 'onReady & # 39, '昂秀& # 39；, 'onHide & # 39, 'onUnload & # 39, 'onPullDownRefresh & # 39, '在每个底部& # 39；, 'onShareAppMessage & # 39, 'onPageScroll & # 39, 'onTabItemTap & # 39】Page =（options）=》{ if（array . isarray（options . mixins）{ const mixins = options . mixins delete options . mixins mixins . foreach（（mixin）=》{ for（let【key，Value】of object。条目（mixin））{ if（prop。includes（key））{//混合属性选项【key】= {...价值，...选项【key】} else if（方法。includes（key））{//与本机方法const originFunc = options【key】混合。选项【键】=功能（...args）{ value . call（this，...args）返回originFunc & & originFunc . call（this，...args）} } else {//与通用方法选项混合= {...mixin，...options } } } } Origin Page（options）}是通过改造小程序中的Page（）函数实现的。小程序的每个页面都是通过调用Page（{ option }）方法实现的，页面相关的数据、周期函数等方法在option参数中传递。

我们将一个mixin属性添加到Page方法的参数选项中，该属性可以传递到一个数组中，该数组是要混合的每个模块。每个模块的结构实际上与参数选项相同。我们只需要将所有混合模块与页面本身的选项合并为一个参数和方法来实现一个mixin功能。

使用的方法是现在将mixin.js引入app.js。

//app.jsrequire（。/mixins.js“）应用程序（{/...其他代码}）然后我们写一个普通页面的js。你不需要看业务代码。我们主要关注在页面的属性中添加一个mixins选项，在mixins数组中有一个主题模块。

//pages/form/form . js const app = getApp（）const upload = app . require（“lib/upload“）const to = app . require（“lib/awaitTo“）const db = wx . cloud . database（）Page（{ mixins:【require（。/mixins/topic“）】，数据:{ user:wx . getstoragesync（& # 39；用户& # 39；），格式:{标题:“”，主题:“”，内容:“”，img list:【】} }，choose img（）{ wx . choose image（{ count:9 ^ -this . data . form . img list . length，size type:【& # 39；原创& # 39；】，//您可以指定它是原始图像还是压缩图像。默认情况下，两个图像都具有源类型:【& # 39；相册& # 39；, '相机& # 39；】，//从相册中选择成功:（RES）=》{ RES . tempfile paths = RES . tempfilepathsif（this . data . form . img list . length！= 0）{ this . setdata（{“form . img list“:this . data . form . img list . concat（RES . tempfile paths）}）} else { this . setdata（{“form . img list“:RES . tempfile paths }）} }）；}，async delImg（e）{ const index = e . current target . dataset . index const temp = this . data . form . imglisttemp . splice（index，1）this。setdata（{“形式。imglist“:temp }）}））因为主题中充满了相关性很强的属性和方法，所以可以将其提取出来，这样页面的js会更加精简。如果代码比较多，根据自己对功能的判断提取出来，然后放到页面的目录中进行mixin！

////pages/form/mixin/topic . js const db = wx . cloud . database（）module . exports = { data:{ topic:{ flag:false，list:【】}，} onLoad（options）{ this . getTopic（）}，async getTopic（）{ const RES = await db . collection（“topic“）。get（）this . setdata（{“topic . list“:RES . data }）}，Clear topic（）{ this . setdata（{“form . topic“:“}）}，toggle topic（e）{ console . log（e . current target . dataset）const flag = e . current target . dataset . flag this . setdata（{“topic . flag“:。

但是，使用mixin也有与vue相同的问题，即变量和方法的来源难以追溯，并且变量是在该位置定义的，因此它更依赖于开发人员的开发规范和命名方法。最不济也可以给每个方法写一个独特的注释~

【相关学习推荐:小程序开发教程】

以上是对如何在小程序中优雅地处理模块化的简要分析。更多详情请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 浅析如何在小程序中优雅地处理模块化？(分析如何在小程序中优雅地实践模块化处理)

本文由主机参考刊发，转载请注明：浅析如何在小程序中优雅地处理模块化？（小程序模型） https://zhujicankao.com/105332.html