移动 App 开发

Native App-原生开发
开发技术

原生的 Android 平台
原生的 iOS 平台

JavaScript bridge
用于原生应用中的 Web 和原生平台进行交互。
https://github.com/lzyzsd/JsBridge

博学谷 - 在职加薪课

《和原生交互的 Web 开发》



原生应用中的 Web 怎么做?

Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。（简单来说，原生应用是特别为某种操作系统开发的，比如iOS、Android等等，它们是在各自的移动设备上运行的）
该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
原生应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。
iOS

语言：Object-C、Swift
开发工具：XCode
操作系统：macOS

Android：

语言：Java、Kotlin
开发工具：Eclipse、Android Studio
操作系统：Windows、macOS、Linux 都支持

优点


直接依托于操作系统,交互性最强,性能最好
相比于其它模式的交互,原生APP体验是最优的


功能最为强大,特别是在与系统交互中,几乎所有功能都能实现
得益于原生是直接依托于系统的,所以可以直接调用官方提供的api,功能最为全面(比如本地资源操作,通知,动画等)


缺点


开发成本高,无法跨平台,不同平台Android和iOS上都要各自独立开发
Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员


更新缓慢,特别是发布应用商店后,需要等到审核周期
原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新


维护成本高
同开发一样,项目上线后,维护起来也很为01-麻烦


Web App-网页开发
Web App 指采用Html5写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。（Web应用本质上是为移动浏览器设计的基于Web的应用，它们是用普通Web开发语言开发的，可以在各种智能手机浏览器上运行）
Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。
HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但仍然存在一些重大的局限性，具体包括
会话管理、安全离线存储以及访问原生设备功能
（摄像头、日历和地理位置等）。
优点


开发成本低,可以跨平台,调试方便，开发速度最快
web app一般只需要一个前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试


维护成本低
同上,如果代码合理,只需要一名前端就可以维护多个web app


更新最为快速
由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问是就已经更新了(当然需要解决一些缓存问题)


无需安装App,不会占用手机内存
通过浏览器即可访问,无需安装,用户就会比较愿意去用


缺点


性能低,用户体验差
由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好


依赖于网络,页面访问速度慢,耗费流量
Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量


功能受限,大量功能无法实现
只能使用Html5的一些02-特殊api,无法调用原生API,所以很多功能存在无法实现情况


临时性入口,用户留存率低
这既是它的优点,也是缺点,优点是无需安装,缺点是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再次使用


Hybrid App-混合开发

Hybrid APP指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。
混合应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器(WebView - 认为是一个浏览器)里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。
混合应用大家都知道是原生应用和Web应用的结合体，采用了原生应用的一部分、Web应用的一部分，所以必须在部分在设备上运行、部分在Web上运行。不过混合应用中比例很自由，比如Web 占90%，原生占10%；或者各占50%。
有些应用最开始就是包了个原生客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。比较知名的APP，比如手机百度和淘宝客户端 Android版，走的也是Hybrid App的路线，不过手机百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。
优点


开发成本较低,可以跨平台,调试方便
Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便
最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立的原生人员
一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器


维护成本低,功能可复用
同上,如果代码合理,只需要一名前端就可以维护多个app,而且很多功能还可以互相复用


更新较为自由
虽然没有web app更新那么快速,但是Hybrid中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果


针对新手友好,学习成本较低
这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发


功能更加完善,性能和体验要比起web app好太多
因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了


部分性能要求的页面可用原生实现
这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验


缺点


相比原生,性能仍然有较大损耗
这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比


不适用于交互性较强的app
这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)


相关技术
共同点：

把网页打包成移动 App
使你的 Web 程序可以访问手机原生能力

Cordova
Cordova是Apache软件基金会的一个产品。其前身是PhoneGap，由Nitobi开发，2011年10月，Adobe收够了Nitobi，并且PhoneGap项目也被贡献给Apache软件基金会。Apache在2012年12月，发布了Cordova，截止到2015年12月，最新版面是3.0。
该框架的目标用户群体是原生开发者，其设计初衷是希望用户群体能够通过跨平台开发的方法降低原生开发的成本。为此，开发人员需要安装原生开发环境，配置工程，使用HTML5、CSS3、JS和原生SDK生成应用。

Cordova的优势很明显，可以使用的框架、原生接口、支持平台都很多。但是，外国人写的东西，公司使用后，出现的技术问题难以解决。同时，其在使用 jQuery Mobile、Sencha Touch等前端框架的时候，有特效启动慢、页面切换慢、数据请求慢的特点。

APPCan
AppCan成立于2010年，2011年推出产品并测试，2012年正式推出品牌，2013年商业模式成型，2014年开发者注册约70w。AppCan不是开源平台，同时，企业版和部分插件是收费的。换句话说，AppCan只是一个卖软件的商业公司。我们认为：这会对其市场的占有率有着直接影响，闭源而没有垄断，所以前景不会太好。
DCloud
DCloud大部分产品开源，W3C会员单位，HTML5中国产业联盟的发起公司之一，在HTML5这个行业有一定的江湖地位。旗下四款产品：HBuilder、5+ Runtime、MUI、流应用都是弥补并扩展HTML5特性的产品。该公司的理念就是解决HTML5的性能、工具、能力三方面的问题。MUI是一款不错的前端框架，性能比 jQuery Mobile、Bootstrap好很多，主要区别：


