首页 » Uni-app » 【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)

Uni-App 微信项目练习列表传参聊天窗口 新手教程(二)

昨天是简单的去介绍了,微信首页列表的创建,今天介绍一下我们在点击首页列表的时候,跳转到聊天的窗口。在通过过简单的URL传递头像,名字,消息内容等数据过来。基于昨天的教程上做的续篇。

0x0 修改列表

首先我们得找到他最开始的列表view标签如图红色(view标签可以理解为一个div)

【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)

它位于uni-media-list这一行,找到后。我们就要这个框内的任意位置能跳槽且首页列表传参到聊天窗口数据,所有我们得在这行上添加一个点击事件,此外我们还得给她一个ID。我们得在这行添加@click=”goDetail” 和 :data-id=”key”,代码图下

0x1 添加函数且验证数据(怎么说感觉好变扭)

[tip type=”error”]因为本主题前端使用VUE渲染,以下代码无法正常插入pre标签中,暂时使用图片代替[/tip]

【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)

在script标下中methods方法中,执行点击事件得函数,给她(为啥是她,而不是它。因为程序员来说代码就是半个女盆友)一个随意得参数 console.log打印下

 methods: {
	 goDetail(e) {
 		console.log(e)
 	})
 }

随后我们去浏览器F12控制台,点击一下列表再看下console,有id出现了是吧,虽然没啥内容在里面,但是女盆友至少没生气对吧(BUG)

【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)

那我们就继续往下走,我们首先得拿到我们点击这个ID,看上图id是在currentTarget下方的dataset里面,所有我们拿到id就应该打印

console.log(e.currentTarget.dataset.id)

在刷新点一点,就可以正常出现id   0,1,2等。我们还得拿到里面的数据哇,头像 名字等等。你可以这样理解,我们是从ID里面获取数据,ID来自哪里,来自列表,那打印的时候就应该加上这个列表this.list,列表下有很多东西他是一个数组

 console.log(this.list[e.currentTarget.dataset.id])

0x2 传递参数

因为枫瑞也是新手,用简单的URL方式去传递(URL会暴露数据哈),点击打开新界面使用navigateTo

 greet (){
 	console.log(this.list[e.currentTarget.dataset.id])
	uni.navigateTo({
	        url: '../promore/promre'
	})
 }

 

在操作的时候我们先简化一下数据,

let list = this.list
  let id = e.currentTarget.dataset.id

 

字符串拼接`&名字={参数}`,这里注意下不是单引号,是数字1隔壁那个

methods: {
	goDetail(e) {
 		console.log(this.list[e.currentTarget.dataset.id])
		let list = this.list
		let id = e.currentTarget.dataset.id
 		uni.navigateTo({
		        url: `../chat/chat?data=${list[id].title}&time=${list[id].time}&content=${list[id].content}&img=${list[id].img}`
 		})
	}
}

 

这是时候我们点击 就会打开界面,在控制台也可以看到传过来的数据

【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)

0x3 接收数据

在chat界面 onLoad 接(官网文档复制来的)

onLoad(e) {
	console.log(e)
	if (e.data) {
		this.data = e.data;
		this.time = e.time;
		this.content = e.content;
		this.img = e.img;
		this.wechat = e.wechat;
		this.gender = e.gender;
		this.region= e.region;
	}
//},

 

接过来包保存下,我们在点击头像的时候也会打开一个界面,也可以在把这里接的数据在传给第三个界面。这样不够美观,其实我们可以把个人信息的数据存到本地,再去调用。chat界面代码大家在源码看哈!不复制到文章里面了!

 

2019.3.25更新完整例子:简单的做了下我的,发现界面,朋友圈和设置都没有做啦研究下api哈!

Uni-App 微信项目练习含界面传参 新手教程(一)地址

 

 

抱歉,隐藏内容 回复 后刷新可见

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《【完结】Uni-App 微信项目练习首页列表传参到聊天窗口 新手教程(二)》 发布于2019-03-22

赞(1) 生成海报

评论 13

3 + 3 =
  1. #0

    真心不错不错

    顾春1年前 (2019-05-20)
  2. #0

    谢谢大佬哈

    国国1年前 (2019-05-19)
  3. #0

    关注很久了,一直都很喜欢枫瑞的东西,我会一直支持你的!
    东西很好用,感谢,还会帮小白,特别感谢!!!

    小爱1年前 (2019-04-28)
  4. 谢谢大佬哈

    管理员枫瑞博客2年前 (2019-03-29)
  5. #0

    如此好文章一定要留下名啊

    妙文屋2年前 (2019-03-28)
  6. 我网站底部 有原作者的地址哈

    管理员枫瑞博客2年前 (2019-03-24)
  7. #0

    大佬好,这个主题很好看啊,我也想整一个!

    猫鼬2年前 (2019-03-22)
  8. 第一次要回源加载 会慢一点哈哈

    管理员枫瑞博客2年前 (2019-03-22)
  9. #0

    好人卡 :razz:

    张大炮2年前 (2019-03-22)
  10. #0

    枫jb瑞 :evil:

    张大炮2年前 (2019-03-22)

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....