微信平台无法加载vue-resource或axios代码

时间:2017-02-25 03:50:09

标签: vue.js axios vue-resource wechat

我为微信平台开发了一个网站。前端网站在我自己的iPhone上运行良好。但是这些网站不会在其他网站上工作。手机,或微信Windows版。我发现如果我注释掉与vue-resourceaxios相关的代码,整个页面工作正常。如果没有,整个js文件将不起作用。 html代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-    scalable=no" />
<title>Kindle Binding</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

<!-- <script
src="https://unpkg.com/vue-resource@1.1.2/dist/vue-resource.min.js">    </script> -->
</head>
<style>
body {<!--
min-height: 2000px; -->
width: 100%;
height: 100%;
overflow-x: hidden;
}

#register_form {
margin-top: 20px;
}
</style>
<body>

<div id="register">
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper black">
                <a href="#" class="brand-logo" style="margin-left: 20px">Kindle
                    Pocket</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">register</a></li>
                    <li><a href="#">login</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="container">
        <!-- register form start -->
        <div id="register_form" class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">account_circle</i> <input
                            id="icon_prefix" type="text" class="validate"
                            v-model="newUserInfo.userName" /> <label for="icon_prefix">Username</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">phone</i> <input
                            id="icon_telephone" type="tel" class="validate"
                            v-model="newUserInfo.phone"> <label for="icon_telephone">Phone</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">email</i> <input id="icon_email"
                            type="email" class="validate" v-model="newUserInfo.email">
                        <label for="icon_email">Personal Email</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">lock</i> <input
                            id="icon_password" type="password" class="validate"
                            v-model="newUserInfo.emailPwd"> <label
                            for="icon_password">Personal Email Passcode</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">email</i> <input
                            id="icon_kindle_email" type="email" class="validate"
                            v-model="newUserInfo.kindleEmail"> <label
                            for="icon_kindle_email">Kindle Email</label>
                    </div>
                </div>
                <button type="button" style="float: right; margin-right: 20px"
                    class="btn waves-effect waves-light black" @click="register">
                    <font color="white">register</font>
                </button>
                <button type="button" style="float: right; margin-right: 20px"
                    class="btn waves-effect waves-light black" @click="test">
                    <font color="white">test</font>
                </button>
            </form>
        </div>
    </div>
</div>

</body>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/vue/register.js"></script>
<script
src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">    </script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</html>

js文件如下:

/**
 * 
 */
var app = new Vue({

el: "#register",

data: {
    registerUrl: "/KindlePocket/bindingData",
    registerFlag: false,
    newUserInfo: {
        userName:'',
        phone:'',
        email:'',
        emailPwd:'',
        kindleEmail:''
    }
},

methods: {
    register: function() {
         alert("entered the register function!")
         if(this.newUserInfo.userName.trim() == ''
             || this.newUserInfo.phone.trim() == ''
             || this.newUserInfo.email.trim() == ''
             || this.newUserInfo.emailPwd.trim() == ''
             || this.newUserInfo.kindleEmail.trim() == '') {

             alert("information uncompleted!");
             return ;

         } else {
             alert("ready to register");
             axios.post(this.registerUrl, this.newUserInfo,{
                 transformRequest: [function (data) {
                        // Do whatever you want to transform the data
                        let ret = ''
                        for (let it in data) {
                          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                      }],
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      }
              })
              .then(function (response) {
                alert("register success");
              })
              .catch(function (error) {
                alert("register failed");
              });  

         }


        // vue-resource 
         /*this.$http.post(this.registerUrl, this.newUserInfo, { emulateJSON: true })
         .then((response) => {
         console.log(response.data);
         if(response.data.isBinded == 1) {
         this.registerFlag = true;
         alert("register success!");
         }
         })*/
    },
    test: function() {
        alert('test function invoked!');
    }
},
created: function() {
    alert('created function invoked!');
}
})

在我自己的iphone上,当我点击测试或注册按钮时,js代码运行良好,请求成功发送到后端,但在其他手机上,即使是测试按钮也无法正常工作。如果我注释掉寄存器功能中的else块,则所有设备都运行良好。当我用axios替换vue-resource时,出现了同样的情况。我不知道为什么。

0 个答案:

没有答案