设计思路不同，MUI坚持用原生JS做，不依赖jQuery或者Angularjs。


MUI调用了5+ Runtime的底层原生加速，比不带原生加速的框架更快。
但是，DCloud毕竟是个新平台，发展才2年，新产品内部存在的Bug还需要很多的测试。在其官方社区中，不少开发者也在呼吁DCloud尽快完善文档和框架。


API Cloud
APICloud提供原生应用的功能模块（设备访问，界面布局，开放SDK等），开发者可以通过JS调用。前端工程师负责页面布局，UI展现，及简单的交互，原生模块负责性能方面和功能实现，两者结合形成一个完整的应用。同时APICloud提供了云数据库的功能，前端不必了解PHP，Node.js等后端语言，通过JS接口或Restful API实现数据库的增删改查。
但是APICloud的更新速度很快，版本不太稳定。而且，它是为不懂APP开发的人士准备的，不适合科技公司和程序员。

四种方式对比


跨平台开发 Native App

特点：使用类似于 Web 技术的方式来开发 Native App。


相关开发技术
React Native（主流）

公司：Facebook
技术栈：React

Weex（使用不多）

公司：Apache 开源基金会
Vue.js 技术栈

Flutter（未来趋势）

公司：Google
它提供了官方的原生 UI 组件
比 RN、Weex 之类的体验更好
开发语言：Dart（和 JavaScript 很像）
商业应用：闲鱼

优点


虽然说开发成本大于Hybrid模式,但是小于原生模式,大部分代码可复用
相比于原生模式,这种模式是统一用JS写代码,所以往往只需要一名成员投入学习,即可完成跨平台app的开发,而且后续代码封装的好,很多功能可复用


性能体验高于Hybrid,不逊色与原生
这种模式和Hybrid不一样,Hybrid中的view层实际上还是dom,但是这种模式的view层是虚拟dom,所以性能要高于Hybrid,距离原生差距不大
这种模式可以认为是用JS写原生,即页面用JS写,然后原生通过Bridge技术分析JS,将JS内容单独渲染成原生Android和iOS,所以也就是为什么性能不逊色原生


开发人员单一技术栈,一次学习,跨平台开发
这种模式是统一由JS编写,有着独特的语法,所以只需要学习一次,即可同时开发Android和iOS


社区繁荣,遇到问题容易解决
这应该是React Native的很大一个优势,不像Hybrid模式和原生模式一样各自为营,这种模式是Facebook统一发起的,所以有一个统一的社区,里面有大量资源和活跃的人员,对开发者很友好


缺点


虽然可以部分跨平台,但并不是Hybrid中的一次编写,两次运行那种,而是不同平台代码有所区别
这种模式实际上还是JS来写原生,所以Android和iOS中的原生代码会有所区别,如果需要跨平台,对开发人员有一定要求
当然了,如果发展了有一定时间,组件库够丰富了,那么其实影响也就不大了,甚至会比Hybrid更快


开发人员学习有一定成本
虽然社区已经比较成熟了,但是一个新的普通前端学习起来还是有一定学习成本的,无法像Hybrid模式一样平滑


学习成本大，对开发人员技术要求比较高


不懂原生开发很难驾驭好


说是使用 Web 技术进行开发，还是多少得学点儿原生 App 开发，才能处理好跨平台。


前期投入比较大，后劲很足。


另类 App（Web 技术为主导）
小程序

微信小程序
百度小程序
头条小程序
支付宝小程序
。。。

统一开发平台

taro
uni-app

微网页

微信公众号
百度直达号
。。。

快应用（不温不火，iPhone 不参与很难搞起来）

各大手机厂商联合制定推出的一种方式，类似于小程序
使用 Web 技术进行开发， 而且提供了在 Web 中访问手机硬件等底层交互的 API
属于混合 App 的一种方式

PWA（网站离线访问技术，没有 iPhone 不参与）

它可以让网站拥有一个类似于 App 的入口
提供了网站的离线应用访问
Google 在推动
手机端目前只能在 安卓手机的 Chrome 浏览器运行

各大开发模式对比





Native App
Web App
Hybrid App
React Native App




原生功能体验
优秀
差
良好
接近优秀


渲染性能
非常快
慢
接近快
快


是否支持设备底层访问
支持
不支持
支持
支持


网络要求
支持离线
依赖网络
支持离线(资源存本地情况)
支持离线


更新复杂度
高(几乎总是通过应用商店更新)
低(服务器端直接更新)
较低(可以进行资源包更新)
较低(可以进行资源包更新)


编程语言
Android(Java),iOS(OC/Swift)
js+html+css3
js+html+css3
主要使用JS编写,语法规则JSX


社区资源
丰富(Android,iOS单独学习)
丰富(大量前端资源)
有局限(不同的Hybrid相互独立)
丰富(统一的活跃社区)


上手难度
难(不同平台需要单独学习)
简单(写一次,支持不同平台访问)
简单(写一次,运行任何平台)
中等(学习一次,写任何平台)


