评论

uniapp编译报错出现页面空白问题解决及组件无引入使用

解决uniapp无缘无故报错导致页面空白问题

网上说的对,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,这句话没毛病,使用简单快捷;
  1. 使用uniapp开发,写代码效率确实会高一点,一个页面包含三个文件,不用切来切去,语法使用简单易上手;
  2. uniapp插件市场确实挺多好用的插件,对一些复杂交互引入别人成熟的插件很省时间;
  3. uniapp可以直接使用预编译样式,且不用自己安装sass等工具,拿来就用确实很方便;
  4. uniapp当项目比较大时,每次保存需要编译时间比较长,然后切换到微信开发工具又需要加载,一共花费时间也不少;
  5. uniapp社区开发者和官方人员回复问题没有微信社区积极主动,提交问题时需要提交信息太多,当遇到一些框架问题,对我们普通开发者就无从下手,任人宰割了。
  6. uniapp因为支持多端运行,文档会显得比较复杂,稍有看错就会用错功能,本以为该功能小程序支持结果没看准就会错失对需要的审判。

先写这么多了,对你有帮助记得点个赞,你的点赞是作者分享的动力~

最后一次编辑于  2022-07-04  
点赞 6
收藏
评论

3 个评论

  • .
    .
    2023-03-21

    谢谢大哥,我和你一样

    2023-03-21
    赞同
    回复
  • Lx.
    Lx.
    2023-01-17

    我丢,原来是代码压缩的问题,一直找不到原因

    2023-01-17
    赞同
    回复
  • 武曲心
    武曲心
    2022-07-04

    这种文章应该在多在uni-app社区发,在这里很快就被刷掉的,很少人会在这个社区去过滤查询uni-app相关的问题或资源。别想着在社区加入uni-app专题这种,估计官方管理员都不乐意吧。

    2022-07-04
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2022-07-04
      我也不关心这些啦,只给有缘人看哦
      2022-07-04
      回复
登录 后发表内容