您的位置：首页 > Web前端 > JavaScript

用 JavaScript 编写第一个 UWP 应用 - 手机归属地查询

2015-12-14 20:41 736 查看

简介

以手机归属地查询APP（通用）为例，此实例但界面、简单，学习用JS写 win10 通用。并没有使用到 WinJS API，下一步进行学习和使用。

环境依赖

win10

Visual Studio 2015

创建项目

新建 wim10 通用应用项目

项目目录如下

构建程序

修改

default.html

如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>手机号码归属地狗狗</title>

<!-- WinJS 引用 -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>

<!-- phoneNumber 引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body class="win-type-body">
<p>输入您要查询的手机号</p>
<input id="number" type="text" value="15618513060"/>
<div>
<button id="search">查询</button>
</div>
<div id="searchResult"></div>
</body>
</html>

再修改

css/default.css

body {
background-color: #569A7D;
padding-left: 5%;
padding-right: 5%;
}
#number {
width: 90%;
height: 50px;
min-width: 200px;
font-size: 30px;
border-style: hidden;
}
#search {
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
height: 40px;
border-style: hidden;
}
.result {
width: 90%;
color: white;
}

下一步修改

js/default.js

// 有关“空白”模板的简介，请参阅以下文档:
// http://go.microsoft.com/fwlink/?LinkId=232509 (function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
//TODO: 已经新启动此应用程序。请在此初始化你的应用程序。
} else {
// TODO: 此应用程序已挂起，然后终止。
// 若要创造顺畅的用户体验，请在此处还原应用程序状态，使应用似乎永不停止运行。
}
args.setPromise(WinJS.UI.processAll());

var searchButton = document.getElementById("search");
searchButton.addEventListener("click", onSearchButtonClicked, false);
}
};

app.oncheckpoint = function (args) {
// TODO: 此应用程序将被挂起。请在此保存需要挂起中需要保存的任何状态。
//你可以使用 WinJS.Application.sessionState 对象，该对象在挂起中会自动保存和还原。
//如果需要在应用程序被挂起之前完成异步操作，请调用 args.setPromise()。
};

function onSearchButtonClicked(eventInfo) {
var searchResult = document.getElementById("searchResult");
var number = document.getElementById("number").value;
var result;
var xmlhttp;

searchResult.innerHTML = "<p>查询中...</p>";
if (!inputValidator(number)) {
searchResult.innerHTML = "<p>输入的手机号格式错误</p>";
return false;
}

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = JSON.parse(xmlhttp.responseText);
} else {
searchResult.innerHTML = "<p>查询失败，请检查网络连接</p>";
return false;
}
}

// 这里使用了百度 API 查询手机号码归属地
try {
xmlhttp.open("GET", "http://apis.baidu.com/apistore/mobilephoneservice/mobilephone?tel=" + number, false);
xmlhttp.setRequestHeader("Content-type", "application/JSON");
xmlhttp.setRequestHeader("apikey", "YourKey");
xmlhttp.send();
} catch (e) {
searchResult.innerHTML = "<p>查询失败，请检查网络连接</p>";
return false;
}

searchResult.innerHTML = formatResult(result.retData);
}

function inputValidator(input) {
if (isNaN(input)) {
return false;
}

if (input.length !== 11) {
return false;
}

return true;
}

function formatResult(result) {
var html = "<p>手机号码：%n</p>";
html += "<p>省份：%p</p>";
html += "<p>运营商：%o</p>";

html = html.replace("%n", result.telString)
.replace("%p", result.province)
.replace("%o", result.carrier);
return html;
}

app.start();
})();

调试

VS 2015 集成了 win10 模拟器，可以方便的调试。也可以连接 win10 手机选择“设备”进行调试。

出锅

最终简单的一个 win10 通用应用就简单的出炉了

移动端效果

电脑端效果

APP 地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript uwp vs2015 win10

相关文章推荐

新的分享

章节导航