开发周期
长
短
较短
中等


开发成本
昂贵
便宜
较为便宜
中等


跨平台
不跨平台
所有H5浏览器
Android,iOS,h5浏览器
Android,iOS


APP发布
App Store
Web服务器
App Store
App Store


如何选择开发模式
目前有多种开发模式,那么我们平时开发时如何选择用哪种模式呢？如下
选择纯Native App模式的情况


性能要求极高,体验要求极好,不追求开发效率
一般属于吹毛求疵的那种级别了,因为正常来说如果要求不是特别高,会有Hybrid


选择Web App模式的情况


不追求用户体验和性能,对离线访问没要求
正常来说,如果追求性能和体验,都不会选用web app


没有额外功能,只有一些信息展示
因为web有限制,很多功能都无法实现,所以有额外功能就只能弃用这种方案了


选择Hybrid App模式的情况


大部分情况下的App都推荐采用这种模式
这种模式可以用原生来实现要求高的界面,对于一些比较通用型,展示型的页面完全可以用web来实现,达到跨平台效果,提升效率
当然了,一般好一点的Hybrid方案,都会把资源放在本地的,可以减少网络流量消耗


选择React Native App模式的情况


追求性能,体验,同时追求开发效率,而且有一定的技术资本,舍得前期投入
React Native这种模式学习成本较高,所以需要前期投入不少时间才能达到较好水平,但是有了一定水准后,开发起来它的优势就体现出来了,性能不逊色原生,而且开发速度也很快


选择其它方案

小程序（目前移动 App 中开发最低的，体验也是仅次于原生+跨平台NativeApp）

