VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

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

locvps
主机参考:VPS参考测评推荐,专注分享VPS主机优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

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

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

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 浅析如何在小程序中优雅地处理模块化?(分析如何在小程序中优雅地实践模块化处理)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!