乐趣区

关于html:使用muivue框架做原生app的坑一

作者：

jiezi

在

一、app连贯不到后盾：

    1.ajax局部写的url门路谬误

    2.拜访被拦挡。

    3.拜访的ip和端口是否正确，这里是个对立配置的js。将一些默认配置写在外面，缩小反复代码而已。

二、  app用的是缓存，全局通用，不是session。

                 //设置缓存信息

                plus.storage.setItem(“user”,userInfo);

                //读取本地存储，查看是否为首次启动

                var showGuide = plus.storage.getItem(“lauchFlag”);

                //仅反对竖屏显示

                plus.screen.lockOrientation(“portrait-primary”);

        mui.init({

            swipeBack:true,//启用右滑敞开性能

            pullRefresh: {

                container: “#refreshContainer”, //下拉刷新容器标识，querySelector能定位的css选择器均可，比方：id、.class等

                down: {

                    style: ‘circle’, //必选，下拉刷新款式，目前反对原生5+ ‘circle’ 款式

                    color: ‘#2BD009’, //可选，默认“#2BD009” 下拉刷新控件色彩

                    height: ’50px’, //可选,默认50px.下拉刷新控件的高度,

                    range: ‘100px’, //可选 默认100px,控件可下拉拖拽的范畴

                    offset: ‘0px’, //可选 默认0px,下拉刷新控件的起始地位

                    auto: true, //可选,默认false.首次加载主动上拉刷新一次

                    callback: downpullfresh, //必选，刷新函数，依据具体业务来编写，比方通过ajax从服务器获取新数据；

                    auto: true,//可选,默认false.首次加载主动下拉刷新一次

                },

                up: {

                    height: 50, //可选.默认50.触发上拉加载拖动间隔

                    auto: true, //可选,默认false.主动上拉加载一次

                    contentrefresh: “正在加载…”, //可选，正在加载状态时，上拉加载控件上显示的题目内容

                    contentnomore: ‘没有更多数据了’, //可选，申请结束若没有更多数据时显示的揭示内容；

                    callback: uppullfresh, //必选，刷新函数，依据具体业务来编写，比方通过ajax从服务器获取新数据；

                }

            },

        });

function openPage(url, id) {

            mui.openWindow({

                url: url,

                id: id,

                styles: {

                    top: ‘100px’, //新页面顶部地位

                    bottom: ‘200px’, //新页面底部地位

                },

                extras: {},

                createNew: false, //是否反复创立同样id的webview，默认为false:不反复创立，间接显示

                show: {

                    autoShow: true, //页面loaded事件产生后主动显示，默认为true

                },

                waiting: {

                    autoShow: true, //主动显示期待框，默认为true

                    title: ‘正在加载…’, //期待对话框上显示的提醒内容

                }

            })

        }

var winAll = plus.webview.all(); //获取所有窗体

   //console.log(JSON.stringify(winAll))

 var tab_home = plus.webview.getWebviewById(“tab_home.html”); //获取指定的页面

刷新列表页

                var list1 = plus.webview.getWebviewById(‘index-assessment.html’);

                        //触发列表界面的自定义事件（refresh）,从而进行数据刷新

                        if (list1) {

                            mui.fire(list1, ‘refresh_list’);

                        }

                        mui.back();

document.addEventListener(‘refresh_list’, function(event) {

                news.items = [];

                start = 0;

                pullupRefresh();

            });

##vue

1、data参数须要逗号隔开，而不是分号。

2、methods反对绑定办法 如@click=”reverseMessage”

var appvue = new Vue({

            el: ‘#testvue’,

            data: {

                show: false,

                use: true,

                url: ‘login.html’,

                isColor: false,

                isSize: true,

                idinfo: ‘2220’,

                message: ‘helloWorld!’

            },

            methods: {

                reverseMessage: function() {

                    this.message = this.message.split(”).reverse().join(”)

                },

                changeUrl:function(){

                    this.url = ‘home.html’;

                }

            }

        })

        function test() {

            console.log(appvue);

            appvue.url =’abc.html’;

            //appvue._data.url=’def.html’;

            //appvue.data.url = ‘html/home.html’;

        }

当然也能够用v-bind:value=”idinfo”

还有像v-bind:value这种都能够简写为:value

##批改窗口题目控件的款式和题目内容

这个是动静批改 窗口创立的标题栏控件

##对于弹出菜单地位的设置

demo的外面，因为设置的position: fixed;而后导致了内容过长会导致 弹出层被遮挡，须要把position: fixed改成position:absolute;

相干代码:

index.html


