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

github地址:
https://github.com/mengfa/MUIMovie

2-1 MUI基础知识概述

当前页面加载子页面

mui.init({subpages:[]})

直接打开新页面

mui.openWindow({})

在当前页面预加载下一个页面

mui.init({preloadPages:[]})

使用简单,可预加载多个页面,但不会返回预加载每个页面的引用

mui.preload({})

可立即返回对应webview的引用,但一次仅能预加载一个页面.

使用addEventListener监听特定元素

btn.addEventListener("tap",function(){
  console.log("tap event trigger");})

使用 .on()批量绑定

mui(".mui-table-view").on('tap', '.style',function(){} )

请求借口

mui.ajax()
mui.post()
mui.get()
mui.post()
mui.getJSON()

3-1 制作主页Tab

目的: 由初始化的5个选项卡变成3个.
操作: 到manifest.json 更改text,width,25->33删除后两个.
注意: tag,俩俩一组的.一个图标一个文字.
manifest.json

"tags": [
                        {
                            "tag": "font",
                            "id": "indexIcon",
                            "text": "\ue500",
                            "position": {
                                "top": "4px",
                                "left": "0",
                                "width": "33%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/mui.ttf",
                                "align": "center",
                                "size": "24px"
                            }
                        }, {
                            "tag": "font",
                            "id": "indexText",
                            "text": "热映",
                            "position": {
                                "top": "23px",
                                "left": "0",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        },{
                            "tag": "font",
                            "id": "newsIcon",
                            "text": "\ue201",
                            "position": {
                                "top": "4px",
                                "left": "20%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/mui.ttf",
                                "align": "center",
                                "size": "24px"
                            }
                        }, {
                            "tag": "font",
                            "id": "newsText",
                            "text": "消息",
                            "position": {
                                "top": "23px",
                                "left": "20%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        },{
                            "tag": "font",
                            "id": "contactIcon",
                            "text": "\ue100",
                            "position": {
                                "top": "4px",
                                "left": "55%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/mui.ttf",
                                "align": "center",
                                "size": "24px"
                            }
                        }, {
                            "tag": "font",
                            "id": "contactText",
                            "text": "通讯录",
                            "position": {
                                "top": "24px",
                                "left": "55%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        },{
                            "tag": "font",
                            "id": "newwindowIcon",
                            "text": "\ue6c9",
                            "position": {
                                "top": "4px",
                                "left": "75%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px"
                            }
                        }, {
                            "tag": "font",
                            "id": "newwindowText",
                            "text": "新窗口",
                            "position": {
                                "top": "24px",
                                "left": "75%",
                                "width": "25%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "align": "center",
                                "size": "10px"
                            }
                        },
                        {
                            "tag": "rect",
                            "id": "tabBorder",
                            "position": {
                                "top": "0",
                                "left": "0",
                                "width": "100%",
                                "height": "1px"
                            },
                            "rectStyles": {
                                "color": "#ccc"
                            }
                        }
                    ]

index.html删掉半圆水平居中.
有可能和源码不一样,注意,删除中间的时候.不要误伤

                    //自定义监听图标点击事件
                    var active_color = '#fff';

一共调整3个文件.index.html,util.js还有manifest.json
大同小异.看我github的MUI

Screenshot_2018-02-03-16-28-00-088_HBuilder.png

Gif_20180203_163152.gif

3-2模板调整实现

删除不必要的
留下主页,和2个选项卡.

删除一个,改名2个.
需要在util.js更改路由吧.

var util = {
    options: {
        ACTIVE_COLOR: "#007aff",
        NORMAL_COLOR: "#000",
        subpages: ["html/main-billboard.html", "html/main-setting.html"]
    },

删除多余的默认的文件.

第四章电影列表功能实战

4-1 搜索框实现

index.html ,添加html和css ,外加js.

<style>
            
            html,
            body {
                background-color: white;
            }
            
            .wrap-search {
                margin: 15px;
                background: #E6E6E6;
                height: 30px;
                border-radius: 5px;
                text-align: center;
            }
            
            .item-img {
                width: 60px;
                height: 90px;
                margin-right: 10px;
            }
            
            
        </style>
  ...

<div class="wrap-search">
                <span class="mui-icon mui-icon-search" style="line-height: 30px;color: #AAAAAA;font-size: 16px;"></span>
                <span style="line-height: 30px;color: #AAAAAA;font-size: 14px;">电影/电视剧/影人</span>
            </div>

 ...
//给搜索框添加点击事件
                mui('.wrap-search')[0].addEventListener('tap', function() {
                    
                            console.log('click');
                
                
                });

微信截图_20180203174757.png

4-2 热映列表布局

css/style.css写自己的css

<div class="mui-scroll-wrapper" style="top: 50px;">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <img class="mui-pull-left item-img" />
                            <div class="mui-ellipsis dark-big">
                                羞羞的铁拳
                            </div>
                            <div class="mui-ellipsis">
                                <span class="gray-small">
                                    喜剧
                                </span>
                                <span class="orange-small">
                                    8.0
                                </span>
                            </div>
                            <div class="mui-ellipsis gray-small">
                                宋岩
                            </div>
                            <div class="mui-ellipsis gray-small">
                                艾伦
                            </div>
                            
                        </li>
                    </ul>
                </div>
                
            </div>

微信截图_20180204145524.png

4-3 获取热映列表接口数据

微信截图_20180204174834.png

//数据转换
            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;
            }

mui.getJSON('https://api.douban.com/v2/movie/in_theaters',{},function(resp){
                    var l = convert(resp.subjects)
                    console.log(l.length);
                });

4-4 使用VUE进行数据绑定

引入vue库

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

mui.getJSON('https://api.douban.com/v2/movie/in_theaters',{},function(resp){
                    data_movies.movies = convert(resp.subjects);
                    
                });

<div class="mui-scroll-wrapper" style="top: 50px;">
                <div class="mui-scroll">
                    <ul id="movies" class="mui-table-view">
                        <li class="mui-table-view-cell" v-for="item in movies">
                            <img class="mui-pull-left item-img" :src="item.cover" />
                            <div class="mui-ellipsis dark-big">
                                {{item.title}}
                            </div>
                            <div class="mui-ellipsis">
                                <span class="gray-small">
                                    {{item.geners}}
                                </span>&nbsp;
                                <span class="orange-small">
                                    {{item.score}}分
                                </span>
                            </div>
                            <div class="mui-ellipsis gray-small">
                                导演:{{item.directors}}
                            </div>
                            <div class="mui-ellipsis gray-small">
                                主演:{{item.casts}}
                            </div>
                            
                        </li>
                    </ul>
                </div>
                
            </div>

Screenshot_2018-02-04-21-07-09-894_HBuilder.png

运行的时候很震撼.

4-5 下拉刷新上拉加载

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

最后编辑于：2018.02.04 23:06:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,928评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,192评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,468评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,186评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,295评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,374评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,403评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,186评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,610评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,906评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,075评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,755评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,393评论 3赞 320
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,079评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,313评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,934评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,963评论 2赞 351