如何分辨一个 App 是原生做的还是 Web 做的
1、看断网情况
通过断开网络，刷新页面，观察内容缓存情况来有个大致的判断，可以正常显示的就是原生写的，显示404或者错误页面的就是html页面。
3、看复制文章的提示，需要通过对比才能得出结果。
比如文章资讯页面可以长按页面试试，如果出现文字选择，粘贴功能的是H5页面，否则是native原生的页面。
有些原生APP开放了复制粘贴功能或者关闭了，而H5的CSS屏蔽了复制选择功能等情况，需要通过对目标测试APP进行对比才可知。
在支付宝APP、蚂蚁聚宝是可以判断的。
4、看加载的方式
如果在打开新页面导航栏下面有一条加载线的话，这个页面就是H5页面，如果没有就是原生的。
5、看app顶部，导航栏是否会有关闭的操作
如果APP顶部导航栏当中出现了关闭的按钮或者关闭的图标，那么当前的页面是H5页面，原生的不会出现（除非设计开发者特意设计），美团、大众点评的APP、微信APP当加载H5过多的时候，左上角会出现关闭两个字。
6、判断页面下拉刷新的时候（前提是要有下拉刷新的功能）
如果页面没有明显刷新现象的是原生的，如果有明显刷新现象（比如闪一下）的是H5页面（Ios和Android）。比如淘宝的众筹页面。
7、下拉页面的时候显示网址提供方的一定是H5页面。
(https://s5.51cto.com/wyfs02/M02/93/64/wKiom1kKyzWDcmeRAARsWiUM4mA579.png-wh_500x0-wm_3-wmp_4-s_2902533966.png)
8、利用系统开发人员工具
找到手机的设置，开发者选项，显示布局边界，选择开启后再去查看APP整体布局边界，这样所有应用控件布局就会一目了然。
如果是native APP那么每个按钮、文字、图片都是红色的线显示这个控件的布局情况。如下图的微信：
(https://s5.51cto.com/wyfs02/M02/93/63/wKioL1kKzGzTEtNCAAXhWJHYlgI333.png-wh_500x0-wm_3-wmp_4-s_3312311617.png)
如果是web APP那么应该就是一个webview去加载网页，webview作为一个控件，只有一个边界框，即只有屏幕边才有红色线，如下图：
(https://s1.51cto.com/wyfs02/M00/93/63/wKioL1kKzXDhS9IMAAb9O0qy84c885.png-wh_500x0-wm_3-wmp_4-s_1494819383.png)
混合APP 则是native 与 webview 混排的界面，如下图红色线框是各控件的绘制边界，中间那一大块布局丰富的界面没有显示出很多边界红线，就是网页实现的。如下图的京东：
(https://s1.51cto.com/wyfs02/M01/93/63/wKioL1kKzjWjSa77AA10F9eHjLU763.png-wh_500x0-wm_3-wmp_4-s_2780626697.png)
DCloud 平台 HTML5 + App 开发
下载安装 HBuilderX
下载地址：https://www.dcloud.io/hbuilderx.html
HBuilderX-使用步骤：

第一步：新建项目文件
第二步：选择打包方式，如：5+App
第三步：选择默认模板
第四步：指定项目文件目录
第五步：项目名称不能为空，自定义一个
第六步：打开定义的项目文件，会默认新建一些文件夹

index.html——首页文件
manifest.json——打包需要的配置文件

第七步：index.html里简单测试
<script type="text/javascript">
+      //5+runtime重写了下面的两个方法，调用的是系统原生的组件
+    	alert('test')
+		confirm('确定删除？')
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>

第八步：点击上方运行——>运行到浏览器——>Chrome

创建项目
访问 HTML5 + API

HTML5+ API Reference

真机调试运行

用手机助手连接手机（安装驱动）
开启手机的开发者选项
启用 USB 调试
使用数据线连接手机
在 HBuilder 中找到：运行 -> 运行到手机或模拟器 -> 你的设备
HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题

模拟器运行HBuilderX中的html文件

第一步：下载夜神模拟器

官网：https://www.yeshen.com/

第二步：安装后，打开夜神模拟器，找到应用 - HBuilderX
第三步：点击HBuilderX上方的运行——>运行到手机或模拟器；查看模拟器是否运行，无则重启模拟器
第四步：在模拟器上显示自定义项目中的index.html首页文件，检测调试效果

模拟器运行App的基础功能示例：（网页上调用系统的原生功能）

第一步：打开Dcloud官网：https://www.dcloud.io/
第二步：选择 5+RunTime
第三步：下拉找到 5+SDk，进行点击
第四步：选择左侧 HTML5+，下方为功能属性列表：Camera摄像头
实例1：
第五步：点击左侧Device-规范，获取手机设备的相关信息，通过plus.device获取
https://www.html5plus.org/doc/zh_cn/device.html



实例2：
Share模块管理客户端的社交分享功能，提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。在下方的示例模块中，找演示代码
https://www.html5plus.org/doc/zh_cn/share.html


夜神模拟器显示：


实例3：
Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。在下方的示例模块中，找演示代码
https://www.html5plus.org/doc/zh_cn/camera.html


拍照功能显示:

打包发布
打包成apk文件的步骤：


点击并配置 manifest.json 指南文件
基础设置

应用名称：自定义
应用版本名称：1.0
应用入口页面（首页）地址：index.html
应用是否全屏显示：默认
横竖屏设置：portrait-primary（竖屏）

图标设置

自动生成图标：点击浏览—建议尺寸：1024*1024
不设置，会默认为HBuilder图标

启动图配置、SDK配置 可选默认
模块权限配置

根据权限选配置，如：蓝牙、分享、通讯录等



在 HBuilder 中找到：发行 -> 原生 App（云打包），本地打包太复杂，需配置开发环境

Android（apk包），推荐；iOS（iPa包），需要申请证书
点击：使用公共测试证书
渠道包，不用选中
广告联盟下选项，不用选中
点击 下方的  打包；可以——点击上方的发行—>查看云打包状态：显示-正在打包



等待一段时间，得到打包结果安装包，会有一个下载链接地址，然后安装到手机上或拖拽apk文件到夜神模拟器上进行测试

如果测试不成功，如：摄像头不能启动，可以重启夜神模拟器进行测试



最后根据需要发布到对应的手机应用商店


配置 manifest

Manifest.json文档说明 manifest配置

打包

离线打包
云打包

发布
Vue 项目打包发布移动 App
一、 如果需要发布移动App，则在 public 中添加 manifest.json 文件

参考文档：http://ask.dcloud.net.cn/article/94
二、在项目的 vue.config.js 文件中
在vue官网中，生态系统——>Vue CLI——>配置参考——>publicpath（打包配置参考），部署应用包时的基本 URL
https://cli.vuejs.org/zh/config/#publicpath

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。


vue.config.js 和 VueCLI 打包的配置文件

如果需要修改配置项则添加这个文件
如果不需要修改，则不用添加


改什么

大多数都是和 webpack 配置相关的配置项


怎么改

配置参考



第一步：vue.config.js中：
// vue-cli 配置
/**
 * 配置文档：https://cli.vuejs.org/zh/config/
 */

module.exports = {
  lintOnSave: false,
  /**
  * / 用于部署在 HTTP 服务中
  * 如果是混合应用，则将其设置为相对路径 ./  或 ''
  * 参考文档：https://cli.vuejs.org/zh/config/#publicpath
  */
  publicPath: './'
}


三、将 Vue 项目打包（构建为纯粹的 html、css、js）
第二步：网页不支持vue文件，需要打包为html文件
npm run build

注：

打包后，会默认清空dist文件夹里的文件内容
打包后，public文件夹 中的文件不会被编译，会自动复制到dist文件夹里
可以把配置文件manifest.json 文件，添加到public文件夹 中

打开新的命令行  可简写：$hs

$ http-server

http-server 是一个简单的零配置命令行http服务器
网址：https://github.com/http-party/http-server
全局安装

npm install --global http-server


打包后，产生 dist 结果:

入口文件就是index.html

参考文档：https://cli.vuejs.org/zh/guide/deployment.html#%E6%9C%AC%E5%9C%B0%E9%A2%84%E8%A7%88
四、真机调试运行进行测试
五、发布
发布移动 App

结合使用 DCloud 平台
1. 在 HBuilder 中打开 dist 目录
2. 选择 发行 -> 原生 App（云打包）
3. 等待结构拿到打包的安装文件
4. 最后去手机安装测试
5. 最后根据需要发布到应用商店

打包移动 App，准备工作步骤总结：
第一步：在打包项目的文件夹中，启动命令行
第二步：命令行中输入 npm run build,打包vue项目文件


产生dist文件夹，里面包含css文件夹、js文件夹、index.html文件


没有生成manifest.json 打包配置文件，需要手动添加


index.html文件中的src

src=/js/chunk-vendors.5dd9b266.js里的  /  ，指的是根路径


localhost:8080/abc/index.html

注：只有第一个 / ,才是根路径；域名是根




第三步：新打开一个命令行，全局安装http-server

npm install --global http-server

第四步：命令行中输入$ http-server或$ hs，开启一个web的测试服务器
显示如下，端口号为8080

http://127.0.0.1:8080

http://192.168.151.35:8080

http://10.253.1.251:8080

第五步：把 npm run build打包后生成的dist文件夹名称改为abc
第六步：在浏览器网址中输入：localhost:8080/abc/index.html，页面显示为空，F12检查显示为404

第七步：在vue-cli的配置文件vue.config.js中，进行配置相对路径，publicPath值为  ./  或 空字符串

module.exports = {

lintOnSave: false,

/**

/ 用于部署在 HTTP 服务中
如果是混合应用，则将其设置为相对路径 ./  或 ‘’
参考文档：https://cli.vuejs.org/zh/config/#publicpath

*/

publicPath: ‘./’

}


第八步：把HBuilderX的打包配置文件manifest.json 文件复制到dist里面
第九步：vue-cli的配置文件有修改，需要重新打包

npm run build

此时，会把dist里的文件进行自动删除manifest.json 文件
第十步：把HBuilderX的打包配置文件manifest.json 文件复制到publice文件夹里面，此时


index.html文件中的src路径，改为相对路径
//  src=/js/chunk-vendors.5dd9b266.js里的  **/**  ，指的是根路径
src=js/app.5c8db14b.js



五、发布 移动APP
发布移动 App

结合使用 DCloud 平台
发布移动 App

结合使用 DCloud 平台
1：在 HBuilder 中打开 dist 目录（拖拽进来）
​       点击manifest.json 文件，

应用名称，改为：头条App
图标配置：选图片，建议为1024*1024;点击自动生成所有图标并替换

此时，dist文件夹下会自动生成unpackage图标文件夹


启动图配置，需要美工UI提供不同尺寸图，因不能自动生成
应用是否全屏显示，进行选中-手机状态栏被覆盖

2：选择 发行 -> 原生 App（云打包）

选择Android模式-公共证书-去除广告-打包按钮

3：等待打包下载链接地址，拿到打包的文件拖拽到夜神模拟器进行安装
4：点击app图标，检测：启动图正常
5：最后去手机安装测试
6：最后根据需要发布到应用商店

前端开发APP，从HBuilder开始~

序

通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。

 

HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

 

HBuilder 的手机原生能力调用分2 个层面：

 

a) 跨手机平台的能力调用都在HTML5+ 规范里，比如二维码、语音输入，使用plus.barcode 和plus.speech。编写一次，可跨平台运行。

 

b) JS Bridge是另一项创新技术，通过js 可以直接调ios 和android 的原生API，这部分就不再跨平台，比如调ios game center，或在android 手机桌面创建快捷方式。

JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj，然后在js 里操作obj对象的方法属性就可以了。

 

注：使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。mobileweb 的文件存放在web 服务器上，而移动App 的文件存放在手机本地，编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。

 

当然这些移动 App 里某些页面也可以继续从服务器端以网页方式运行。所以mobile web，在HBuilder 里新建项目时，属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包.

内容简介

介绍目前前端人员开发app的几种方法，具体介绍hbuilder开发app，一扇赞新的大门~

无所不能的js

最开始js仅仅局限于网页上一些效果，操作网页内容等，但是nodejs把js带入了后端，也就是服务器端，从此前端人员可以涉及后端，前后通吃，native.js（以及其他js，稍候介绍）把js带入了移动端，从此前端人员前后移动通吃。

 

前端涉及app的两种方式

适应移动端的网页

大家都很熟悉的bootstrap，和现在刚出来的amazeui就是这种方法的代表，说的简单点就是对移动端做了适配，布局样式组件都适合移动端展示。

 

缺陷：毕竟不是app，不管怎样也没办法取代app的便捷和功能强大。

 

js+html+css+打包技术

比较有名的就是phonegap了，国内的是hbuilder，大概的意思是html负责页面内容，js负责效果以及调用原生app方法，ui框架负责样式，最后打包成apk或者ipa。

 

hbuilder（http://www.dcloud.io/）

不谈phonegap，不适用国内国情，是的，你没有看错，这是一个开发的ide，其实就是对eclipse进行了深度定制。

 

特点是快捷键比较多，支持移动app开发（h5+方式）。

 

h5+（http://www.html5plus.org/#home）

可以说nodejs将js带到后端，h5+将js带到移动端。

 

原理

上面说过的原理，再次说一遍：

 

html负责页面，也就是的内容和框架；

 

js负责调用方法，也就是调用一些移动端原生；

 

ui负责样式，比较有名的bootstrap，amazeui，jquery mobile，mui

 

ui比较

上面说的几个ui，做下简单比较，仅代表个人观点，

 

Amazeui:功能和bootstrap重复，官方解释是对中文排版做了优化，个人觉得有点多余，bootstrap就很好。

 

Bootstrap:适合移动端浏览网页适配，移动端浏览效果不错，但是还是网页。

 

jquery mobile:专门对移动端做定制，看起来就像手机应用一样，js+css，国外的，不推荐，有坑。

 

Mui:这个是推荐的，比较了jqmobile和mui，显然mui效果样式好点，估计也会有坑，但是支持国产吧。

 

前端开发app

 

搭建开发环境

不需要搭建ios和android的开发环境，只需要下载hbuilder（估计需要java环境支持）。

 

选定ui

目前推荐mui，效果不错

 

写事件

通过js调用原生方法实现app效果

 

写业务逻辑

环境搭建

前言

本教程是介绍使用html5+（nativejs）和mui开发移动app（包括android和ios），

 

感兴趣请继续，不感兴趣请跳过，大部分来自官方api，增加了一些自己的总结。

 

HBuilder

 

说明

用h5+开发app的环境，也是ide，对eclipse做了深度定制，以前使用过eclipse或者myeclipse的童鞋可以直接上手。

 

官网

http://www.dcloud.io/

 

下载

在官网上点击下载，安装好后可以自己将文件夹压缩成zip，方便以后使用，解压就可以用。

 

依赖

估计会需要jre环境，没有试过，如果需要请自行百度搜索jre安装方法。

 

上手

打开HBuilder之后默认会有一个项目“HelloHBuilder”，里面有HBuilder使用的介绍。

 

快捷键

HBuilder一大亮点是快捷键，但是如果习惯了自己之前的快捷键会很别扭，需要自己在工具——选项——常规——快捷键中修改。

 

插件

HBuilder将插件做了下优化，提供了最长用的一些插件，并且使用dcloud网站下载，速度很快，eclipse自带插件安装需要翻墙。

 

打开工具——插件安装，安装自己需要的插件，例如我安装了如下插件：

 

 

完成

环境搭建就完成了，这应该是所有开发环境搭建中最简单的了。

 

 

原理介绍

原理

html5+开发app的原理大概是这样：

 

html页面负责内容；

 

ui负责页面样式；

 

js负责调用原生app方法。

 

html5

html5这部分负责页面，也就是app中你看到的东西，大概的架构和内容

 

ui

ui负责页面样式，既然要做移动app，那做出的效果就得和移动端靠近，这里并没有局限于用哪种ui，比较常见的适配移动端的ui框架有：

 

bootstrap

介绍：Twitter开发的ui框架，特点是可以简介美观，可以适配移动端（例如本站：http://uikoo9.com/）

 

中文官网：http://v3.bootcss.com/

 

amazeui

介绍：国人模仿bootstrap做的一个ui框架，个人感觉有点多余，有兴趣的可以看看。

 

官网：http://amazeui.org/

 

jquery mobile

介绍：HBuilder其实是模仿国外的phonegap，通用mui是模仿jquery mobile，但是感觉也不错

 

官网：http://jquerymobile.com/

 

mui

介绍：和HBuilder相搭配的移动ui，也和nativejs相搭配，感觉还不错，模仿的ios7界面风格。

 

官网：http://dcloudio.github.io/mui/

 

framework7

介绍：国外一块模仿ios7的ui框架，赞

 

官网：http://www.idangero.us/framework7/

 

 

nativejs

介绍：一个可以调用android和ios原生方法的js

入门：http://ask.dcloud.net.cn/article/88

 

搭配

选择：目前比较好的搭配是mui+nativejs+hbuilder，你也可以尝试其他的组合，例如jqmobile+nativejs等

 

mui-demo：http://www.dcloud.io/hellomui/

 

nativejs-demo：http://www.html5plus.org/#case#/case/id/4.html

 

mui开发示例

前言

看了前面两篇内容是否有点跃跃欲试了？

 

下面就开始一个简单的例子，以及mui相关内容

 

mui

官网：http://dcloudio.github.io/mui/

 

说明：希望你可以把官网内容通读一遍，这是以后开发的基础

 

开始

新建项目

在首页点击新建移动App，如下：



 

或者在项目管理器内右键新建，或者快捷键ctrl+n+a

 

选择模版

这里选择mui项目，会自动引入mui的js和css，如下：



文件结构

默认有以下几个文件夹：css，fonts，js，如下：

 

简单开发

header

打开index.html后在body内输入mh后回车，如下：



 

body

同样输入mbo后回车

 

list

在mbody中添加一些列表

最后的代码

<!DOCTYPE html>  

<html>  

<head>  

    <meta charset="utf-8">  

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  

    <title></title>  

    <script src="js/mui.min.js"></script>  

    <link href="css/mui.min.css" rel="stylesheet"/>  

    <script type="text/javascript" charset="utf-8">  

        mui.init();  

    </script>  

</head>  

<body>  

    <header class="mui-bar mui-bar-nav">  

        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  

        <h1 class="mui-title">我的标题</h1>  

    </header>  

    <div class="mui-content">  

        <ul class="mui-table-view" id="my_task_list">  

            <li class="mui-table-view-cell">  

                <div class="mui-slider-right mui-disabled">  

                    <a class="mui-btn mui-btn-red">删除</a>  

                </div>  

                <div class="mui-slider-handle">  

                    待办事项1  

                </div>  

            </li>  

            <li class="mui-table-view-cell">  

                <div class="mui-slider-right mui-disabled">  

                    <a class="mui-btn mui-btn-red">删除</a>  

                </div>  

                <div class="mui-slider-handle">  

                    待办事项2  

                </div>  

            </li>  

        </ul>  

    </div>  

</body>  

</html>  

 

调试（android为例）

连接手机

首先需要连接手机

 

运行

选择运行——手机运行——在xx设备上运行

或者使用快捷键ctrl+r

 

效果

现在你就可以在手机上看效果了

 

注意

需要开启开发者模式

 

打包

dcloud证书打包

选择发行——App打包——选择android以及dcloud公用证书，如下：



 

参数配置

可能有时候会提示参数配置错误，这是你需要打开项目下manifest.json文件，并去掉第三方插件，如下：

 

 

等待

返回上一步的发行打包，点击打包后会提示你已经到云端打包，你只需要等待了，

 

一小会之后就打包好了，这时你就可以把apk拷贝到自己手机使用了，



mui中几种open页面的区别

使用hbuilder+mui做app一段时间，期间遇到问题不少，自己摸索，做了个app，详见：http://uikoo9.com/dishi/download

 

如果您水平比这个高，那就不用看了，直接跳过。

 

【水平】

 

由于用hbuilder+mui出于兴趣，也就没有去看源码，停留在使用总结层次，所以有说的不对的地方还请见谅。

 

【几种打开页面的方式】

 

1.初始化时创建子页面

 

2.直接打开新页面

 

3.预加载页面

 

【示例】

 

1.初始化时创建子页面

 

mui.init({  

    subpages: [{  

        url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址  

        id: your - subpage - id, //子页面标志  

        styles: {  

            top: subpage - top - position, //子页面顶部位置  

            bottom: subpage - bottom - position, //子页面底部位置  

            width: subpage - width, //子页面宽度，默认为100%  

            height: subpage - height, //子页面高度，默认为100%  

            ......  

        },  

        extras: {} //额外扩展参数  

    }]  

});  

 

2.直接打开新页面

 

mui.openWindow({  

    url: new - page - url,  

    id: new - page - id,  

    styles: {  

        top: newpage - top - position, //新页面顶部位置  

        bottom: newage - bottom - position, //新页面底部位置  

        width: newpage - width, //新页面宽度，默认为100%  

        height: newpage - height, //新页面高度，默认为100%  

        ......  

    },  

    extras: {  

        ..... //自定义扩展参数，可以用来处理页面间传值  

    }  

    show: {  

        autoShow: true, //页面loaded事件发生后自动显示，默认为true  

        aniShow: animationType, //页面显示动画，默认为”slide-in-right“；  

        duration: animationTime //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；  

    },  

    waiting: {  

        autoShow: true, //自动显示等待框，默认为true  

        title: '正在加载...', //等待对话框上显示的提示内容  

        options: {  

            width: waiting - dialog - widht, //等待框背景区域宽度，默认根据内容自动计算合适宽度  

            height: waiting - dialog - height, //等待框背景区域高度，默认根据内容自动计算合适高度  

            ......  

        }  

    }  

})  

 

3.预加载页面

 

// 方式1  

mui.init({  

    preloadPages: [{  

        url: prelaod - page - url,  

        id: preload - page - id,  

        styles: {}, //窗口参数  

        extras: {}, //自定义扩展参数  

        subpages: [{}, {}] //预加载页面的子页面  

    }]  

});  

  

// 方式2  

var page = mui.preload({  

    url: new - page - url,  

    id: new - page - id, //默认使用当前页面的url作为id  

    styles: {}, //窗口参数  

    extras: {} //自定义扩展参数  

});  

 

 

 

【一些区别】

 

1.子页面和非子页面

 

以上三种方式中，2，3打开的页面非子页面，

 

区别是子页面相当于html中的iframe，而非子页面相当于新开了一个浏览器窗口加载了一个html

 

2.子页面适用于侧滑菜单

 

子页面有其特点，特别适用与index.html+list.html这种情况，

 

如果用index.html(主页面)+list.html(子页面)实现的话，当主页面右滑时子页面会自动跟随，

 

而用index.html(主页面)+list.html(新页面)实现的话，主页面右滑，新页面不右滑，还得单独处理新页面。

 

 

3.子页面使用频繁切换的情况

 

如果频繁左滑右滑，在配置较低的手机上会出现list.html遮住index.html的情况，采用子页面模式就不会，采用新页面模式几率很大。

 

4.子页面适用与下拉刷新和上拉加载

 

之前做向下拉刷新的时候，采用的是新页面的形式，按照官网教程，怎么搞都不成功，后来看了下源码，发现下拉刷新必须采用子页面的形式，也就是你的list.html必须是index.html的子页面，才可以下拉刷新。

 

5.新页面适用于新页面

 

open一个新页面，适用于查看详情之类的，需要打开一个新页面的情况，并且mui自己封装了新页面的back方法，你就不需要去操心了。

 

6.预加载页面的两种方式

 

第一种是在初始化的时候预加载，这种情况适合在你这个页面在很久之后才会用，如果你要立即到的页面并使用，那么你会得到null。第二种方式类似与open，个人感觉没有什么太大的区别，唯一的区别是open就直接打开了，preload只是加载，你可以之后选择打开的时机。

 

7.总结

 

需要下拉刷新上拉加载请使用子页面，需要打开一个新页面请使用新页面方式，需要加载一个页面但是暂时不使用请使用预加载方式。

 

什么是混合移动app开发
React Native官方文档
window下配置环境
windows下配置环境变量2

个人github：https://github.com/qiilee  欢迎follow

移动app开发流程，app开发步骤

app是手机软件的简称。手机主流的有ios、andriod，windows平台。市场上程序做得比较多的也是前两款的平台。

随着移动互联网的普及，移动终端功能的日益完善，很多企业看重移动互联网的重要，开始在这个领域完善自己的品牌，开展营销活动。

一款好的app需要哪些步骤？

移动应用开发步骤1. 规划应用UI 

移动应用开发步骤2. 设计数据操作与存储

移动应用开发步骤3. 跳转多页面实现

移动应用开发步骤4. 实现Service

移动应用开发步骤5. 完善特性与细节

移动应用开发步骤6. 移动应用程序测试

移动应用开发步骤7. 打包，签名，发布

 

细节：

APP开发流程

 

项目开发流程细分为5大阶段：

理解需求：

专业的产品经理（PM）将与客户进行细致的需求分析梳理工作，形成需求功能表。

方案策划：

产品经理协同方案策划师，基于需求功能表，结合国内外优秀APP设计思路，形成策划方案与APP设计逻辑图。

UI设计：

产品经理协同UI设计师，基于APP设计逻辑图，形成产品UI原型，经确认后交由美术设计师，形成最终APP界面设计方案。

功能开发：

产品经理协同主工程师，基于APP界面设计方案，形成程序架构设计方案，并有工程师团队进行开发，完成产品设计。

全面测试：

产品经理协同测试工程师，基于需求功能表、UI设计与程序架构设计，进行全面终测，形成测试报告，测试通过后交付客户。

 

App制作流程、步骤

制作一个完整的app流程、步骤如下：

前提就是：在基本idea形成之后，其他准备条件都完善的情况下正式进入制作阶段。

1、首先要确立产品原型，进入项目评估阶段。经过反复确认，最终形成产品脑图和完整的需求文档。

2、正式进入产品的原型设计阶段。UI、UE开始设计，形成初步的效果图。在经过确认后界面的效果图正式设计完成。

3、产品在设计图完成后，进入研发阶段。通过编程语言形成正式的程序。至此，app的制作过程就完成了一大部分，可以进入测试部进行测试。

4、在产品经过多次测试，修改bug确认无误后。一个app制作项目就完成，可以进入个大市场，投放使用。

5、也是比较关键的一步。在各大市场中，开发者就要通过各种方式推广自己的app产品，力求app在市场上获得更多的下载量，吸引更多的用户。

APP制作流程图：

移动互联网的高速发展带动了APP制作行业的大力扩展。智能生活时代，手机APP也在迅速的加入我们的生活。工作、生活家居都在迅猛的进入智能化。传统行业也都纷纷打响智能化开发战。移动互联网目前已经进入了普及期，制作APP已经成为企业发展之势。

更经典APP开发案例、价格工期、流程费用可登陆东方爱智官网了解咨询。

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询

开发app项目的步骤

 

据北京APP开发公司东方爱智总结得出：一个完整的app开发过程要经过合同的签订→项目启动→建立产品原型→经过客户确认→形成效果图→客户再次确认→开始进入研发阶段→研发成功后进入测试阶段→测试过后将问题反馈给研发人员进行调整-→确认没有bug后客户验收→验收合格开始正式上线。这就是一个完整的app开发过程

App的开发是一个不断和客户沟通和推敲的过程。首先，如果要做一款app，必须要前期进行沟通，初步表明此款app要实现的效果，属于哪个类型的app。在功能和实现价值基本敲定的情况下，开始进入项目评估阶段。这个时候产品经理会根据之前商定的功能进行价格和工期的评估，确立一个初步的项目排期。在系列的前期工作得到客户认可的情况下，签订合同正式开始项目。项目开始各个部门就开始项目的碰头会议，设计部门开始设计UI和UE，针对产品开展创意设计，形成初步的效果图，经过首次客户的确认。在根据交流的具体结果进行二次修改，最终与客户确认高保真视觉图，开始进入研发阶段。

经过工程师的一段时间研发，产品基本成型，正式开始测试。测试合格，确认没有bug后与客户进行沟通，开始验收。客户验收合格满意后，开发者会将app正式传到各大app市场，正式上线。上线通过后，东方爱智给出的意见就是，客户要针对自己的产品进行推广计划。增加app的知名度，开始app的运营。这样一个完整的app就可以使用了。在针对客户的需求和市场行业的发展，还可以进行数据更新，和功能升级。同时还可以进行app二次开发。