网上说的对,7月1日建党节,8月1日建军节,10月1日国庆节,下半年才是一年中最重要的半年,所以我们要好好珍惜下半年,
一起努力改bug[呲牙]
事故起源
- 由于公司业务扩展需要,自己的技术突破需要,适应市场需要,于是我带领自己团队开始走上了uniapp,刚开始使用发现uniapp的生态挺好的,很多免费的组件,写法也舒服(和vue一样),得心应手。
- 直到需要引入uni-UI及自定义组件时,天大的问题就来了,因为引入uni-UI是按需引入(即看见哪个组件需要我才引入,不引入多余的组件,虽然官网说不引用的组件不会打包),引入之后发现每次写完代码编译,小程序控制台都会报一些组件打包过的错误页面变成空白,对此无从下手,也不知道怎么解决,项目又很急,导致我们每次保存一次又要重启一下项目,这样才能正常使用,特别浪费时间,这种做法效率没提高反而降低了,以至于我们要每天加班。
- 这过程中,我有2次在社区发起提问(如下图),发现社区提问是真的麻烦比微信提问填写内容还多,填的多就算了结果还没人给我回答(就算回答也只是质疑我的问题,得不到解决),让我对uniapp又冷漠了很多分可能维护人员太少,主动热情的人也没有微信社区多。
- 得不到解决,我又去百度搜索了好几百遍,发现居然没有人跟我遇到同一个问题,虽然有一个报错相似但解决问题不是和我一样的,他的问题只是文件重名导致;我也本着不放过任何一个答案,我也翻了好几遍,确认我没文件重名错误;
// 错误代码
页面【uni_modules/uni-pagination/components/uni-pagination/uni-pagination]错误:
TypeError: Cannot read property 'call' of undefined
- 上报错截图
![TY3US4D2(M${(M)$JDE4)0.png
解决问题
- 问题描述的一大段,这里开始解决问题了;我找了很多办法都没办法解决,问了朋友也没有遇到过,最后我在文档上,加了一个QQ群,在群里问了,发现官方的人基本不会出来回答问题,也不知道是不是周末的原因,还是有点高冷哈,我又加了uni-UI的群,终于有了一个小伙伴回答我的问题,他说代码包太大会报这种错误,在运行时选择下压缩代码就行,听君一席胜敲几年代码,看见了新的希望,我立马按他说的操作,果真问题解决了,我的心头之烦烙下了一个帷幕。
- 具体怎么操作如下图:
- 问题就这样被解决了。
另外多教一招,自定义组件无需引入直接写标签
- 这也没什么特异功能,文档也有写,我这里只是重复写一遍,让没有认真看文档的人看看怎么操作哈;
官方原话:在 uni-app 项目中,页面引用组件和组件引用组件的方式都是一样的(可以理解为:页面是一种特殊的组件),均支持通过 `easycom` 方式直接引用。
easycom 规范详细介绍,参考:easycom
使用
- 第一步:只要组件安装在项目的components目录下,并符合
components/组件名称/组件名称.vue
目录结构。组件代码如下:
<template>
<view class="container">
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
<script>
// 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
-
这种引入还可以不管components目录下安装了多少组件,
easycom
打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。 -
第二步,可以在需要的页面中,直接使用组件名字即可;
-
而我使用了自定义easycom配置
-
配置内容只需要在pages.json中写自己想要的规制即可,示例如下:
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}
谈谈微信原生转uniapp一个月开发的感受吧
- 我也不算第一次使用uniapp吧,之前接过私单就是用uniapp开发的,我就在他的基础上修改维护增加内容,感觉还行只要会vue的人都会使用uniapp,这句话没毛病,使用简单快捷;
- 使用uniapp开发,写代码效率确实会高一点,一个页面包含三个文件,不用切来切去,语法使用简单易上手;
- uniapp插件市场确实挺多好用的插件,对一些复杂交互引入别人成熟的插件很省时间;
- uniapp可以直接使用预编译样式,且不用自己安装sass等工具,拿来就用确实很方便;
- uniapp当项目比较大时,每次保存需要编译时间比较长,然后切换到微信开发工具又需要加载,一共花费时间也不少;
- uniapp社区开发者和官方人员回复问题没有微信社区积极主动,提交问题时需要提交信息太多,当遇到一些框架问题,对我们普通开发者就无从下手,任人宰割了。
- uniapp因为支持多端运行,文档会显得比较复杂,稍有看错就会用错功能,本以为该功能小程序支持结果没看准就会错失对需要的审判。
先写这么多了,对你有帮助记得点个赞,你的点赞是作者分享的动力~
谢谢大哥,我和你一样
我丢,原来是代码压缩的问题,一直找不到原因
这种文章应该在多在uni-app社区发,在这里很快就被刷掉的,很少人会在这个社区去过滤查询uni-app相关的问题或资源。别想着在社区加入uni-app专题这种,估计官方管理员都不乐意吧。