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

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

本文谈谈微信小程序中如何优雅地处理模块化。通过最近的一些开发经验，集中总结，探索一些可以提高微信小程序开发效率，减轻精神负担的方法。

ES6和commonJS的选择首先是微信小程序中ES6和commonJS模块化语法都支持。在传统的web项目中，我习惯使用ES6模块化语法进行开发。

一开始我也是把小程序里所有通用的方法都单独放在单独的文件里，用导出或者导出默认导出，导入导入。

注意了。

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

解决方法

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

别名:{ @ src :path . 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( ；库/上传 )当然这个不是特别方便。首先，代码提示不完善。如果使用上面的方法，参数或者某些返回值的提示可能不到位，但是影响不大。之后，如果我发现了其他更好的实现方式，我会写一篇文章来分析。其次，我们必须全局统一地使用commonJS的模块化语法，但这不是大问题。

单页模块化小程序中没有特殊的模块化方式，但通常会将一些方法分离到单独的js文件中，然后引入。避免一个页面文件代码太长的最好方法就是组件化，但是在小程序中，想到写组件真的很不爽。

applet组件有自己的生命周期，引入时必须提前在页面的json中定义。因为组件挂在shadow根节点上，如果要和页面共享样式，比如colorUI的全局样式，就需要单独写一个配置项styleIsolation。与vue相比，整体开发体验是碎片化的。

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

Wxml模块化

在小程序里，我一般都是用模板模版拉出来再用。相比组件，微信小程序的模板只拉出了部分页面，不包括功能部分的拉出。

以下是我拉出来的一个模板。这是一篇文章的列表项。它没有单一的功能，但是代码很长，在很多页面中重复使用，所以我把它抽出来了。把所有的风格都用行内风格的方式写出来，这样到处都是相同的风格介绍。

lt！--物品清单物品-->: lt；导入src = # 39。/avatar # 39；/ gt； lt模板名称= post -item ； gt ltview class = 边距填充-sm bg-白色半径伸缩阴影 style = 位置:相对；身高:350rpxborder -半径:10rpx" gt lt！--背景蒙版-->: lt；视图样式= 位置:绝对；top:0；左:0；宽度:100%；身高:100%；border -半径:10rpx" gt lt图像样式= 滤镜:模糊(2px)灰度(80%)不透明度(80%) ；lazy -load = ；{ { true } } src = { { img list[0]} } ；mode = aspectFill gt lt/image gt； lt/view gt； lt视图样式= 位置:绝对；top:0；左:0；宽度:100%；身高:100%；background-color: rgba(30，30，30，0.8)；border -半径:10rpx" gt lt/view gt； lt视图样式= z-指数:10；宽度:100%；"class = text -white ； gt lt！--文章标题-->: lt；view class = text -XL ； gt lttext class = cu-标签边距-右侧-sm bg-颜色半径 gt{ { topic } } lt/text gt； lttext class = text -粗体 gt{ { title } } lt/text gt； lt/view gt； lt！--文章内容-->: lt；view class = margin -top -xs text -sm text -cut ； gt{ { content } } lt/view gt； ltview class = flex align -end justify -边距之间-top ； gt lt！--文章图片-->； ltview class = 柔性对齐-居中 gt ltview class = 保证金-xs ；style = 宽度:120rpx身高:120rpx"wx:for = ；{ { imgList } } wx:key = ；{ { index } } wx:if = ；{ { index lt3 } } gt ltimage class = 半径 src = { { item } } mode = aspectFill gt lt/image gt； lt/view gt； lt/view gt； lt！--观点-喜欢-->； ltview class = bg-彩色柔性对齐-中心文本-白色文本-sm半径 style = 填充:4px 12px" gt ltview class = cuicon -注意 gt lt/view gt； ltview class = 边距-左-xs ； gt{ { viewNum | | 0 } } lt/view gt； ltview class = cuicon -like margin -left ； gt lt/view gt； ltview class = 边距-左-xs ； gt{ { favorNum | | 0 } } lt/view gt； lt/view gt； lt/view gt； lt！--发布时间-->: lt；view class = margin -top -xs flex align -center text -sm text -gray justify -padding -lr-xs ； gt ltview class = 柔性对齐-居中 gt lt模板是= 阿凡达 data = {{size:45，avatar URL:user . avatar URL } } ；/ gt； ltview class = 边距-左-xs ； gt{ {用户.昵称} } lt/view gt； lt/view gt； lt视图 gt{ { createTime } } lt/view gt； lt/view gt； lt/view gt； lt/view gt； lt/template gt；在页面中使用时，需要提前介绍。因为可以引入多个模板，所以需要使用is属性来声明使用哪个模板。如果需要数据，可以通过data属性传入。这里的例子是我在赋值之前解构了遍历的项。

lt！--某页-->: lt；导入src = # 39../../template/post -item # 39；/ gt； lt模板数据= {{...item } } is = post -item ；/ gt；当然，使用模板模块化、拉出来的模板代码不能包含太多的功能逻辑。具体使用还是要根据业务来定。

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 . js const app = getApp()const upload = app . require( ；库/上传 )页面({ async submit(){ wx . show loading({ mask:true，title: ；publish " })const img list =[]for(let img of this . data . form . img list){ const uploadRes = await upload(img)imst . push(uploadRes . fileid)}/...其他业务代码}})当然，以上方法对于一般的方法来说是方便的，但是对于一些与页面操作逻辑耦合度高的业务代码来说，这样抽离就不太方便了。

在vue2中，我们可以使用mixin来模块化代码，在vue3中，我们可以使用hook来模块化代码，但是在小程序中不支持以上两种。一开始想模仿vue3中的hook对页面js进行封装和改造，但最终效果并不理想，于是选择实现一个模仿vue2 mixin的方法来实现模块化。

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

//mixin.js//保存原生页面函数const originPage = Page//定义内置属性/方法const prop =[ # 39；数据 # 39；, '属性 # 39；, '选项 # 39；]const方法=[ # 39；onLoad # 39, 'onReady # 39, '昂秀 # 39；, 'onHide # 39, 'onUnload # 39, 'onPullDownRefresh # 39, 'onReachBottom # 39, 'onShareAppMessage # 39, 'onPageScroll # 39, 'onTabItemTap # 39]Page =(选项)= gt{ if(array . is array(options . mixins)){ const mixins = options . mixins delete options . mixins mixins . foreach((mixin)= gt；{ for (let [key，Value]of object . entries(mixin)){ if(prop . includes(key)){//与属性选项[key] = {...值，..options[key]} } else if(methods . includes(key)){//与本机方法const originFunc = options[key]options[key]= function(...args) { value.call(this，...args)返回originFunc Originfunc.call(这个，...args)} } else {//与普通方法混合options = {...米辛，..options } } } } } Origin Page(options)}实现的原理是对小程序中的Page()函数进行改造。小程序的每一页都是通过调用Page({option})方法实现的，在option参数中传递与页面相关的数据和周期函数等方法。

通过在Page方法的parameter选项中添加一个mixin属性，可以将这个属性传入一个数组，数组就是要混合的每个模块。每个模块的结构其实和参数选项是一样的。我们只需要通过一个参数和方法，将所有的混合模块和页面本身的选项结合起来，实现一个mixin函数。

使用方法就是现在把mixin.js引入app.js。

//app . js require( ；。/mixins . js ；)App({//...其他代码})然后我们写一个普通页面的js，业务代码就不用看了。我们主要关注在页面的属性中增加一个mixins选项，而mixins数组中有一个主题模块。

//pages/form/form . js const app = getApp()const upload = app . require( ；库/上传 )const to = app . require( ；lib/awaitTo ；)const db = wx . cloud . database()Page({ mixins:[require( ；。/mixins/topic ；)]，数据:{ user:wx . getstoragesync( # 39；用户 # 39；)，形式:{ title: ；"，题目: "，内容: "，imgList: []}}，choose img(){ wx . choose image({ count:9 ^ -this . data . form . img list . length，size type:[ # 39；原创 # 39；]，//可以指定是原始图像还是压缩图像。默认情况下，它们都有source type:[ # 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({ ；form . img list ；: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( ；话题 ).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:flag})}}注意

但是使用mixin有和vue一样的问题，就是变量和方法的来源无法追溯，很难定位到那个位置定义的变量。这时候就更依赖于开发者的开发规范和命名方式了。最不济可以给每个方法写个独特的评论~

【相关学习推荐:小程序开发教程】以上是如何优雅模块化小程序的简要分析？更多详情请关注主机参考其他相关文章！

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

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

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