微信小程序代码逻辑复用(二)—— 解决方案

简介: 微信小程序代码逻辑复用(二)—— 解决方案

640.jpg

写在前面


从去年底到今年初,由于工作繁重以及一些私人的事情需要处理,耽误了公众号更新。这周开始恢复更新了。


之前的文章中,我也对微信小程序中的代码复用问题进行了阐述。历史文章在这里:

微信小程序页面代码复用探索(一)——  存在的问题及需求

文中提到的方案,其实在去年的时候,我已经实现了。本文将进行初步的介绍。


Zero


我给自己的解决方案取名为Zero。它是一个轻量级的,拥有命名空间的,基于Page层mixin的微信小程序代码逻辑复用方案。


Zero分为了两部分:Zero-loader 和 Zero.js。


Zero-loader负责转译wxml代码。在开发wxml时,可以将命名空间声明在模板上,Zero-loader会进行识别,并且将命名空间编译到模板的变量中。


Zero.js是一个运行时,对外暴露了三个接口:Base,Compose,Merge。Base确认页面主逻辑,Compose根据命名空间、组合多个mixin,Merge合并mixin和页面主逻辑。

整个Zero的示意图如下:

640.png


各个mixin之间进行了相互隔离,仅能通过页面主对象进行中转,解决传统mixin方案的命名冲突、隐式依赖的问题。


可以将页面公用的逻辑拆成公用mixin方便复用,也可以将页面业务分模块拆分为业务mixin,方便维护、迭代。


Zero实例


像开发Page一样开发Mixin,且不用担心命名冲突等问题,可以专注于页面代码逻辑拆分。以一个动态标题栏为例。动态标题栏会在多个页面使用,但是这里的逻辑却无法进行优雅的拆分。使用Zero后,可以将动态标题栏抽出作为一个mixin:

640.png


Zero特点


1、在Page层实现mixin,解决原生Component无法覆盖的代码复用场景。

2、各Mixin相互隔离,仅能通过Page中转,解决传统mixin方案的命名冲突、隐式依赖的问题,方便逻辑拆分。

3、原生方案,轻量级、渐进式,改造简单,接入方便。

Zero比较适合多人协作的,追求稳定,使用原生方法开发的复杂微信小程序。


写在后面


当初Zero的诞生,完全是为了解决业务开发中的痛点。如今,微信小程序已经官方支持Page层的mixin了。说明当初的思路是有可取的地方的。后续可能会对Zero进行开源,欢迎各位小伙伴多多交流了。


相关文章
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
59 1
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
|
6天前
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
14 0
小程序代码丢失!反编译找回
|
9天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
50 1
|
11天前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
15天前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
29 2
|
9天前
|
JSON 小程序 前端开发
微信小程序-人脸核身解决方案
微信小程序-人脸核身解决方案
53 0
|
15天前
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
29 0
|
16天前
|
小程序
微信小程序之weui.wxss不能引用查找的解决方案
微信小程序之weui.wxss不能引用查找的解决方案
21 0
|
5天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
54 3

热门文章

最新文章