Use mui+vue framework to make the pit of native app (1)

Use mui+vue framework to make the pit of native app (1)

1. The app cannot connect to the background:

    1. The URL path written in the ajax part is wrong

    2. Access is blocked.

    3. Whether the access ip and port are correct, here is a unified configuration js. Write some default configurations in it to reduce duplication of code.

2. the app uses the cache, which is universal, not the session.

                 //Set cache information

                plus.storage.setItem("user",userInfo);

                //Read the local storage and check whether it is the first startup

                var showGuide = plus.storage.getItem("lauchFlag");

                //Only supports vertical screen display

                plus.screen.lockOrientation("portrait-primary");

        mui.init({

            swipeBack: true,//Enable the right swipe to close function

            pullRefresh: {

                container: "#refreshContainer",//Pull down to refresh the container identity, css selectors that querySelector can locate, such as id, .class, etc.

                down: {

                    style:'circle',//Required, pull-down refresh style, currently supports native 5+'circle' style

                    color:'#2BD009',//Optional, default "#2BD009" pull-down refresh control color

                    height: '50px',//Optional, default 50px. Pull down to refresh the height of the control,

                    range: '100px',//Optional default 100px, the range of the control can be dragged down

                    offset: '0px',//Optional default 0px, pull down to refresh the starting position of the control

                    auto: true,//optional, default false. The first load is automatically pulled up and refreshed once

                    callback:  downpullfresh ,//Required, refresh function, written according to specific business, such as getting new data from the server through ajax;

                    auto: true,//optional, default false. The first load is automatically pulled down to refresh once

                },

                up: {

                    height: 50,//Optional. The default is 50. Trigger the pull-up loading and dragging distance

                ** auto: true,//Optional, default false. Automatically pull up and load once**

                    contentrefresh: "Loading...",//Optional, when loading, pull up the title content displayed on the loading control

                    contentnomore:'There is no more data',//optional, the content of the reminder displayed when there is no more data after the request;

                    callback:  uppullfresh ,//Required, refresh function, written according to specific business, such as getting new data from the server through ajax;

                }

            },

        });

function openPage(url, id) {

            mui.openWindow({

                url: url,

                id: id,

                styles: {

                    top: '100px',//The top position of the new page

                    bottom: '200px',//The bottom position of the new page

                },

                extras: {},

                createNew: false,//Whether to repeatedly create a webview with the same id, the default is false: do not create repeatedly, display directly

                show: {

                    autoShow: true,//The page is automatically displayed after the loaded event occurs, the default is true

                },

                waiting: {

                    autoShow: true,//Automatically display the waiting box, the default is true

                    title:'Loading...',//Waiting for the prompt content displayed on the dialog box

                }

            })

        }

var winAll = plus.webview.all();//Get all forms

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

 var tab_home = plus.webview.getWebviewById("tab_home.html");//Get the specified page

##Refresh the list page

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

                        //Trigger the custom event (refresh) of the list interface to refresh the data

                        if (list1) {

                            mui.fire(list1,'refresh_list');

                        }

                        mui.back();

document.addEventListener('refresh_list', function(event) {

                news.items = [];

                start = 0;

                pullupRefresh();

            });

##vue

1. The data parameters need to be separated by commas, not semicolons.

2. Methods support binding methods such as @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';

        }

Of course you can also use v-bind:value="idinfo"

Also like ** v-bind: value can be abbreviated as: value**

##Modify the style and title content of the window title control

This is  the ** title bar ** control created by dynamically modifying the window

##About the setting of the pop-up menu position

In the demo, due to the set position: fixed; then the content is too long, which will cause the pop-up layer to be blocked. You need to change position: fixed to position: absolute;

Relevant code:

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> 

This article comes from: Song Wenchao super, exclusive platforms include csdn, segmentfault, Jianshu, and open source China (oschina). Please indicate the source for reprinting.