乐趣区

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

一、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),转载请注明出处。

退出移动版