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

作者: 吕阳 | 来源:发表于2018-02-04 23:04 被阅读335次

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

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

2-1 MUI基础知识概述

3-1 制作主页Tab

3-2模板调整实现

第四章电影列表功能实战

4-1 搜索框实现

4-2 热映列表布局

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

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

4-5 下拉刷新上拉加载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

2-1 MUI基础知识概述

3-1 制作主页Tab

3-2模板调整实现

第四章 电影列表功能实战

4-1 搜索框实现

4-2 热映列表布局

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

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

4-5 下拉刷新上拉加载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第四章电影列表功能实战