首页-教程-Web前端

浅析小程序中如何优雅地进行模块化处理？

 3991

小程序中如何优雅地进行模块化处理？本篇文章就来手把手教大家如何优雅的在小程序中进行模块化，希望对大家有所帮助！


浅析小程序中如何优雅地进行模块化处理？


这一篇文章就讲讲在微信小程序中如何优雅地进行模块化处理。通过最近的一些开发经验进行浓缩总结，探索一些可以提升微信小程序开发效率和降低心智负担的方法。

ES6和commonJS的选择

首先在微信小程序中不论是 ES6 或者是 commonJS 模块化语法都是支持的，在传统的web项目中我个人是习惯统一使用 ES6 模块化语法进行开发的。

在最初我也是将小程序中所有的通用方法抽离成单独的文件，并使用export 或 export default 导出,使用 import 引入。

注意点

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

解决方式

那我们该如何解决这么长的引入路径呢，在web项目中，我们常常会使用路径别名的方式，例如 webpack或vite 中的 resolve.alias 来缩短引入的路径。

  1. alias: {"@src":path.resolve("src"),

但是在原生微信小程序中，虽然可以通过 gulp 或者 webpack 等一些前端工程化的工具对小程序进行一些改造，但是作为一个开源项目我希望它的启动过程不需要太多额外配置。最好是能够使用原生的语法去实现。

最终我选择了在 app.js中新增一个require方法用于引入模块，这样在页面内引入模块时，我们只需要使用app的实例来进行模块引入，这样可以实现使用与app.js文件的相对路径来引入文件.

  1. // app.js
  2. App({
  3.     require(path){
  4.         return path
  5.     }
  6. })

使用方式

  1. // 使用基于app.js的相对路径来引入文件，这样就避免了写很多"../"
  2. const app = getApp()
  3. const upload = app.require("lib/upload")

当然这样做也不是特别方便，首先是代码提示的不健全，使用以上方式的话可能对于参数或者一些返回值的提示不到位，但是影响不大。如果之后我摸索出了其他比较好的实现方式再写一篇文章解析。其次是必须使用全局统一使用commonJS 的模块化语法啦，不过这一点的话问题不大。

单页面模块化

小程序中并没有提供特殊的模块化方式，比较常用的就是将一些方法抽离为单独的js文件，然后再引入。想要避免一个页面文件代码太长的话最好的方式是组件化，但是在小程序中，认为写组件真的是一件很不爽的事情。

小程序组件拥有自己的生命周期，而且引入时必须在页面json中提前定义，由于组件是挂在在shadow root节点上，如果想要和页面共享样式例如colorUI的全局样式还需要写入单独的配置项styleIsolation。整体开发体验相比vue而言比较割裂。

基于以上的一些个人看法，我在写小程序时比较少使用组件，如果是需要抽离wxml或者是js我通常使用以下的方法。

wxml模块化

在小程序中我通常使用 模板template 进行抽离复用，微信小程序模板文档 ，模板相较于组件抽离的仅仅是部分的页面，不包含功能部分的抽离。

以下是我抽离的一个模板,这是一个文章的列表项，它并没有什么单独的功能，但是代码很长并且却在很多页面中复用到，于是我将它进行了一个抽离。把样式都通过行内样式的方式写上，这样在哪里引入都是一样的样式。

  1. <!-- 文章列表项 -->
  2. <import src='./avatar' />
  3. <template name="post-item">
  4. <view class="margin padding-sm bg-white radius flex shadow " style="position: relative;height: 350rpx;border-radius: 10rpx;">
  5.         <!-- 背景蒙版 -->
  6.         <view style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 10rpx;">
  7.                 <image style="filter:blur(2px) grayscale(80%) opacity(80%)" lazy-load="{{true}}" src="{{imgList[0]}}" mode="aspectFill"></image>
  8.         </view>
  9.         <view style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(30, 30, 30, 0.8);border-radius: 10rpx;">
  10.         </view>
  11.  
  12.         <view style="z-index: 10;width: 100%;" class="text-white">
  13.                 <!-- 文章标题 -->
  14.                 <view class="text-xl  ">
  15.                         <text class="cu-tag margin-right-sm bg-color radius">{{topic}}</text>
  16.                         <text class="text-bold">{{title}}</text>
  17.                 </view>
  18.                 <!-- 文章内容 -->
  19.                 <view class="margin-top-xs text-sm text-cut">{{content}}</view>
  20.  
  21.                 <view class="flex align-end justify-between margin-top">
  22.                         <!-- 文章图片 -->
  23.                         <view class="flex align-center">
  24.                                 <view class="margin-xs" style="width: 120rpx;height: 120rpx;" wx:for="{{imgList}}" wx:key="{{index}}" wx:if="{{index < 3}}">
  25.                                         <image class="radius" src="{{item}}" mode="aspectFill"></image>
  26.                                 </view>
  27.                         </view>
  28.  
  29.                         <!-- 浏览量-点赞数 -->
  30.                         <view class="bg-color flex align-center text-white text-sm radius" style="padding: 4px 12px;">
  31.                                 <view class="cuIcon-attention "></view>
  32.                                 <view class="margin-left-xs">{{viewNum||0}}</view>
  33.                                 <view class="cuIcon-like margin-left"></view>
  34.                                 <view class="margin-left-xs">{{favorNum||0}}</view>
  35.                         </view>
  36.                 </view>
  37.  
  38.                 <!-- 发布时间 -->
  39.                 <view class="margin-top-xs flex align-center text-sm text-gray justify-between padding-lr-xs">
  40.                         <view class="flex align-center">
  41.                                 <template is="avatar" data="{{size:45,avatarUrl:user.avatarUrl}}" />
  42.                                 <view class="margin-left-xs">{{user.nickName}}</view>
  43.                         </view>
  44.  
  45.                         <view>{{createTime}}</view>
  46.                 </view>
  47.         </view>
  48.  
  49. </view>
  50. </template>

在页面中使用的时候需要提前引入，由于可以引入多个模板，因此使用时需要使用 is属性 声明使用的是哪一个template，数据的话可以通过data属性传入，这里的示例是我将遍历的item解构后再赋值进去。

  1. <!-- 某个页面 -->
  2. <import src='../../template/post-item' />
  3.  
  4. <template data="{{...item}}" is="post-item" />

当然使用template进行模块化进行抽离的模板代码可不能包涵太多的功能逻辑，具体的使用还是需要根据业务来噢。


js模块化

在小程序中最基本的js模块化就是直接抽离js文件，例如一些全局通用的方法，下面展示一个全局上传方法的封装

  1. // lib/upload.js
  2. // 上传方法
  3. module.exports = async function upload(path) {
  4.     return await wx.cloud.uploadFile({
  5.         cloudPath: new Date().getTime() + path.substring(path.lastIndexOf(".")),
  6.         filePath: path,
  7.     })
  8. }
  1. // pages/form/form.js
  2. const app = getApp()
  3. const upload = app.require("lib/upload")
  4. Page({
  5. async submit() {
  6.     wx.showLoading({
  7.             mask: true,
  8.             title: "发布中"
  9.     })
  10.     const imgList = []
  11.     for (let img of this.data.form.imgList) {
  12.             const uploadRes = await upload(img)
  13.             imgList.push(uploadRes.fileID)
  14.     }
  15.     // ...其他业务代码
  16.     }
  17. })

当然以上的办法对于通用方法来说很方便，但是对于与 页面操作的逻辑耦合性 很高的一些业务代码，这样子抽离并不方便。

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

具体代码其他博主有实现过，因此我就直接拿来使用了，具体代码如下。如果不了解vue中mixin的使用方法的可以自行去官网看文档，这里不做过多介绍。

  1. // mixin.js
  2. // 保存原生的 Page 函数
  3. const originPage = Page
  4. // 定义小程序内置的属性/方法
  5. const prop = ['data', 'properties', 'options']
  6. const methods = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']
  7.  
  8. Page = (options) => {
  9.   if (Array.isArray(options.mixins)) {
  10.     const mixins = options.mixins
  11.     delete options.mixins
  12.     mixins.forEach((mixin) => {
  13.       for (let [key, value] of Object.entries(mixin)) {
  14.         if (prop.includes(key)) {
  15.           // 混入属性
  16.           options[key] = {
  17.             ...value,
  18.             ...options[key]
  19.           }
  20.         } else if (methods.includes(key)) {
  21.           // 混入原生方法
  22.           const originFunc = options[key]
  23.           options[key] = function (...args) {
  24.             value.call(this, ...args)
  25.             return originFunc && originFunc.call(this, ...args)
  26.           }
  27.         } else {
  28.           // 混入普通方法
  29.           options = {
  30.             ...mixin,
  31.             ...options
  32.           }
  33.         }
  34.       }
  35.     })
  36.   }
  37.   originPage(options)
  38. }

实现的原理是改造小程序中的Page()函数，小程序的每一个页面都是通过调用Page({option})方法来实现的,在option参数中传入页面相关的data和声明周期函数及其他方法。

我们通过在Page方法的参数option中增加一个mixin属性，这个属性可以传入一个数组，数组即是每一个要混入的模块，每一个模块的结构其实与参数option是一样的，我们只需要将所有混入的模块与页面自身的option进行一个参数和方法的合并就能实现一个mixin的功能。

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

  1. // app.js
  2. require("./mixins.js")
  3. App({
  4. // ...其他代码
  5. })

然后我们写一个常规页面的js,业务代码大家不用看，主要关注Page的属性中多了一个mixins选项，而mixins数组中有一个topic模块。

  1. // pages/form/form.js
  2. const app = getApp()
  3. const upload = app.require("lib/upload")
  4. const to = app.require("lib/awaitTo")
  5. const db = wx.cloud.database()
  6. Page({
  7.     mixins: [require("./mixins/topic")],
  8.     data: {
  9.         user: wx.getStorageSync('user'),
  10.         form: {
  11.             title: "",
  12.             topic: "",
  13.             content: "",
  14.             imgList: []
  15.         }
  16.     },
  17.     chooseImg() {
  18.         wx.chooseImage({
  19.             count: 9 - this.data.form.imgList.length,
  20.             sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
  21.             sourceType: ['album', 'camera'], //从相册选择
  22.             success: (res) => {
  23.                 res.tempFilePaths = res.tempFilePaths
  24.                 if (this.data.form.imgList.length != 0) {
  25.                     this.setData({ "form.imgList": this.data.form.imgList.concat(res.tempFilePaths) })
  26.                 } else {
  27.                     this.setData({ "form.imgList": res.tempFilePaths })
  28.                 }
  29.             }
  30.         });
  31.     },
  32.     async delImg(e) {
  33.         const index = e.currentTarget.dataset.index
  34.         const temp = this.data.form.imgList
  35.         temp.splice(index, 1)
  36.         this.setData({ "form.imgList": temp })
  37.     }
  38. })

由于 topic 内都是关联性较强的属性与方法，因此就可以抽离出来，这样页面的js就会更加精简啦，如果有更多的代码就根据自己对于功能的判断进行抽离，然后放在页面对于mixin目录中即可！

  1. // // pages/form/mixin/topic.js
  2. const db = wx.cloud.database()
  3. module.exports =  {
  4.     data:{
  5.         topic:{
  6.             flag:false,
  7.             list:[]
  8.         },
  9.     },
  10.     onLoad(options) {
  11.         this.getTopic()
  12.     },
  13.     async getTopic(){
  14.         const res = await db.collection("topic").get()
  15.         this.setData({"topic.list":res.data})
  16.     },
  17.      
  18.     clearTopic(){
  19.         this.setData({"form.topic":""})
  20.     },
  21.     toggleTopic(e){
  22.         console.log(e.currentTarget.dataset)
  23.         const flag = e.currentTarget.dataset.flag
  24.         this.setData({"topic.flag":flag})
  25.     },
  26. }


注意点

但是使用mixin也有着与vue中同样的问题就是变量及方法的来源不好追溯，变量是在那个位置定义的比较难以定位，这时就更加依赖开发者的开发规范以及命名方式了，再不济也可以每一个方法写一个独有的注释嘛~


TAG标签：
本文网址：https://www.zztuku.com/detail-10595.html
站长图库 - 浅析小程序中如何优雅地进行模块化处理？
申明：本文转载于《掘金社区》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐

    白色线条图标矢量素材

    白色线条图标矢量素材

    素材 UI元素
    这是一款白色线条图标矢量素材，共 16 个，包含了唱片、眼镜、手表、磁带、吉他、蝴蝶结、胡须、烟斗、领带等等，提供了 AI、免扣 PNG 等...