物联网控制APP入门专题（四）---使用android studio制作一个控制页面的APP框架

admin管理员组

文章数量:1122850

摘要：上篇文章讲了如何用阿里云IoT Studio快速制作一个网页版的手机端，以及通过第三方平台将这个网页打包成一个APK文件，使它可以安装到手机实现APP的功能。但是使用第三方平台做的APP是需要收费的，如果想免费做APP，我们也可以使用android studio来做，本篇文章就讲一下如何作出自己的APP框架，文章最后提供作者调试好的源代码供大家下载学习。

软件：android studio。

应具备的知识：会android studio基本操作，知道gradle原理，会配置build.gradle的一些参数。

制作出来的效果如下图：

目录

1.基本实现原理

2.选用什么浏览器组件？

3.腾讯X5内核简介

4.用腾讯X5内核做一个APP框架

5.源代码链接

6.小结

---

1.基本实现原理

无论是第三方平台收费制作的APP框架，还是自己使用android studio制作的APP框架，核心其实很简单---做一个浏览器，让这个浏览器只能显示一个网址。

2.选用什么浏览器组件？

为什么单独说一下这个步骤？

是因为android studio内置的浏览器组件不好用。

我们搜索这方面的文章，比如“使用android studio制作一个网站APP”之类的，一般会推荐你使用android studio原生的webview控件/组件。

通过简单的编程，即可实现webview的使用。

在loadUrl函数里面输入需要打开的网址（这个网址是前几篇文章中提到的IoT studio设计制作的控制页面的地址，域名是买的，公网ip也是买的，不过很便宜）

到这一步，总该能顺利实现网页打开了吧？使用android studio原生控件还不行？

对，不行！

打开网页是空白页。

我们试着将网址修改为新浪网址，编译成功之后，发现打开的网页是下图这样的。也就是说，默认打开的网址其实和我们平时访问的网址是不一样的。可能是谷歌的控件默认解析到了国际网站，而我们平时用的默认解析到国内网站。

这个webview控件不太好用，还反映在点击二级链接时，会弹出错误对话框。

啰嗦了这么多，其实就是想告诉各位，webview不好使。

有没有比较好用的控件呢？当然有，有很多。在此推荐使用腾讯的控件。

腾讯的X5内核是腾讯浏览服务，国内很多APP使用浏览服务时，很多都是用这个内核，编程方便，而且运行稳定。

3.腾讯X5内核简介

如下图所示，具有很多的技术优势。我们主要用到的优势是“稳定”。提交给客户手机端软件，总不能老是有页面打不开，或者干脆出错的严重问题吧。太影响公司形象了。

腾讯浏览服务网址如下：

腾讯浏览服务

编程比较简单

它也有一个webview类

下载的X5内核文件解压后的文件如下图所示，有android studio源代码，也有eclipse源代码。

如果直接编译X5内核下载文件的例程，就是X5WebDemo例程。假设大家具有安卓编程基础，解决了各种配置问题之后，将例程编译成功。（步骤比较复杂，不一一列举了，每个人遇到的问题也可能各不相同）

编译成APK文件，然后安装到手机之后的界面入下图所示

运行“浏览器demo”，可以看到下图界面。可以输入网址进行访问。我们要实现的是打开APP之后，直接进入到物联网控制的页面，怎么做呢？看下一步。

4.用腾讯X5内核做一个APP框架

前面介绍了为何选用腾讯X5内核，以及X5内核有什么优势。下面介绍如何用X5内核做一个APP框架，让APP打开就显示指定的网页。

参考文章：X5WebView使用_com.tencent.mtt-CSDN博客

吴庆森的博客介绍的非常详细，建议大家看看，我提供给大家的代码也是基于他的源代码基础上的，我的工作主要是修改了gradle，让这个代码可以在国内得以正常编译。

其实这个过程也挺痛苦的，反复遇到了很多问题，一个个解决之后才编译成功。在此不再详述。本文最后附的源代码为已经修改过仓库地址和gradle的源代码，大家可以省略中间过程。

