我开发了一个微信公众号,在自己的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
貌似是微信浏览器的缓存问题导致的。大家可以退出微信账号然后重新登录。这样可以强制清除微信浏览器的缓存,然后重新测试。反正现在我是没有遇到这个问题了,可以先试试看
清掉缓存和退出账号,登录其他账号都不行,后来我用jquery临时解决这个bug