极客观点
项目管理
HarmonyOS
我开发了一个微信公众平台。在自己的iphone上测试没有问题，点击button能够触发vue.js中的方法。但是在其他人的手机上，或者在windows版的微信应用中（登录我自己的这个账号），点击button却没有任何反应。created方法同样无法被调用。
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@2.1.10/dist/vue.js"></script>
<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="/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>register.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("信息不完整啊！");
return ;
} else {
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!');
}
})请问可能是什么原因导致这个问题呢？页面显示是正常的。感觉就是在加载vue相关的js时候出现的这个问题。关键是我自己的手机上没有任何问题啊。
谢谢大家。万分苦恼...
-----------------------更新
我把vue-resource换成axios之后，自己的手机依然没有任何问题，但是在其他手机和windows版中，涉及到axios发送请求的代码，依然不奏效，但是除此之外的vue.js代码运行正常。没有任何头绪，找不出原因所在。
-----------------------更新（2017.07.11）
貌似是微信浏览器的缓存问题导致的。大家可以退出微信账号然后重新登录。这样可以强制清除微信浏览器的缓存，然后重新测试。反正现在我是没有遇到这个问题了，可以先试试看
换axios
https://github.com/mzabriskie...