VueJS 不适用于移动设备
Posted
技术标签:
【中文标题】VueJS 不适用于移动设备【英文标题】:VueJS doesn't work on mobile 【发布时间】:2016-11-02 16:32:36 【问题描述】:我在移动设备上运行 VueJS 时遇到问题。我在 copen.io 上创建了一个天气预报应用程序
这里是项目的链接:
http://codepen.io/techcater/pen/xOZmgv
html 代码:
<div class="container-fluid text-center">
<h1>Your Local Weather</h1>
<p>
location
</p>
<p>
temperature
<a @click="changeDegree">degree</a>
</p>
<p>
weather | capitalize
</p>
<img :src="iconURL" />
<br>
<a href="https://ca.linkedin.com/in/dalenguyenblogger" target="_blank">by Dale Nguyen</a>
<!-- <pre>$data | json</pre> -->
</div>
JS代码:
new Vue(
el: '.container-fluid',
data:
location: "",
temperature: "",
degree: "C",
weather: "",
iconURL: ""
,
created: function()
this.getWeather();
,
methods:
getWeather: function()
var that = this;
this.$http.get("http://ipinfo.io").then((response) =>
console.log(response.data);
that.location = response.data.city + ", " + response.data.country;
// Get weather informaiton
var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
var city = response.data.city;
var url = "http://api.openweathermap.org/data/2.5/weather?q=CITY&APPID=APIKEY&units=metric";
url = url.replace("CITY",city);
url = url.replace("APIKEY", api);
that.$http.post(url,dataType: 'jsonp',
headers :
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
).then((response) =>
console.log(response.data);
that.temperature = response.data.main.temp;
that.weather = response.data.weather[0]['description'];
that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
, (response) =>
// error callback
);
, (response) =>
console.log(response.data);
);
,
changeDegree: function()
if(this.degree == "C")
this.degree = "F";
this.temperature = Math.round((this.temperature*9/5 + 32)*100)/100;
else
this.degree = "C";
this.temperature = Math.round(((this.temperature - 32)*5 /9)* 100)/100;
)
它在我的笔记本电脑上运行良好,但在移动设备上却不行。起初,我以为是因为 Codepen。在站点运行时可能会导致某些问题。但是,当我在我的网站上创建一个项目时,它也不起作用。
你能帮忙找出问题吗?谢谢,
【问题讨论】:
移动设备到底出了什么问题? 什么移动设备? Safari ios、android? @YerkoPalma 我用的是 Iphone,我在 safari 和 chrome 浏览器上试过。 @gurghet 我用的是 Iphone,我在 safari 和 chrome 浏览器上试过。 仅供参考 chrome 浏览器 是 safari 【参考方案1】:您的代码似乎运行良好,除了在 codepen 上它给我错误XMLHttpRequest cannot load http://ipinfo.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
。
您可以将您的域名放在headers
选项上以启用跨域,这里是示例:
this.$http.get('http://ipinfo.io',
'headers':
'Origin': 'http://yourdomain.com'
)
查看示例:http://bozue.com/weather.html
我还注意到您将 vue.min.js
和 vue-resource.js
脚本的顺序错误可能会引发一些错误,vue.min.js
应该放在第一位。
【讨论】:
如果我使用 crossorigin.me,它会显示错误的位置。它适用于您的移动设备吗?谢谢 更新了答案。我还没查,不过你可以在移动设备上查bozue.com/weather.html。 感谢标题。效果很好!关于移动网站。我还是不行:( 能否请您发布您的移动浏览器的屏幕截图?对我来说,一切似乎都很好,除了ipinfo.io 有时无法确定从 api.openweathermap.org 请求数据时会导致一些错误的城市和地区。我在 android 上使用 chrome。 这是我移动设备上的截图,diigo.com/item/image/5kg0i/7wm0?size=o【参考方案2】:我找到了解决方案。我现在在我的手机上工作。我相信我也会在其他浏览器上工作。问题是某些浏览器不识别操作“>”,所以我改了。
这是新代码:
getWeather: function()
var that = this;
this.$http.get('http://ipinfo.io', 'headers':
'Origin': 'http://yourdomain.com'
).then(function(response)
console.log(response.data);
that.location = response.data.city + ", " + response.data.country;
// Get weather informaiton
var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
var city = response.data.city;
var url = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=CITY&APPID=APIKEY&units=metric";
url = url.replace("CITY",city);
url = url.replace("APIKEY", api);
that.$http.post(url,dataType: 'jsonp',
headers :
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
).then(function(response)
console.log(response.data);
that.temperature = response.data.main.temp;
that.weather = response.data.weather[0]['description'];
that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
).then(function()
// error callback
);
).then(function()
console.log(response.data);
);
,
【讨论】:
以上是关于VueJS 不适用于移动设备的主要内容,如果未能解决你的问题,请参考以下文章