文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

在uni-app中踩过的坑及解决

2023-05-16 11:30

关注

1. props传值变量名不要使用id

页面:

<scrollView :dataInfo.sync='questions' myId='333' id='444'>

scrollView组件:

created() {
	console.log(this.myId)
	console.log(this.id)
}

输出结果:

2.组件没有页面事件

也就没有onload等事件,只支持vue原生事件

那么created、mounted与onload 的先后顺序是怎么样的呢

参考uni-app官网文档:https://uniapp.dcloud.io/collocation/frame/lifetime

created 是在模板渲染前,也就是在onload之前。

mounted是在模板渲染之后,onload是在页面渲染之后,那么具体哪个先呢。测试结果如下:

mounted 是在onload之后,具体原因日后有空楼主去研究一下。

正确加载顺序:

created  > onload  > mounted

所以如果你在onload中对页面参数赋值,正好要将这个值传给组件。组件又正好需要onload时调用时,要使用mounted事件。

页面代码:

onLoad(obj) {
			console.log('onLoad:')
			console.log(obj)
			this.myId=obj.id

再把myId传给组件

组件代码:

created() {
	console.log('created:')
	console.log('myId:'+this.myId)
		},
mounted() {
	console.log('mounted:')
	console.log('myId:'+this.myId)
}

结果:

3.关于背景图片

首先引入一下uni-app官网对背景图片的描述:

支持 base64 格式图片。

支持网络路径图片。

使用本地路径背景图片需注意:

如果是要做微信小程序的话,不分包整个应用大小得在2MB以下,所以最好将图片存放在服务器上面。如果要放在本地切记压缩后,通过<img> 去设置背景图样式。使用background-img 在小程序下是无效的。

当你通过变量+字符串的形式去设置img 地址时,系统会给你报500错误。像这样:

 <img class="img-bom" :src="IMG_URL +'home-bg-bottom.png'">

但是图片照样显示出来了,并不影响效果。楼主网上查了一下意思大致是由于页面刚加载的时候没有读取变量,所以报错,后续又加载上了所以读取到了文件地址。(如有不对请指正)

所以有强迫症的小伙伴可以把变量名写成单独的一个计算属性就不会报错了,像这样:

<img class="img-top" :src="topImg">
 
topImg(){
	return this.IMG_URL +'home-bg-top.png'
}

4.代理

根据官网说明,uni-app的devServer就是webpack下的devServer,具有相同的配置属性,但是属性值暂时不支持以函数为形式的值。

打开manifest.json的源码视图,添加代码:

"h5": {
		"devServer": {
			"port": 8000,
			"disableHostCheck": true,
			"proxy": {
				"/WxPalmHal": {
					"target": "http://192.168.1.46:4000/wxapi/WxPalmHal",
					
					"pathRewrite": {"^/WxPalmHal" : ""}
					
				}
			}
		}
	},

5.z-index的问题

需要对z-index的元素添加position: relative属性

9.8补充: 现在发现我好傻,z-index本来不就是只能在定位元素上使用嘛。。

6.trim去除前后空格失效

总结

就先这样吧, 后续有问题将会持续记录

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