整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过，HTML5 Web APP的出现能否在未来取代移动应用，就目前来说，还是个未知数。那么，有什么办法，既可以使用HTMl5开发应 用，又可以将其简单封装成APK文件呢？
一、Android SDK中的WebView
1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);
2.调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.qietu.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.调用Activity的setContentView( )方法来显示网页视图
4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
缺点：如果是载入的是普通网页，没有什么问题，但如果是html5,封装后，在android2.3以上才能正常访问，android2.2及以下，SDK中的WebView还没完全支持HTML5
下面是具体例子：
MainActivity.java
package com.android.webview.activity;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView webview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//实例化WebView对象
webview = new WebView(this);
//设置WebView属性，能够执行Javascript脚本
webview.getSettings().setJavaScriptEnabled(true);
//加载需要显示的网页
webview.loadUrl("http://www.qietu.com/");
//设置Web视图
setContentView(webview);
}
@Override
//设置回退
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
webview.goBack(); //goBack()表示返回WebView的上一页面
return true;
}
return false;
}
在AndroidManifest.xml文件中添加权限
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.webview.activity"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
二、使用PhoneGap
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如 iPhone的iPhone SDK，Android的Android SDK等，
详细方法请见：http://phonegap.com/start#android
优点：在Eclipse中加入SDK，编程自由，完美适应不同设备屏幕大小，适合高手使用。
缺点：没有使用布局，直接加载网页，不能添加广告。
----------------
切图网（qietu.com）最早将psd转html服务模式带到国内，并首个提供响应式、webapp前端开发的公司。专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）
面我推荐几款工具
HTML App Build 工具是一款可以将 HTML 网页转换为 EXE 可执行文件的软件。它可以让您使用 HTML、JavaScript 和 CSS 等网页技术开发跨平台的移动应用
使用 HTML App Build 工具的步骤如下：
1. 在您的电脑上安装 HTML App Build 工具
2. 打开 HTML App Build 工具，选择“文件”-> “新建”->“项目”，输入项目名称和保存路径，选择“5+ App”模板。
3. 编写您的 HTML、JavaScript 和 CSS 代码，或者使用 HBuilderX 内置的 HTML5+ API 和 MUI 框架来快速开发移动应用。
4. 在 HTML App Build 工具中选择“运行”-> “运行到手机或模拟器”，查看您的应用在真机或模拟器上的效果。
5. 在 HTML App Build 工具中选择“云打包”-> “打包设置”，设置应用的图标、名称、版本号等信息，然后选择“开始云打包”。
6. 等待云打包完成后，下载应用的 EXE 文件，或者扫描二维码在手机上安装应用。
HEX 工具是一款可以将 HTML 网页转换为 EXE 或 APP 的软件。它可以让您使用 HTML等网页技术开发桌面或移动应用。
使用 HEX 工具将 HTML 变为 EXE 或 APP 的步骤如下：
1. 在您的电脑上安装 HEX 工具。
2.打开HEX 工具，选择“新建项目”，输入项目名称和保存路径，选择“HTML”模式。
3.编写您的 HTML ，JavaScript 和 CSS 代码，或者使用现有的 HTML 网页文件。
4.在HEX 工具中选择“发布项目”，设置您的应用的图标、名称、版本号等信息，然后选择“生成 EXE”或“生成 APP”。
5.等待生成完成后，您就可以得到您的应用的 EXE 或 APP 文件，可以在电脑或手机上运行。
这是详细的使用过程：HTML杞� EXE锛寃eb椤圭洰鎵撳寘 exe鐨勮В鍐虫柟妗堬紙1锛夛細HEX - 鐭ヤ箮
HTML Compiler是一款可以将HTML文件转换为可执行文件的工具。您可以使用它来制作独立的网页应用程序或演示文稿。要使用HTML Compiler工具，您需要按照以下步骤操作：
1. 下载并安装HTML Compiler2021直装版，或者从官网下载最新版本。
2. 打开HTML Compiler，选择“新建项目”或“打开项目”，并选择您要编译的HTML文件或文件夹。
3. 在项目设置中，您可以修改应用程序的名称、图标、版本、版权等信息，以及选择编译选项和输出路径。
4. 点击“编译”按钮，等待编译完成，您就可以在输出路径中找到生成的可执行文件了。
这是关于html compiler直装版的详细教程HTML Compiler2021直装版 附安装教程及特点 - 哔哩哔哩
如果您只是想编辑和运行HTML文件，而不需要编译成可执行文件，您可以使用其他的HTML编辑器，例如VS Code、HBuilderX、Online HTML Editor等。这些编辑器都提供了语法高亮、代码提示、实时预览等功能，可以帮助您快速编写和测试HTML代码。
大家用Axure制作APP原型时，即使高保真效果也只是在视觉层面上实现了原型效果，但页面中的数据内容还都只是预先设定好的，例如：使用中继器、表格等，模拟真实作品。那么有没有一种方法，让我们制作的原型也能获取到真实数据呢？
本例通过JavaScript实现实时获取天气功能，意在激发大家兴趣，制作更多基于Axure获取实时信息的案例。废话不多说，上图为敬：
这个原型到底有什么独特之处吗？在刚打开的时候，整个页面呈现的数据都是之前设定好的，当点击左上角的『刷新』的时候，页面会通过一个天气查询api获取到当前真实数据，然后加载出来。怎么样，是不是被它吸引到了？
这个实例中主要用到了Axure的以下几个功能：
（1）中继器
由于『昨天』、『今天』、『明天』的天气概要布局相同，可以使用中继器更加规范显示。
（2）JavaScript
在获取天气api时，通过Ajax的GET方式从天气api服务器中获取实时数据。
（3）全局变量
接收并储存获取到的实时数据。
（4）字符串函数
通过indexOf、replace、slice等字符串函数对接收到的数据进行加工，之后存储到中继器中。
以下为整个实例流程图：
在本例中，我们通过『http://t.weather.sojson.com/api/weather/city/101010100』api获取到北京天气的实时数据，大家可以看到，数据是以json格式返回的，此接口可以获得当天的天气详情和从昨天到未来15天的天气数据。
那么Axure是如何实现调用api的呢？
我们先设定一个全局变量『tianqi』，当点击刷新按钮时，先设置全局变量值为空，再通过『打开链接』功能插入Javascript脚本，参数选择「链接外部网址」，「打开当前窗口」调用api并赋值给全局变量。
javascript：
$.ajax({
method: ‘GET’,
url: ‘http://t.weather.sojson.com/api/weather/city/101010100’,
data: {}
}).done(function(msg){
$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));
});
这段JavaScript代码的意思就是调用JavaScript，通过「ajax」对象的「GET」方式，从「http://t.weather.sojson.com/api/weather/city/101010100」地址获取数据，因为这个api不需要传递参数，所以「data」字段并没有赋值。之后将获取到的数据通过「JSON.stringify」转为字符串后赋值给全局变量「tianqi」。
怎么样？是不是很神奇。
如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通过这一步，我们的全局变量「tianqi」就已经获取到了实时的天气数据。那么之后怎么加工呢？
目前的全局变量值如下图，是没办法直接使用的。那我们如何格式化这些数据呢，这时就需要字符串函数了。
如图所示，整个数据中包含了2部分，第一部分是当天的天气情况，第二部分是从昨天开始到之后的十五天天气情况。由于时间关系，本次实例中只使用到了「第一部分」和「昨天到明天」的天气情况。
我们首先创建4个文本框，这4个文本框分别保存「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。然后通过『设置文本』功能对文本框赋值，其中「当天天气情况」的赋值函数为：
[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]
这句话什么意思呢？就是说截取「tianqi」字符串中从「shidu」字段到「yesterday」字段的字符。
目前我们获得了4段数据，分别为「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。这样就简单多了，当我们需要当天的温度是，直接从「当天天气情况」数据中查找对应的「wendu」就可以了。
目前「当天天气情况」数据如下：
shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”优”,”wendu“:”16″,”ganmao”:”各类人群可自由活动”,”yesterday
我们很容易看到，「wendu」的数值是「16」。如何截取呢？我们通过以下函数将「16」赋值给页面中的『温度』字段。其中「LVAR1」为「当天天气情况」元件的元件文字。
[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]
如前所述，页面中的「昨天」、「今天」、「明天」天气情况我们通过中继器储存。更新中继器数据我们通过『更新行』动作实现。
对应的赋值函数同样通过字符串函数实现，例如「天气类型」函数如下，LVAR1为「昨天天气情况」元件的元件文字：
[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]
至此，大功告成，我们的页面已经加载了实时的天气信息。
作为一名产品经理，如果连自己最常用的软件都不喜欢琢磨，何谈自己要开发的产品呢？
通过这种获取api的方式，我们可以制作更多实时、真实的案例，在网上有无数的api，例如大小写转换、MD5加密、归属地查询、车辆限行，如果我们做的案例中能得当的使用这些功能，不是更好吗？更进一步，如果懂得开发，我们完全可以为了原型演示开发一个特定的api，实现相应功能。
欢迎留言讨论。
本文由 @escher 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自PEXELS，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
