快速解析小程序中如何优雅地实现模块化？（小程序中的模块）

如何优雅地模块化我的小程序？本文介绍了如何优雅地模块化我的小程序。 希望对你有帮助！

这篇文章讲解了如何在微信小程序中优雅地实现模块化处理。 通过对近期开发经验的浓缩总结，我们探索了几种可以提高微信小程序开发效率、减轻心理负担的方法。

选择ES6和commonJS

首先，微信小程序同时支持ES6和commonJS模块化语法。 对于传统的Web项目，我个人习惯使用ES6模块化语法进行开发。 的。

首先，我将小程序中的所有常用方法提取到单独的文件中，使用Export或Export Defaults导出，然后使用Import导入。

注意

但是！ 实际开发中，小程序js文件不支持引入绝对路径。 这意味着如果你需要在页面上引入公共方法，你应该使用../../../xxx/xxx.js。 当在同一个页面引入多个模块时，毫无疑问，这种写法会降低开发的动力。

解决方案

那么我们如何解析这样长的导入路径呢？在web项目中，webpack、vite解析等路径别名我经常使用。 用于缩短导入路径的别名。

别名：{"@src":path.resolve("src"),

但是在原生微信小程序中，可以使用gulp、webpack等一些前端工程工具来解析一些确实可以工作，但是需要对小程序转换进行一些更改，但是作为一个开源项目我们希望它的启动过程不需要太多额外的配置。 最好使用本机语法实现。

最终我决定在app.js中添加一个require方法来引入该模块。 这样，当您向页面引入模块时，只需使用应用程序的实例来引入该模块。使用 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

小程序通常使用模板进行抽象和重用。 微信小程序模板文档 与组件相比，模板只是部分抽象。 本页不包含功能部分的摘录。

下面是我提取的模板。 这是文章的列表项。 没有独立的功能，但是代码相当长，包含的代码也很多。我摘录它是因为它在页面中被重复使用。 将样式编写为内联样式，这样无论在哪里引入相同的样式。

文章内容 --> -->                                                                                                          t;view> 浏览量 - 点赞数 --> w>                                                                                        w>                                                            。 发布时间 --> {{{user.nickName}}

必须先安装，然后才能在页面中使用。 可以安装多个模板，因此您需要正确使用它们。 is 属性声明使用哪个模板。 数据可以通过data属性传递。 这里的例子是对遍历到的item进行分解，然后进行分配。

当然，模板是用来模块化和抽象的。我会。 代码中不能包含过多的功能逻辑，具体使用还是要根据业务而定。

JS模块化

小程序最基本的JS模块化就是直接提取JS文件，比如一些全局方法。 下面展示了全局上传方法的封装。 // lib/upload.js // 上传方法 module.exports = async function Upload(path) {return wait wx.c UploadFile({cloudPath: new Date() .getTime() + path.substring(path .lastIndexOf(".")),filePath: 路径,})}//page/form/form.jsconst app = getApp(loud)const upload= app.require("lib/upload")Page({async Submit() { wx.showLoading({ mask: true, title: "Release" }) const imgList = [] for (保留此数据表单的图像。 imgList) { const UploadRes = wait Upload(img) imgList.push(uploadRes.fileID) } //...其他业务代码 }})

当然，上面的方法在一般情况下是非常方便和方便的，但是页面操作和一些业务代码的逻辑耦合度非常高，所以不方便像这样将它们分开。

Vue2 允许您使用 mixin 方法模块化代码。 Vue3 允许您使用钩子方法来模块化您的代码。 不过小程序不支持以上两种。 最初我是想通过模仿Vue3的hook方式来封装和改造页面JS，但是最终的效果并不理想，所以我决定通过模仿Vue2的mixin来实现模块化的方式。

具体代码其他博主已经实现了，所以我就直接使用了。 具体代码如下。 如果你不知道如何在Vue中使用mixins，可以访问官网并自行阅读文档。 这里我就不过多介绍了。

// mixin.js// 存储原生Page函数 const OriginPage = Page// 定义小程序内置属性/方法 const prop = ['data', 'properties', 'options' ] const方法 = [ 'onLoad', 'onReady', 'onShow', 'onHide', 'onUnload','onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']Page = (options) => { if (Array.isArray(options.mixins)) { const mixins = options.mixins 删除选项 Masu。 mixins mixins.forEach((mixin) => { for (let [key, Object.entries(mixin)) { if (prop.includes(key))                                                     。 ...选项[键]                                                                                                                                                                                                                                                                                  const OriginFunc = options[key] options[key] = function (...args) { v alue.call(this, ...args) return OriginFunc && OriginFunc.call(this, ...args) }                                                                                                                                                                                    。}}})} Originpage (可选)}

实现原理是对小程序内部的page()函数进行改造。 小程序的每个页面都是通过调用Page({option})方法来实现的。 页面相关数据、生命周期函数和其他方法通过可选参数传递。

在Page方法的参数选项中添加mixin属性。 该属性可以在数组中传递。 数组是混合的每个模块。 各个模块的结构实际上和参数选项是一样的。 是的，要实现 mixin 的功能，您只需要将所有带有参数的混合模块和带有页面本身选项的方法组合起来即可。

使用的方法是在app.js中引入mixin.js

// app.jsrequire("./mixins.js")App({// .. .other code})

接下来编写普通页面的js。 无需检查业务代码。 我们这里的主要重点是将 mixin 选项添加到页面属性。 Mixin 数组有主题模块。

// Page/form/form.jsconst app = getApp()const upload = app.require("lib/upload")const to = app.require("lib/awaitTo")const db = wx.cl oud.database()Page({mixins: [require("./mixins/topic")],data: {user: wx.getStorageSync('user'),form: {标题：“”，主题：“”，内容：“”，imgList: []}},chooseImg() {wx.chooseImage({count: 9 - this.data.form.imgList.length,sizeType: ['original'], //可以指定是原始图片还是压缩图片，均为sourceType: ['a by default lbum', 'camera'], //从相册中选择成功: (res) => {res.tempFilePaths = res.tempFilePathsif (this.data.form.imgList.length != 0) {this.setData({ "form .i mgList": this.data.form.imgList.concat(res.tempFilePaths) })} else {this .setData({ "form.imgList": res.tempFilePaths })}}});}, 异步 delImg(e) {c onstindex = e.currentTarget.dataset.indexconst temp = this.data.form.imgListtemp.splice(index, 1)this.setData({ "form.imgList": temp })}})

由于主题包含高度相关的主题，允许您提取属性和方法使您页面上的JS更加精简。 如果你有更多的代码，你可以根据你的函数自行判断将其提取出来并将页面放在 mixin 目录中。

// // page/form/mixin/topic.jsconst db = wx.cloud.database()module.exports = { data:{topic:{ flag:false, list:[] }, }, onLoad(options) {this.getTopic() }, async getTopic(){cons t res = wait db.collection("Topic").get()this .setData({"Topic.List":res.data})},clearTopic(){this.setData({"Form.Topic":" "})},toggleT opic(e){ console.log(e.currentTarget.dataset)const flag = e.currentTarget.dataset.flagthis.setData({"topic.flag":flag})},}

点击时要小心

但是，使用 mixins 也有和 vue 一样的问题。 变量和方法的来源很难追踪。 很难找到变量的定义位置。 这时候，就真的要看开发商的开发规范了。 和命名方法类似，每个方法你都可以写自己的注释，不管有多难~

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

PHP快速学习视频（免费）教程（从初学者到高手）

如何开始学习PHP？如何快速学习PHP？ 别担心，这里有大家的PHP 快速学习教程（从初学者到大师）。 您可以保存并下载您想学习的朋友。

下载

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

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

本文由主机参考刊发，转载请注明：快速解析小程序中如何优雅地实现模块化？（小程序中的模块） https://zhujicankao.com/142504.html