跨平台混编框架 MUI 仿豆瓣电影 APP 第五章

5-1 电影详情页面跳转和数据传递

• 预加载卡了我小半天.和视频,和源码对不上是很烦躁的.

1. 问题

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

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

这个预加载要放在mui.plusReady里面.
open_detail要放在外面.
这就会报错找不到detailPage.于是我去掉var,让detailPage成为全局变量.

成功预加载跳转.
li添加点击事件.

@tap="open_detail(item)"

• 显示所以加载页面,判断是否预加载成功.

                    mui.plusReady(function(){
                    setTimeout(function(){
                    var array = plus.webview.all();
                    if(array){
                    for(var i=0,len=array.length;i

• movie-detail.html

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

微信截图_20180205215006.png

Gif_20180205_214959.gif

5-2-3电影布局

没什么好说的.

5-4,5 获取数据

这里是hide函数,把webview 滑动到0,0,然后清空数据.
进入请求数据.
有些vue的还看的不太懂.

5-6演员页面跳转和数据传递.

• 使用mui.openWindow打开详情页面
• 使用extras 传递参数

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

• 在接收页面,cast-detail.html

var self = plus.webview.currentWebview();
self.id就是传入id

5-5 演员页面布局和请求.

• 很简单.

成果.

Gif_20180206_151350.gif