MUI-page pass value 2 forms

In App development, the need to pass values ​​between pages is often encountered. For example, when entering the details page from the list page, the id of the list page needs to be passed. The Html5Plus specification designs the evalJS method to solve this problem; but the evalJS method only accepts characters String parameters. When multiple parameters are involved, developers need to spell the strings manually. To simplify development, the mui framework encapsulates custom events based on the evalJS method. Through custom events, users can easily realize data transfer between multiple webviews. . There are 2 ways, as follows

1. The details page is a preloaded page. At this time, you need to define and monitor custom events on the details page.

Listen to the custom event moiveId on the details page (custom events defined on the details page)

//添加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();
				})
			})

The list page triggers a custom event through fire (the details page is preloaded)

            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'
				})
			}

Note: The preload page should be written to mui.plusReady

 

2. Non-preloaded details page (that is, the page is loaded after entering the details page)

Pass parameters through the extra of mui.openWindow() on the list page. The following is the parameter passed when opening the details page method in the vue method

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
							}
						})
					}
				}
			})

 

On the details page, the parameters passed from the list page are obtained through the castId attribute passed from the currentWebview and the list page, as shown in the following code snippet 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();
				})
			})