Une brève analyse sur la manière d'implémenter avec élégance la modularisation dans les petits programmes ?

<!-- 某个页面 -->
<import src=&#39;../../template/post-item&#39; />

<template data="{{...item}}" is="post-item" />

// lib/upload.js
// 上传方法
module.exports = async function upload(path) {
	return await wx.cloud.uploadFile({
		cloudPath: new Date().getTime() + path.substring(path.lastIndexOf(".")),
		filePath: path,
	})
}

// pages/form/form.js
const app = getApp()
const upload = app.require("lib/upload")
Page({
async submit() {
    wx.showLoading({
            mask: true,
            title: "发布中"
    })
    const imgList = []
    for (let img of this.data.form.imgList) {
            const uploadRes = await upload(img)
            imgList.push(uploadRes.fileID)
    }
    // ...其他业务代码
    }
})

🎜Modularisation d'une seule page🎜🎜🎜Le mini programme ne fournit pas de méthode de modularisation spéciale. La méthode la plus courante consiste à extraire certaines méthodes dans des fichiers js séparés, puis à l'introduire. Si vous souhaitez éviter un fichier d'échange dont le code est trop long, le meilleur moyen est de le composer. Cependant, dans les petits programmes, l'écriture de composants est vraiment désagréable. 🎜🎜Le composant applet a son propre cycle de vie, et doit être défini à l'avance dans la 🎜page json lors de son introduction🎜 Puisque le composant est accroché au 🎜nœud racine shadow🎜, si vous souhaitez partager des styles avec la page, tel. en tant que style global de colorUI, vous pouvez également Vous devez écrire un élément de configuration distinct styleIsolation🎜. L'expérience globale de développement est relativement fragmentée par rapport à vue. 🎜🎜Sur la base de certaines des opinions personnelles ci-dessus, j'utilise rarement des composants lors de l'écriture de petits programmes. Si j'ai besoin d'extraire wxml ou js, j'utilise généralement la méthode suivante. 🎜🎜🎜🎜modularité wxml🎜🎜🎜🎜Dans les petits programmes, j'utilise généralement template pour l'abstraction et la réutilisation, WeChat Mini Program Template Document, par rapport au composant, le modèle n'extrait qu'une partie de la page, pas inclure l’extraction des pièces fonctionnelles. 🎜🎜Ce qui suit est un modèle que j'ai extrait. Il s'agit d'un élément de liste d'un article. Il n'a aucune fonction indépendante, mais le code est très long et est réutilisé dans de nombreuses pages, donc il effectue un détachement. Écrivez tous les styles en utilisant des 🎜styles en ligne🎜, afin que les mêmes styles soient introduits partout où ils sont introduits. 🎜

// mixin.js
// 保存原生的 Page 函数
const originPage = Page
// 定义小程序内置的属性/方法
const prop = ['data', 'properties', 'options']
const methods = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']

Page = (options) => {
  if (Array.isArray(options.mixins)) {
    const mixins = options.mixins
    delete options.mixins
    mixins.forEach((mixin) => {
      for (let [key, value] of Object.entries(mixin)) {
        if (prop.includes(key)) {
          // 混入属性
          options[key] = {
            ...value,
            ...options[key]
          }
        } else if (methods.includes(key)) {
          // 混入原生方法
          const originFunc = options[key]
          options[key] = function (...args) {
            value.call(this, ...args)
            return originFunc && originFunc.call(this, ...args)
          }
        } else {
          // 混入普通方法
          options = {
            ...mixin,
            ...options
          }
        }
      }
    })
  }
  originPage(options)
}

Copier après la connexion

Copier après la connexion

🎜 doit être introduit à l'avance lorsqu'il est utilisé dans la page. Étant donné que plusieurs modèles peuvent être introduits, vous devez utiliser l'attribut is pour déclarer quel modèle est utilisé pour les données, vous pouvez transmettre <. code>data Les attributs sont transmis. L'exemple ici est que je déconstruis l'élément parcouru🎜 et que je lui attribue ensuite. 🎜

// app.js
require("./mixins.js")
App({
// ...其他代码
})

Copier après la connexion

Copier après la connexion

🎜Bien sûr, le code du modèle qui utilise le modèle pour la modularisation et l'extraction ne peut pas contenir trop de logique fonctionnelle. L'utilisation spécifique doit toujours être basée sur l'entreprise. 🎜🎜🎜🎜js modulaire🎜🎜🎜

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

// lib/upload.js
// 上传方法
module.exports = async function upload(path) {
	return await wx.cloud.uploadFile({
		cloudPath: new Date().getTime() + path.substring(path.lastIndexOf(".")),
		filePath: path,
	})
}

Copier après la connexion

Copier après la connexion

// pages/form/form.js
const app = getApp()
const upload = app.require("lib/upload")
Page({
async submit() {
    wx.showLoading({
            mask: true,
            title: "发布中"
    })
    const imgList = []
    for (let img of this.data.form.imgList) {
            const uploadRes = await upload(img)
            imgList.push(uploadRes.fileID)
    }
    // ...其他业务代码
    }
})

Copier après la connexion

Copier après la connexion

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

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

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

// mixin.js
// 保存原生的 Page 函数
const originPage = Page
// 定义小程序内置的属性/方法
const prop = ['data', 'properties', 'options']
const methods = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap']

Page = (options) => {
  if (Array.isArray(options.mixins)) {
    const mixins = options.mixins
    delete options.mixins
    mixins.forEach((mixin) => {
      for (let [key, value] of Object.entries(mixin)) {
        if (prop.includes(key)) {
          // 混入属性
          options[key] = {
            ...value,
            ...options[key]
          }
        } else if (methods.includes(key)) {
          // 混入原生方法
          const originFunc = options[key]
          options[key] = function (...args) {
            value.call(this, ...args)
            return originFunc && originFunc.call(this, ...args)
          }
        } else {
          // 混入普通方法
          options = {
            ...mixin,
            ...options
          }
        }
      }
    })
  }
  originPage(options)
}

Copier après la connexion

Copier après la connexion

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

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

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

// app.js
require("./mixins.js")
App({
// ...其他代码
})

Copier après la connexion

Copier après la connexion

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

// 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")],
	data: {
		user: wx.getStorageSync('user'),
		form: {
			title: "",
			topic: "",
			content: "",
			imgList: []
		}
	},
	chooseImg() {
		wx.chooseImage({
			count: 9 - this.data.form.imgList.length,
			sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: (res) => {
				res.tempFilePaths = res.tempFilePaths
				if (this.data.form.imgList.length != 0) {
					this.setData({ "form.imgList": this.data.form.imgList.concat(res.tempFilePaths) })
				} else {
					this.setData({ "form.imgList": res.tempFilePaths })
				}
			}
		});
	},
	async delImg(e) {
		const index = e.currentTarget.dataset.index
		const temp = this.data.form.imgList
		temp.splice(index, 1)
		this.setData({ "form.imgList": temp })
	}
})

Copier après la connexion

由于 topic 内都是关联性较强的属性与方法，因此就可以抽离出来，这样页面的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})
	},
	
	clearTopic(){
		this.setData({"form.topic":""})
	},
	toggleTopic(e){
        console.log(e.currentTarget.dataset)
		const flag = e.currentTarget.dataset.flag
		this.setData({"topic.flag":flag})
	},
}

Copier après la connexion

注意点

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!