MUI-頁面傳值2種形式

在App開發中，常常會遇到頁面間傳值的需求，好比從列表頁進入詳情頁，須要將列表頁的id傳遞過去； Html5Plus規範設計了evalJS方法來解決該問題； 但evalJS方法僅接收字符串參數，涉及多個參數時，須要開發人員手動拼字符串； 爲簡化開發，mui框架在evalJS方法的基礎上，封裝了自定義事件，經過自定義事件，用戶能夠輕鬆實現多webview間數據傳遞。有2種方式，下面分別介紹

1、詳情頁是預加載頁面，這時須要在詳情頁定義並監聽自定義事件

在詳情頁監聽自定義事件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裏面

 

2、非預加載的詳情頁（即進入詳情頁才加載頁面）

在列表頁經過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();
				})
			})