uni微信小程序优化,自动添加全局组件
在网页可以很轻松的添加一个类似tip的全局组件,但是在微信小程序,每个页面都是单独的,无法使用全局组件,
基于此限制,我写了一个自动在每个页面添加组件的webpack插件。
实现方法
方法大家应该都能想到,在main.js里使用vue.component()来注册全局vue组件,然后在每个页面的vue的文件里面
的template插入全局组件的标签就好了。
源码位置: uni-optimize
使用方法
chainWebpack: config => {
config
.plugin("importPlugin")
.use(importPlugin,[
// 数组里面每一个对象就是一个全局组件
{
// 组件在页面里的标签名
name: "ii",
// 组件针对config的地址
src: "./src/com/ii.vue",
// 不包含哪些页面,没有就是全部页面
excludeFun: (filePath) => {
const ignore = ["./src/views/Home.vue"];
return ignore.some((item) => filePath.includes(item));
},
// 标签的传参,最后变成
// <ii
// fa="123"
// @er="cc"
// />
// 标签的传参,如果要接收子组件的emit,最好在子组件通过this.$parent.cc来判断父组件是否有这个方法以防报错,
// 父组件的方法需要自己收到加,不支持slot
paramFun: () => {
return [
{
key: "fa",
value: "123",
},
{
key: "@er",
value: "cc",
},
];
},
},
])
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现