2019独角兽企业重金招聘Python工程师标准>>> 
假如3个页面的例子，第一个是index.html，第二个html文件夹中建2个页面moive_detail.html，第三个演员详情页cast_detail.html，此例子结合vue，主要知识点有页面传值方法，滚动到顶部，下拉刷新上拉加载，vue数据准备与数据绑定，mui接口调用，蒙版使用
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>首页</title><link href="css/mui.min.css" rel="stylesheet" /><link href="css/style.css" rel="stylesheet" /><style>html,body {background-color: #fff;}.mui-content {background: #fff;}.title {margin: 20px 15px 10px;color: #6d6d72;font-size: 15px;padding-bottom: 51px;}.wrap-search {margin: 15px;background: #f5f5f5;height: 30px;border-radius: 5px;text-align: center;}.item-img {width: 60px;height: 90px;margin-right: 10px;}</style></head><body><div class="mui-content" style="background:white;;"><div class="wrap-search"><span class="mui-icon mui-icon-search" style="line-height:30px;color:#aaa;font-size:16px;"></span><span style="line-height:30px;color:#aaa;font-size:14px;">电影/电视/影人</span></div><div id="refreshContainer" class="mui-scroll-wrapper" style="top:0;padding-bottom:50px;"><div class="mui-scroll"><ul id="movies" class="mui-table-view"><li class="mui-table-view-cell" v-for="item in movies" @tap="open_detail(item)"><img v-bind:src="item.cover" alt="" class="item-img mui-pull-left" /><div class="mui-ellipsis dark-big">{{item.title}}</div><div class="mui-ellipsis gray-small"><span class="gray-small">{{item.genres}}</span><span v-if="item.score>0" class="orange-small">{{item.score}}分</span><span v-else class="orange-small">暂无评分</span></div><div class="mui-ellipsis gray-small">导演：{{item.directors}}</div><div class="mui-ellipsis gray-small">主演：{{item.casts}}</div></li><li class="mui-table-view-cell"></li></ul></div></div></div><script src="js/mui.min.js"></script><script src="js/util.js"></script><script src="js/vue.min.js"></script><script type="text/javascript">//(function() {//预加载电影详情页var data_movies = new Vue({el: "#movies",data: {movies: [],}})mui.init({swipeBack: true, //启用右滑关闭功能pullRefresh: {container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down: {style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式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().endPulldown();})}//请求下一页数据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);})}var detailPage = null;var targetPage;mui.plusReady(function() {//var self = plus.webview.currentWebview(); // 创建子webview窗口 并初始化var self=plus.webview.currentWebview();//添加show事件，切换到首页时，滚到最顶部self.addEventListener("show",function(e){window.scrollTo(0,0);},false)var aniShow = {};util.initSubpage(aniShow);var nview = plus.nativeObj.View.getViewById('tabBar'),activePage = plus.webview.currentWebview(),targetPage,subpages = util.options.subpages,pageW = window.innerWidth,currIndex = 0;/*** 根据判断view控件点击位置判断切换的tab*/nview.addEventListener('click', function(e) {var clientX = e.clientX;if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {currIndex = 0;} else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.67)) {currIndex = 1;} else if(clientX > parseInt(pageW * 0.67)) {currIndex = 2;}// 匹配对应tab窗口 if(currIndex > 0) {targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);} else {targetPage = plus.webview.currentWebview();}if(targetPage == activePage) {return;}//底部选项卡切换util.toggleNview(currIndex);// 子页面切换util.changeSubpage(targetPage, activePage, aniShow);
// targetPage.addEventListener("show",function(e){
// window.scrollTo(0,0);
// console.log("顶部");
// },false)//更新当前活跃的页面activePage = targetPage;});//预加载页面detailPage = mui.preload({id: "moive-detail",url: "./html/moive_detail.html"});});//给搜索框添加点击事件mui(".wrap-search")[0].addEventListener("tap", function() {console.log("click....")mui.openWindow({id:"search",url:"./html/search.html"})})//mui(".mui-scroll-wrapper").scroll({})//请求热映列表接口function open_detail(item) {// 触发详情页面的movieId事件mui.fire(detailPage, 'moiveId', {id: item.id})// 打开预加载的电影详情页mui.openWindow({id: 'moive-detail'})}//数据转换function convert(items) {var newItems = [];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;}//})();</script></body></html>moive_detail.html
<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../css/mui.min.css" rel="stylesheet" /><link href="../css/style.css" rel="stylesheet" /><style>.top-image-block {text-align: center;padding-top: 10px;padding-bottom: 10px;background: #3c3c3c;}.mui-bar-nav {-webkit-box-shadow: none;box-shadow: none;}.mui-ellipsis-4 {display: -webkit-box;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}.comment-head-photo {width: 30px;height: 30px;border-radius: 30px;}.mui-table-view {position: relative;margin-top: 0;margin-bottom: 0;padding-left: 0;list-style: none;background: #efeff4;}.mui-table-view:after {position: absolute;right: 0;bottom: 0;left: 0;height: 0px;content: "";-webkit-transform: scaleY(0.5);transform: scaleY(0.5);background-color: #c8c8cc}.mui-table-view:before {position: absolute;right: 0;bottom: 0;left: 0;height: 1px;content: "";-webkit-transform: scaleY(0.5);transform: scaleY(0.5);background-color: #c8c8cc}.mui-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;background-color: #f5f5f5;}</style></head><body><div id="content"><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">{{title}}</h1></header><div class="mui-content" style="background:#fff;"><div class="top-image-block"><img :src="cover" alt="" style="width:160px;height:240px;vertical-align:top" /></div><div style="padding:15px;height:90px;"><div style="float:left"><span class="drak-big" style="display:block">{{title}}</span><span class="gray-small">{{year}}/{{countries}}/{{genres}}</span><span class="gray-small" style="display:block">{{directors}}导演作品</span></div><div style="width:60px;height:60px;background:#fff;float:right;text-align:center;box-shadow:0px 0px 10px #aaa"><span class="gray-small" style="display:block;vertical-align:middle;margin-top:5px;line-height:18px;">豆瓣评分</span><span class="orange-big" style="display:block;line-height:20px;" v-if="score>0">{{score}}</span><span class="orange-big" style="display:block;line-height:20px;" v-else>暂无评分</span><span class="gray-small" style="display:block;line-height:15px;">{{ratingCount}}人</span></div></div><div style="height:0.5px;background:#a2a2a2;margin-left:15px;"></div><p class="gray-samll" style="margin:10px 0px 0px 15px">剧情简介</p><p class="dark-medium mui-ellipsis-4" style="margin:0px 15px 0px 15px">{{summary}}</p><p class="gray-small" style="margin:10px 0px 0px 10px">演员</p><div style="overflow-x:scroll;white-space:nowrap;padding-left:15px;"><div class="" style="display:inline-block" v-for="item in casts" @click="open_detail(item)"><img :src="item.avatars.medium" alt="" style="width:70px;height:100px;margin-right:10px;" /><div class="dark-samll mui-ellipsis" style="width:70px;text-align:center;">{{item.name}}</div></div></div><p class="dark-medius" style="margin-top:10px;text-align:center;background:#e6e6e6;height:40px;line-height:40px;">评论</p><ul class="mui-table-view" style="background:white"><li class="mui-table-view-cell"><img src="" alt="" class="comment-head-photo mui-pull-left" /><div><span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">hello world</span><span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span></div><p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p></li><li class="mui-table-view-cell"><img src="" alt="" class="comment-head-photo mui-pull-left" /><div><span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">hello world</span><span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span></div><p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p></li><li class="mui-table-view-cell"><img src="" alt="" class="comment-head-photo mui-pull-left" /><div><span class="dark-medium" style="line-height:30px;text-align:center;margin-left:10px;">hello world</span><span class="gray-medium" style="line-height:30px;text-align:center;float:right">2017-8-5</span></div><p class="dark-medium" style="margin-left:40px;">这部电影非常棒</p></li></ul></div></div><script src="../js/mui.min.js"></script><script src="../js/vue.min.js"></script><script type="text/javascript">mui.init()//默认数据function getDefaultData() {return {title: "",cover: "",score: "",ratingCount: "",summary: "",countries: "",year: "",genres: "",casts: [],directors: []}}//vue对象var data_detail = new Vue({el: "#content",data: getDefaultData(),methods: {resetData: function() {//Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。//语法 Object.assign(target, ...sources)//this.$data,实例属性与方法。它们都有前缀 $Object.assign(this.$data, getDefaultData())},open_detail: function(item) {//打开演员详情mui.openWindow({id: "cast-detail",url: "./cast-detail.html",extras: {castId: item.id}})}}})mui.plusReady(function() {var self = plus.webview.currentWebview();//添加hide事件，清空页面数据，滚到最顶部self.addEventListener("hide", function(e) {window.scrollTo(0, 0);data_detail.resetData()}, false)})//添加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) {
// console.log(resp.error)
// if(resp.code == 5000) {
// plus.nativeUI.closeWaiting();
// mask.close();
// plus.nativeUI.alert("没有详细数据！");
// mui.back();
// } else {
// var directors = [];
// for(var i = 0; i < resp.directors.length; i++) {
// directors.push(resp.directors[i].name)
// }
//
// data_detail.title = resp.title;
// console.log(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, " / ");
// console.log(data_detail.directors)
// plus.nativeUI.closeWaiting();
// mask.close();
// }
// })mui.ajax({url:"https://api.douban.com/v2/movie/subject/" + id,dataType: 'json', //服务器返回json格式数据type: 'get', //HTTP请求类型timeout: 10000, //超时时间设置为10秒；//加上下面的header会报错
// headers: {
// 'Content-Type': 'application/json'
// },success: function(resp) {var directors = [];for(var i = 0; i < resp.directors.length; i++) {directors.push(resp.directors[i].name)}data_detail.title = resp.title;console.log(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, " / ");console.log(data_detail.directors)plus.nativeUI.closeWaiting();mask.close();console.log("hi");},error: function(xhr, type, errorThrown) {//异常处理；console.log(xhr);console.log(type);console.log(errorThrown);plus.nativeUI.closeWaiting();mask.close();plus.nativeUI.alert("没有详细数据！");mui.back();}});})</script></body></html>cast_detail.html
<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../css/mui.min.css" rel="stylesheet" /><link href="../css/style.css" rel="stylesheet" /><style>.top-image-block {text-align: center;padding-top: 10px;padding-bottom: 10px;background: #333;}.mui-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;background-color: #f5f5f5;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">影人</h1></header><div class="mui-content"><div class="top-image-block"><img :src="cover" alt="" style="width:160px;height:240px;vertical-align:top;" /></div><div style="padding:15px;"><div class="dark-big">{{name}}</div><div class="gray-medium">{{enName}}</div><div class="gray-small">个人简介</div><div class="gray-medium">{{summary}}</div></div><div class="gray-samll" style="padding-left:15px;">代表作品</div><div style="overflow-x:scroll;white-space:nowrap;padding-left:15px;"><div style="display:inline-block" v-for="item in works"><img :src="item.subject.images.medium" alt="" style="widht:70px;height:100px;margin-right:10px;" /><div class="dark-small mui-ellipsis" style="width:70px;text-align:center">{{item.subject.title}}</div><div class="orange-small mui-ellipsis" style="width:70px;text-align:center;line-height:20px;">{{item.subject.rating.average}}分</div></div></div></div><script src="../js/mui.min.js"></script><script src="../js/vue.min.js"></script><script type="text/javascript">mui.init()function getDefaultData() {return {name: "",enName: "",cover: "",summary: "",works: []}}var data_detail = new Vue({el: ".mui-content",data: getDefaultData(),methods: {resetData: function() {Object.assign(this.$data, getDefaultData())}}})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();})})</script></body></html>
