微信小程序中引入非Page模块的WXML、WXSS及JS方法

作者:百宝袋时间:2026-10-23 10:11:32浏览:142

本文详解在微信小程序中如何引入非Page页面的独立模块。通过展示目录结构、UI界面及app.json配置,演示index页如何调用log模块的组件、样式及事件响应函数。文章提供了完整的index与log模块代码示例,帮助开发者实现代码复用与模块化开发。

微信小程序引入非Page模块的WXML、WXSS及JS方法

首先介绍项目的目录结构,具体布局请参考下方图片。

微信小程序引入非Page模块的WXML、WXSS及JS方法

用户界面展示如下所示。

微信小程序引入非Page模块的WXML、WXSS及JS方法

图中“ok”按钮来自引入的log模块,该模块并非标准的Page页面。

indexButton是index页面自带的组件,index页面直接导入了Log模块中的组件、CSS样式以及事件响应函数。

最终运行效果如下图所示。

微信小程序引入非Page模块的WXML、WXSS及JS方法

app.json配置文件内容如下。

微信小程序引入非Page模块的WXML、WXSS及JS方法

接下来提供index.js、index.wxml以及index.wxss的完整代码。

微信小程序引入非Page模块的WXML、WXSS及JS方法

微信小程序引入非Page模块的WXML、WXSS及JS方法

微信小程序引入非Page模块的WXML、WXSS及JS方法

随后附上log.js、log.wxml以及log.wxss的代码。

微信小程序引入非Page模块的WXML、WXSS及JS方法

微信小程序引入非Page模块的WXML、WXSS及JS方法

微信小程序引入非Page模块的WXML、WXSS及JS方法

以上内容为本文全部,希望能为各位的学习带来帮助,同时也欢迎大家多多支持本站。

作者最新文章