<html><head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--规范mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="css/app.css">
        <style>
            .title {
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }
 
            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }
 
            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }
 
            .oa-contact-avatar {
                width: 75px;
            }
 
            .oa-contact-avatar img {
                border-radius: 50%;
            }
 
            .oa-contact-content {
                width: 100%;
            }
 
            .oa-contact-name {
                margin-right: 20px;
            }
 
            .oa-contact-name,
            oa-contact-position {
                float: left;
            }
        </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> -->
        <nav class="mui-bar mui-bar-tab">
            <a id="tab_home" class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a id="tab_vue" class="mui-tab-item" href="javaScript:openPage();">
                <span class="mui-icon mui-icon-email">
                    <!-- <span class="mui-badge"></span> --></span>
                <span class="mui-tab-label">vue局部</span>
            </a>
            <a id="tab_setting" class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <!-- <div class="mui-content">
        </div> -->
    
    <script src="js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack:true, //启用右滑敞开性能
            subpages: [ //首先加载首页  
                {
                    url: 'html/home.html',
                    id: 'tab_home',
                    styles: {
                        top: '0px',
                        bottom: '60px'
                    }
                }
            ],
            preloadPages: [ //预加载其余页面  
                {
                    url: 'html/vue_demo.html',
                    id: 'tab_vue',
                    styles: {
                        top: '0px',
                        bottom: '60px'
                    }
                },
                {
                    url: 'html/setting.html',
                    id: 'tab_setting',
                    styles: {
                        top: '0px',
                        bottom: '60px'
                    }
                }
            ],
        });
        mui.plusReady(function() {
            //             // 获取所有Webview窗口
            //             var winAll = plus.webview.all(); //获取所有窗体
            //             //console.log(JSON.stringify(winAll)) 
            var tab_home = plus.webview.getWebviewById("tab_home");
            var tab_vue = plus.webview.getWebviewById("tab_vue");
            var tab_setting = plus.webview.getWebviewById("tab_vue");
        });
 
        document.getElementById("tab_home").addEventListener("tap", function(even) {
//             var tab_home = this.webview.getWebviewById("tab_vue");
//             console.log(JSON.stringify(tab_home));
//             tab_home.show();
            //tab_vue.hide(); //这一步必须有
            //tab_setting.hide(); //这一步必须有
        })
        
        document.getElementById("tab_vue").addEventListener("tap", function(even) {
            mui.toast(4444);
//             var tab_vue = plus.webview.getWebviewById("tab_vue");
//             tab_vue.show();
            openPage("html/vue_demo.html","html/vue_demo.html");
        })
        document.getElementById("tab_setting").addEventListener("tap", function(even) {
 
        })
        function openPage(url,id) {
            mui.toast(8899);
            mui.openWindow({
                url:url,
                id:id,
                styles: {
                    top: '100px', //新页面顶部地位
                    bottom:  '200px', //新页面底部地位
                },
                extras: {
                },
                createNew: false, //是否反复创立同样id的webview，默认为false:不反复创立，间接显示
                show: {
                    autoShow: true, //页面loaded事件产生后主动显示，默认为true
                },
                waiting: {
                    autoShow: true, //主动显示期待框，默认为true
                    title: '正在加载...', //期待对话框上显示的提醒内容
                }
            })
        }
    </script>
</body>
</html>

home.html

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--规范mui.css-->
        <link rel="stylesheet" href="../css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="../css/app.css"/>
        <style>
            
            .title{
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }
            
            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }
            
            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }
    
            .oa-contact-avatar {
                width: 75px;
            }
            .oa-contact-avatar img {
                border-radius: 50%;
            }
            .oa-contact-content {
                width: 100%;
            }
            .oa-contact-name {
                margin-right: 20px;
            }
            .oa-contact-name, oa-contact-position {
                float: left;
            }
        </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" id="refreshContainer">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">Item 1
                    <span class="mui-badge mui-badge-primary">11</span>
                </li>
                <li class="mui-table-view-cell">Item 2
                    <span class="mui-badge mui-badge-success">22</span>
                </li>
                <li class="mui-table-view-cell">Item 3
                    <span class="mui-badge">33</span>
                </li>
            </ul>
            <div class="title">首页</div>
            <div id="tabbar" class="mui-control-content mui-active">
                <div class="title">这是div模式选项卡中的第1个子页面.</div>
                <div class="title">何谓div模式的选项卡？
                    其实就是通过DIV模仿一个独立页面，通过DIV的显示、暗藏模仿不同页面的切换，典型的SPA模式；</div>
                <div class="title">
                    这种模式适宜简略业务零碎，因为每个选项卡内容要写在一个DIV中，
                    若逻辑简单，会导致以后页面DOM构造繁冗，造成webview响应迟缓，甚至解体；
                    因而若零碎较简单，须要下拉刷新等操作，举荐应用webview模式的选项卡；</div>
            </div>
        </div>
    </body>
    <script src="../js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack:true,//启用右滑敞开性能
            pullRefresh: {
                container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比方：id、.class等
                down: {
                    style: 'circle', //必选，下拉刷新款式，目前反对原生5+ ‘circle’ 款式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件色彩
                    height: '50px', //可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范畴
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始地位
                    auto: true, //可选,默认false.首次加载主动上拉刷新一次
                    callback: downpullfresh, //必选，刷新函数，依据具体业务来编写，比方通过ajax从服务器获取新数据；
                    auto: true,//可选,默认false.首次加载主动下拉刷新一次
                },
                up: {
                    height: 50, //可选.默认50.触发上拉加载拖动间隔
                    auto: true, //可选,默认false.主动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的题目内容
                    contentnomore: '没有更多数据了', //可选，申请结束若没有更多数据时显示的揭示内容；
                    callback: uppullfresh, //必选，刷新函数，依据具体业务来编写，比方通过ajax从服务器获取新数据；
                }
            },
        });
        
        
            //下拉
        function downpullfresh() {
            mui.toast(12);
            //留神，加载完新数据后，必须执行如下代码，留神：若为ajax申请，则需将如下代码搁置在解决完ajax响应数据之后
            //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            mui('#refreshContainer').pullRefresh().endPulldown();
        }
        //上拉
        function uppullfresh() {
                mui.toast(32);
            //业务逻辑代码，比方通过ajax从服务器获取新数据；
            //留神：
            //1、加载完新数据后，必须执行如下代码，true示意没有更多数据了：
            //2、若为ajax申请，则需将如下代码搁置在解决完ajax响应数据之后
            this.endPullupToRefresh(true | false);
        }
    </script>
</html>

本文来源于：宋文超super，专属平台有csdn、思否(SegmentFault)、 简书、 开源中国(oschina)，转载请注明出处。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章