MUI 仿豆瓣电影 APP跨平台混编框架 -1（MUI系统学习总结）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haoyuexihuai/article/details/86151472

前言

之前使用MUI做过一个APP的开发，学习的时候仅限于官方API，前端开发也是一知半解，抽空把仿豆瓣电影是MUI视频看了一下，部分内容跟官网已经不一样了，但是开发的思路值得学习。

1.获取ajax数据

使用的是mui.getJSON（自己用的是mui.ajax(）），数据处理单独写一个方法，数据绑定使用的是vue

//请求热映列表接口
mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {}, function(resp) {
	data_movies.movies = convert(resp.subjects);  //数据绑定到vue的movies中
});

//数据转换 ，单独做数据转换，不直接在ajax方法中处理
function convert(items) {
	var newItems = [];
	//遍历items
	items.forEach(function(item) {
		var genres = item.genres.toString().replace(/,/g, ' / ');
		//导演
		var directors = '';
		for(var i = 0; i < item.directors.length; i++) {
			directors += item.directors[i].name;
			if(i != item.directors.length - 1) {
				directors += ' / ';
			}
		}
		//演员
		var casts = '';
		for(var i = 0; i < item.casts.length; i++) {
			casts += item.casts[i].name;
			if(i != item.casts.length - 1) {
				casts += ' / ';
			}
		}

		newItems.push({
			id: item.id,
			title: item.title,
			genres: genres,
			cover: item.images.large,
			score: item.rating.average,
			directors: directors,
			casts: casts
		});
	});

	return newItems;
}

//定义Vue数据
var data_movies = new Vue({
	el: '#movies',
	data: {
		movies: []
	}
});

2.pullRefresh

控件可以在页面加载时，自动加载一次 auto: true

mui.init({
	swipeBack: true, //启用右滑关闭功能
	pullRefresh: {
		container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		down: {
			auto: false, //可选,默认false.首次加载自动下拉刷新一次
			callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		},
		up: {
			height: 50, //可选.默认50.触发上拉加载拖动距离
			auto: true, //可选,默认false.自动上拉加载一次
			contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
			callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		}
	}
});

//刷新数据，重新调用接口
function refreshData() {
	//请求热映列表接口
	mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
		start:0,
		count:10
	}, function(resp) {
		data_movies.movies.splice(0,data_movies.movies.length);
		data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
		mui('#refreshContainer').pullRefresh().refresh(true);
	});
}
//请求下一页数据
function loadMoreData(){
	//请求热映列表接口
	mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
		start:data_movies.movies.length,
		count:10
	}, function(resp) {
		data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
		mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length > resp.total);
	});
}

3.页面滚动条保留一个

scroll与DOM各有一个滚动条

mui('.mui-scroll-wrapper').scroll({
	indicators:false
});

4. 页面预加载

1.页面预加载就是在用户还没有触发跳转页面链接之前，就已经将该页面进行创建，当用户访问该页面时就可以立即进行跳转，减少页面创建时间，提高用户体验。
2.使用预加载可以通过自定义事件传递参数

• 方法一：通过mui.init()初始化方法中的preloadPages参数进行设置。

•   这种方法可以加载多个页面，但是不会返回预加载页面的引用。
  

• 方法二：使用mui.preload()方法实现预加载

•   这种方法可以立即返回对应webview的引用，但是一次只能预加载一个页面，如果需要加载多个页面，则需要多次调用。
  

//预加载电影详情页面
var detailPage = mui.preload({
	id:'movie-detail',
	url:'./html/movie-detail.html'
});

//打开电影详情页面
function open_detail(item){
	//触发详情页面的movieId事件
	mui.fire(detailPage,'movieId',{
		id:item.id
	});
	//打开
	mui.openWindow({
		id:'movie-detail'
	});
}


//Top页面给detailPage赋值，getWebviewById:查找指定标识的webviewObject对象
//给detailPage赋值,根据ID获取详情页面
detailPage = plus.webview.getWebviewById('movie-detail');
if(!detailPage){
	detailPage = mui.preload({
		id:'movie-detail',
		url:'./movie-detail.html'
	});
}

详情页面获取数据

//添加movieId自定义事件
window.addEventListener("movieId", function(event) {
	//获取事件参数
	var id = event.detail.id;
	console.log(id);
}