微信公众号内的页面使用vue-resource或者axios均无法发送请求到后台

我开发了一个微信公众号,在自己的iphone手机上测试没有问题,功能都正常。但是在其他人的手机上,或者是在微信windows版,所有代码都无法运行。比如下面这个页面:

<!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="#">注册</a></li>
                        <li><a href="#">登录</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">用户名</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">手机号</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">个人邮箱</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">个人邮箱密码或授权码</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邮箱</label>
                        </div>
                    </div>
                    <button type="button" style="float: right; margin-right: 20px"
                        class="btn waves-effect waves-light black" @click="register">
                        <font color="white">注册</font>
                    </button>
                    <button type="button" style="float: right; margin-right: 20px"
                        class="btn waves-effect waves-light black" @click="test">
                        <font color="white">测试</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使用的是vue.js和axios:

/**
 * 
 */
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("信息不完整啊!");
                 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("注册成功");
                  })
                  .catch(function (error) {
                    alert("注册失败");
                  });
                 
             }
            
            
            // 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("注册成功!");
             }
             })*/
        },
        test: function() {
            alert('test function invoked!');
        }
    },
    created: function() {
        alert('created function invoked!');
    }
})

如果我把register方法中的axios相关代码注释掉,那么运行没有问题,方法内的代码和其他的方法都可以访问到,但是如果不注释掉,button点击时候没有任何效果,created的方法和test方法同样无法执行。
之前我使用的是vue-resource,代码如上注释的部分,也是同样的问题。关键是我自己的手机没有这个问题,运行一切正常,但是换别人的手机或者电脑版,就出问题了。在windows版中,我把这个页面弹出,使用浏览器打开也是正常的。没有任何错误提示。
请问可能是什么原因导致的这个错误呢? 万分苦恼。谢谢大家。

======
update
貌似是微信浏览器的缓存问题导致的。大家可以退出微信账号然后重新登录。这样可以强制清除微信浏览器的缓存,然后重新测试。反正现在我是没有遇到这个问题了,可以先试试看

阅读 6.3k
3 个回答

清掉缓存和退出账号,登录其他账号都不行,后来我用jquery临时解决这个bug

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题