下面介绍一下基本的步骤：

首先将官网下载的jar包复制到您的App的libs目录，并且通过Add As Library的方式集成TBS SDK

打开android studio，展开project目录，在jar包上右键即可选择Add As Library，它就成为当前工程的库了。

其次，需要在您的AndroidManifest.xml增加如下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

将源码和XML里的系统包和类替换为SDK里的包和类，相当于咱们不用谷歌原生的webview了，用腾讯X5的webview。具体对应如下：

系统内核	SDK内核
android.webkit.ConsoleMessage	com.tencent.smtt.export.external.interfaces.ConsoleMessage
android.webkit.CacheManager	com.tencent.smtt.sdk.CacheManager(deprecated)
android.webkit.CookieManager	com.tencent.smtt.sdk.CookieManager
android.webkit.CookieSyncManager	com.tencent.smtt.sdk.CookieSyncManager
android.webkit.CustomViewCallback	com.tencent.smtt.export.external.interfaces.IX5WebChromeClient.CustomViewCallback
android.webkit.DownloadListener	com.tencent.smtt.sdk.DownloadListener
android.webkit.GeolocationPermissions	com.tencent.smtt.export.external.interfaces.GeolocationPermissionsCallback
android.webkit.HttpAuthHandler	com.tencent.smtt.export.external.interfaces.HttpAuthHandler
android.webkit.JsPromptResult	com.tencent.smtt.export.external.interfaces.JsPromptResult
android.webkit.JsResult	com.tencent.smtt.export.external.interfaces.JsResult
android.webkit.SslErrorHandler	com.tencent.smtt.export.external.interfaces.SslErrorHandler
android.webkit.ValueCallback	com.tencent.smtt.sdk.ValueCallback
android.webkit.WebBackForwardList	com.tencent.smtt.sdk.WebBackForwardList
android.webkit.WebChromeClient	com.tencent.smtt.sdk.WebChromeClient
android.webkit.WebHistoryItem	com.tencent.smtt.sdk.WebHistoryItem
android.webkit.WebIconDatabase	com.tencent.smtt.sdk.WebIconDatabase
android.webkit.WebResourceResponse	com.tencent.smtt.export.external.interfaces.WebResourceResponse
android.webkit.WebSettings	com.tencent.smtt.sdk.WebSettings
android.webkit.WebSettings.LayoutAlgorithm	com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm
android.webkit.WebStorage	com.tencent.smtt.sdk.WebStorage
android.webkit.WebView	com.tencent.smtt.sdk.WebView
android.webkit.WebViewClient	com.tencent.smtt.sdk.WebViewClient

代码中，也相应地做了替换

关键代码如下：打开网址替换成为您做成的网页地址。

此外，再提供一下gradle的信息，用的阿里云云效。

5.源代码链接

作者将已经配置好的源代码发送至CSDN资源，大家可放心下载。

https://download.csdn/download/youngwah292/14012529

6.小结

相比第三方平台生成的“网站打包APP”，采取本文方式生成的“框架式APP”的优点如下：

首先是免费，节约开发成本。

其次是源代码可控，防止恶意代码打包在自己的APP中。

然后是后续可更新，说到底还是源代码可控，自己想在界面上加入一些其他功能，有源代码就会方便很多。

此外还有一个比较好的地方，就是APP安装之后，基本上就不用再让用户到应用商店或者其他途径更新APP的版本了。

开发者只需要使用IoT Studio，在阿里云物联网平台像修改一个网页一样修改控制功能和界面外观，点击发布即可实时更新APP重新打开后的外观。

所以说，这种APP其实并非一种真正的APP，而是一种“框架”或者“外壳”。核心还是类似网站开发一样的技术。

如果还觉得这种“框架式”“网页式”开发费劲，那么我们再提供一种真正的安卓APP开发方式来开发。就是说用android studio直接开发安卓APP，来实现对阿里云物联网设备的控制。

下一篇文章再讲。

也会提供源代码。

本文标签： 框架入门页面专题App