整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「 跨平台 」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 HTML5 共存，这就是当下最流行的「 混合开发 」。HTML5 除了开发简单，还有一个优势就是迭代方便, 只需要修改服务端的 HTML5 页面，App 会同步更新，无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显，受制于国内的网速限制。 虽然国内已经普及了 4g 网络，但是网速还是不尽如人意。HTML5 加载受限于网络，没有原生控件流畅，用户体验相对较差， 所以目前完全使用 HTML5 开发 App 并没有成为主流。我所在的项目组也使用HTML5开发比较频繁，这个时候了解WebView使用就变得尤为重要了，而WebView的坑也是非常的多，我在开发中就遇到了许多莫名其妙的问题。 所以准备写几篇文章总结一下，文章按照类来进行分类。WebView开发常用的类是 WebView , WebSettings , WebViewClient , WebChromeClient。
这里是WebView开发第一篇： WebView 的使用介绍；
A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
总结起来就是：WebView是一个基于WebKit引擎的，并且可以在activity展现Web页面的控件。
<uses-permission android:name="android.permission.INTERNET" />
3.2 添加布局页面
这里介绍另外一种方式，通过addView添加进去
1.在布局页面添加布局
<FrameLayout
android:id="@+id/webViewWrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
2.实体化webview并添加到布局中
webViewWrap = findViewById(R.id.webViewWrap); //上面的FrameLayout
webView = new WebView(MyApplication.getAppContext()); //使用应用上下文，可以防止内存泄露，如果传入activity的上下文，需要将webview remove掉。下面有讲解。
webViewWrap.addView(webView);
3.加载页面
//方式1. 加载一个网页：
webView.loadUrl("http://www.google.com/");
//方式2：加载apk包中的html页面
webView.loadUrl("file:///android_asset/test.html");
//方式3：加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
// 方式4： 加载 HTML 页面的一小段内容
WebView.loadData(String data, String mimeType, String encoding)
// 参数说明：
// 参数1：一段HTML代码
// 参数2：展示内容的类型
// 参数3：字节码
到这一步我们就能够展示一个WebView页面了，不过是通过外部浏览器打开的。但是还有许多优化的地方。
//激活WebView为活跃状态，能正常执行网页的响应，可以在activity 的回调方法中调用
webView.onResume() ；
//当页面被失去焦点被切换到后台不可见状态，需要执行onPause，可以在activity 的回调方法中调用
//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。
webView.onPause()；
//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
//它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()
//恢复pauseTimers状态
webView.resumeTimers()；
//销毁Webview
//在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview:
ViewParent parent = mWebView.getParent();
if (parent != null) {
((ViewGroup) parent).removeView(mWebView);// 防止内存泄露
}
webView.destroy();
//是否可以后退
Webview.canGoBack()
//后退网页
Webview.goBack()
//是否可以前进
Webview.canGoForward()
//前进网页
Webview.goForward()
//以当前的index为起始点前进或者后退到历史记录中指定的steps
//如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)
常见用法：Back键控制网页后退
问题：在不做任何处理前提下 ，浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
目标：点击返回后，是网页回退而不是推出浏览器
解决方案：在当前Activity中处理并消费掉该 Back 事件
//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);
//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；
//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；
WebView 的使用介绍就先到这里了，下一篇将会讲解WebSettings的使用。
IONIC 3.5框架
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
在html5移动app开发中,速度是很重要的。Ionic在最新的移动设备中表现非常卓越，运行非常流畅。 操作最少的 DOM，非 jQuery，和硬件加速过渡，让您感觉到用html5开发的app也可以飞起来。
Ionic可以说是AngularJS移动端解决方案，Ionic 利用 AngularJS创造出一款最适合开发丰富而强大应用的框架。 Ionic不仅如此优秀，而且它的核心架构也是为开发专业应用创建，和AngularJS完美融合。
Ionic以流行的原生移动开发SDK为蓝本，使开发过原生iOS或安卓app的任何人都容易理解。开始只需书写你的代码，完成时通过PhoneGap发布。一次开发，处处运行。
简洁，简单，而且实用。 Ionic为所有当前移动设备而设计，并且呈现完美。伴随众多流行移动组件，结构，交互规范，以及华丽的（且可扩展）的主题，你可以更好的定制化APP应用。
①下载安装Node JS 版本6.0以上 安装完成cmd输入node -v 显示对应版本即安装成功
②安装ionic和Cordova
Cmd 输入npm install -g ionic cordova 经过漫长的等待，会提示安装成功
③创建ionic项目
Cmd窗口 cd项目创建的目录 输入ionic start project_name [template]
template是内置的模板类型：blank/sidemenu/tabs/（default）三种
Ionic3常用命令npm install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝） cnpm install -g cordova ionic（安装cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看帮助） ionic -v（查看版本） ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单） ionic g page login(添加页面)ionic g provider BaseService(添加服务端口)ionic platform add androidionic platform add android（添加android平台） ionic platform remove android（移除android平台） ionic build android（编译项目apk） ionic emulate android（运行项目apk 手机连接在手机运行模拟器连接在模拟器运行） ionic run android （相当于build + emulate） ionic serve（开启服务调试）
PS:
WebStorm 2017.02
Android：①JDK1.8 ②Android SDK (API25 具体看项目)
Ios：①Xcode ②Developer Program
按照官网命令ionic start创建项目后生成如下结构树：
hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
node_modules ：node各类依赖包
resources ：android/ios 资源（更换图标和启动动画）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
www：文静态件
platforms：生成android或者ios安装包路径（ platforms\android\build\outputs\apk：apk所在位置）
plugins：插件文件夹，里面放置各种cordova安装的插件
config.xml: 配置文件
package.json: node安装模块时的依据
tsconfig.json: TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验typescript
src工作目录：
app：应用根目录
assets：资源目录（静态文件（图片，js框架。。。）各种需要放置在此文件夹内，不然会出错，（尴尬。。。）
pages：页面文件，放置编写的页面文件，包括：html，scss，ts。（搞事情的）
theme：主题文件，里面有一个scss文件，设置主题信息。
Angular4 架构详解
官方架构图：
这个架构图展现了 Angular 应用中的 8 个主要构造块：
· 模块 (module)
· 组件 (component)
· 模板 (template)
· 元数据 (metadata)
· 数据绑定 (data binding)
· 指令 (directive)
· 服务 (service)
· 依赖注入 (dependency injection)
接下来我按顺序并结合图来讲解一下。
Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。
下面举个例子，简单介绍一下 @NgModule 中的内容
imports 本模块声明的组件模板需要的类所在的其它模块
providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
exports declarations 的子集，可用于其它模块的组件模板。
bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。
PS：在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。
这次我们把这三点一起来讲，先看一下这段代码
Component组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
· selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 <hero-list> 标签，创建并插入该组件。
· templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用"`"这个符号来直接编写 HTML 代码。
· providers：组件所需服务的依赖注入。
template模板就是那段 HTML 代码，可以用 templateUrl 引入外面的，也可以用 template`` 直接写。
metadata元数据装饰器用类似的方式来指导 Angular 的行为。 例如 @Input、@Output、@Injectable 等是一些最常用的装饰器，用法就不在这里展开了。
PS：在图中的意义：看图中间那一块，模板、元数据和组件共同描绘出这个视图。
这里一共展示四种数据绑定，看一下示例代码：
后台ts：
可能大家对各种括号看的眼花了，总结一下：
1. 双花括号是单向绑定，传递的是值。方向是组件 -> 模板。
2. 方括号是单向绑定，传递的是属性。方向是父组件 -> 子组件。
3. 圆括号是事件绑定，处理点击等活动（action）。
4. 方括号套圆括号是双向绑定，方向是组件 <-> 模板。
PS：在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。
严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。我们这里提到的指令有两种类型：结构型 structural 指令和属性 attribute 型指令。放一下原文证明一下组件确实算是一个指令：
While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.Two other kinds of directives exist: structural and attribute directives.
结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。
属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。
Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。
PS：在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。
官方文档的概念：服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。
这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。
PS：在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。
依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
比如我们要给某组件导入 ContactServiceProvider这个服务，看这段代码：
这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。
当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 ContactServiceProvider注册一个提供商 provider。
看一下下面的代码，
PS：在图中的意义：看图左下角角那一块，依赖注入主要用来导入服务。
推荐一些学习资源
官方文档，内容很全，需要一定的时间进行阅读。
官方文档，至少要把 TS 的基本语法要去掌握了。
根据官网翻译，基本知识很全，需要掌握。
款app开发平台各有特色：ZohoCreator低代码开发环境，支持多平台；AppCan跨平台，可视化开发；APICloud支持Hybrid开发，云端服务；Taro多端统一开发，框架灵活；AppPark图形化操作，集成API；DCloudHBuilderX高效前端开发工具，原生能力访问。
Zoho Creator是一个强大的低代码开发平台，用于快速构建定制化的业务应用程序。
产品主要特点：
1、低代码开发环境
Zoho Creator允许用户通过拖拽式的界面和最少的手动编码来设计和开发应用。这意味着即使是非技术人员也能快速创建复杂的业务应用。
2、Deluge编程语言
平台内置了Deluge这一专为业务逻辑设计的编程语言。Deluge使用类似自然语言的语法，使得编写计算逻辑、工作流和数据处理规则变得简单直观。
3、多平台兼容性
开发的应用可以同时部署在Web、Android和iOS平台上，确保跨设备的一致性和无缝体验。这得益于Zoho Creator的跨平台编译能力。
4、丰富的预制模板和组件
提供超过60个行业的应用模板，覆盖CRM、ERP、库存管理等多种业务场景，用户可以直接使用或进行定制，大大加快开发速度。
5、强大的数据管理和分析
内置的数据管理系统支持实时数据查看、高级过滤、排序以及报表和仪表盘的创建，帮助企业更好地理解和分析业务数据。
6、丰富的集成
Creator 提供600多个预构建的集成，而且支持将来自多个数据源（数据库、API、旧有 ERP 和云服务）的大量数据聚集到具有洞察力的 Web 和可移动的仪表板中。
AppCan是国内较早的移动应用开发平台之一，支持跨平台开发，提供云服务和企业移动解决方案。
产品主要特点：
1、跨平台开发能力
AppCan支持一次开发，多平台部署，能够同时适配iOS、Android、Windows Phone等主流移动操作系统。
2、可视化IDE与拖拽式开发
AppCan提供了一个用户友好的集成开发环境（IDE），支持拖拽式组件布置和界面设计，使得开发者即便不具备深厚的编程基础，也能通过简单的操作快速构建应用界面和逻辑。
3、丰富的插件库与API支持
平台包含丰富的预置插件和API接口，涵盖了地图、社交、支付等多种功能，便于开发者根据应用需求快速集成和扩展功能。
4、性能限制
相较于原生应用，在某些复杂场景下可能存在性能瓶颈，特别是在图形渲染和动画处理方面。
APICloud可以提供一站式移动app开发服务，支持Hybrid开发模式，拥有丰富的插件市场和云服务。
产品主要特点：
1、快速开发与多端兼容
APICloud允许使用HTML5、CSS和JavaScript等Web技术进行开发，实现了跨平台的快速应用构建，能够同时适应iOS和Android等多个操作系统，大大缩短了开发周期。
2、云端服务与持续集成
APICloud提供了云端的开发、测试、打包与发布服务，支持版本管理、真机调试和自动化测试等功能，有利于团队协作和敏捷开发流程。
3、高性能渲染引擎
APICloud采用优化的渲染引擎，提升Web应用在原生环境中的运行性能，力求接近原生应用的用户体验，同时支持离线包和动态加载机制。
4、性能挑战
对于极度依赖系统底层功能或需要高性能图形处理的应用（如大型游戏、复杂的视频编辑等），可能无法达到与原生应用同等的性能表现。
Taro是腾讯推出的一套支持多端统一开发的框架，使用React开发，能编译到微信小程序、H5、React Native等多个平台。
产品的主要特点：
1、多端统一开发
Taro最显著的特点是支持使用一套代码基底来开发跨平台应用，包括微信小程序、H5、React Native应用等。
2、框架灵活性
Taro支持使用React、Vue、Nerv等前端框架进行开发，开发者可以根据团队熟悉的技术栈选择合适的框架，这为项目启动提供了高度的灵活性和自由度。
3、丰富的生态
Taro社区活跃，拥有丰富的插件和UI组件库，能够满足大部分开发需求。
4、学习曲线陡峭
尽管Taro努力提供一致的开发体验，但由于需要适配多端，其框架和API设计相比单一平台的原生开发可能会显得更为复杂。
AppPark是一款专注于APP在线制作的平台，提供图形化操作界面，无需编程基础即可制作简单的APP。
产品的主要特点：
1、丰富的UI组件库
AppPark平台提供了从基础到高级的大量UI组件，例如Button、TextField、ListView、TabBar、Drawer、DropdownButton等，这些组件让开发者能快速搭建界面，提高开发效率。
2、集成的API接口
平台集成了网络请求、数据存储、权限管理等多种API接口，简化了开发流程，让开发者无需深入了解底层实现就能完成功能开发，降低了技术门槛。
3、PaaS平台优势
作为PaaS平台，AppPark支持快速开发和部署，减轻了开发者在基础设施管理上的负担，并且具备弹性伸缩能力，可根据应用需求自动调整资源。
4、性能瓶颈
在处理图形密集型或高性能需求的应用时，可能在某些场景下存在性能瓶颈，因为额外的抽象层和框架可能会引入一定的开销。
DCloud HBuilder X是国产的高效前端开发工具，特别适合开发快应用、微信小程序、WebApp及各种移动APP。
产品的主要特点：
1、跨平台开发
HBuilder X支持一次编写，多平台运行的能力，允许开发者使用同一套代码基底开发iOS、Android以及Web应用，显著提高了开发效率和降低了维护成本。
2、高效易用的开发环境
提供了一个集成开发环境（IDE），内置丰富的组件库和模板，使得快速构建界面和实现功能变得简单直观。同时，它拥有强大的代码编辑器和调试工具，支持智能提示、语法高亮等功能，加速了开发进程。
3、原生能力访问
HBuilder X允许开发者轻松调用设备的原生功能，如摄像头、GPS定位、传感器等，这使得基于Web技术开发的应用能够拥有接近原生应用的性能和用户体验。
4、定制化局限
在高度定制化方面可能会有所限制，有时需要更多工作来绕过框架的限制或深入学习框架底层以实现特定需求。
以上六款app开发平台盘点，你更喜欢哪一款？
*请认真填写需求信息，我们会在24小时内与您取得联系。
