MUI-页面传值2种形式原

tianyawhl

发布于 2019-04-04 10:14:02

1.9K1

发布于 2019-04-04 10:14:02

在App开发中，经常会遇到页面间传值的需求，比如从列表页进入详情页，需要将列表页的id传递过去； Html5Plus规范设计了evalJS方法来解决该问题；但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串；为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。有2种方式，下面分别介绍

一、详情页是预加载页面，这时需要在详情页定义并监听自定义事件

在详情页监听自定义事件moiveId（在详情页定义的自定义事件）

//添加movieId自定义事件
			window.addEventListener("moiveId", function(event) {
				var id = event.detail.id;
				//console.log(id);
				var mask = mui.createMask();
				mask.show();
				plus.nativeUI.showWaiting("加载中", {
					width: "100px",
					height: "100px"
				})

				//根据id请求电影详情数据
				mui.getJSON("https://api.douban.com/v2/movie/subject/"+id,function(resp){
					var directors=[];
					for(var i=0;i<resp.directors.length;i++){
						directors.push(resp.directors[i].name)
					}
					
					data_detail.title=resp.title;
					data_detail.cover=resp.images.large;
					data_detail.score=resp.rating.average;
					data_detail.ratingCount=resp.ratings_count;
					data_detail.summary=resp.summary;
					data_detail.countries=resp.countries.toString().replace(/,/g," / ");
					data_detail.year=resp.year;
					data_detail.genres=resp.genres.toString().replace(/,/g," / ");
					data_detail.casts=resp.casts;
					data_detail.directors=directors.toString().replace(/,/g," / ");
					plus.nativeUI.closeWaiting();
					mask.close();
				})
			})

列表页通过fire触发自定义事件（详情页是预加载的情况）

            var detailPage = null;
			mui.plusReady(function() {
				//预加载页面
				detailPage = mui.preload({
					id: "moive-detail",
					url: "./html/moive_detail.html"
				});
			});
            function open_detail(item) {
				// 触发详情页面的movieId事件
				mui.fire(detailPage, 'moiveId', {
					id: item.id
				})
				// 打开预加载的电影详情页
				mui.openWindow({
					id: 'moive-detail'
				})
			}

注意：预加载页面要写到mui.plusReady里面

二、非预加载的详情页（即进入详情页才加载页面）

在列表页通过mui.openWindow()的extra传递参数，下面是vue方法中打开详情页方法时传参

var data_detail = new Vue({
				el:"#content",
				data:getDefaultData(),
				methods:{
					resetData:function(){
						Object.assign(this.$data,getDefaultData())
					},
					open_detail:function(item){
						//打开演员详情
						mui.openWindow({
							id:"cast-detail",
							url:"./cast-detail.html",
							extras:{
								castId:item.id
							}
						})
					}
				}
			})

在详情页通过currentWebview与列表页传过来的castId属性获取列表页传过来的参数，如下面代码片段中的var self =plus.webview.currentWebview();self.caseId

mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var mask = mui.createMask();
				mask.show();
				plus.nativeUI.showWaiting("加载中", {
					width: "100px",
					height: "100px"
				})

				console.log("self,castID" + self.castId);
				mui.getJSON("https://api.douban.com/v2/movie/celebrity/" + self.castId, function(resp) {
					data_detail.name = resp.name;
					data_detail.enName = resp.name_en;
					data_detail.cover = resp.avatars.medium;
					data_detail.summary = resp.gender + "," + resp.born_place;
					data_detail.works = resp.works;
					plus.nativeUI.closeWaiting()
					mask.close();
				})
			})

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/04/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

webview

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

webview

登录后参与评论

0 条评论

热度