精华内容
下载资源
问答
  • 移动App开发

    2020-03-14 02:45:13
    移动 App 开发 Native App-原生开发 开发技术 原生的 Android 平台 原生的 iOS 平台 JavaScript bridge 用于原生应用中的 Web 和原生平台进行交互。 https://github.com/lzyzsd/JsBridge 博学谷 - 在职加薪课 ...

    移动 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

    真机调试运行

    模拟器运行HBuilderX中的html文件

    第一步:下载夜神模拟器

    第二步:安装后,打开夜神模拟器,找到应用 - 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

    打包

    • 离线打包
    • 云打包

    发布

    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,
    /**

    第八步:把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开发需求文档

    千次阅读 2019-09-21 14:45:25
    我们在开发app前都会做需求分析,这个app开发需求文档怎么写呢?一般可以从这几点入手:确定APP方案的目标,APP方案的受众分析,APP开发方案功能设计,APP的操作系统说明方案,APP是是否是原生APP,APP方案的视觉...

    我们在开发app前都会做需求分析,这个app开发需求文档怎么写呢?一般可以从这几点入手:确定APP方案的目标,APP方案的受众分析,APP开发方案功能设计,APP的操作系统说明方案,APP是是否是原生APP,APP方案的视觉设计,APP开发方案中的其他细节。以下是一个app开发需求文档模板,里面写清了app开发需求说明,可以参考

    1、引言
    1.1目的:
    · 阐明开发本app的目的; 
    1.2 项目背景
    · 标识待开发app产品的名称、代码; 
    · 列出本项目的任务提出者、项目负责人、系统分析员、系统设计员、程序设计员、程序 员、资料员以及与本项目开展工作直接有关的人员和用户; 
    · 说明该app产品与其他有关app产品的相互关系。
    1.3 术语说明
    列出本文档中所用到的专门术语的定义和英文缩写词的原文。
    1.4 参考资料(可有可无) 
    列举编写app需求规格说明时所参考的资料,包括项目经核准的计划任务书、合 同、引用的标准和规范、项目开发计划、需求规格说明、使用实例文档,以及相关产品 的app需求规格说明。
    在这里应该给出详细的信息,包括标题、作者、版本号、发表日期、出版单位或资 料来源。

    2.项目概述
    2.1 待开发app的一般描述
    描述待开发app的背景,所应达到的目标,以及市场前景等。
    2.2 用户特征和水平(是哪类人使用) 
    描述最终用户应具有的受教育水平、工作经验及技术专长。
    2.3 运行环境
    描述app的运行环境,包括硬件平台、硬件要求、操作系统和版本,以及其他的软 件或与其共存的应用程序等。
    2.4 条件与限制
    给出影响开发人员在设计app时的约束条款,例如: 
    · 必须使用或避免使用的特定技术、工具、编程语言和数据库; 
    · 硬件限制; 
    · 所要求的开发规范或标准。

    3.功能需求
    3.1 功能划分
    列举出所开发的app能实现的全部功能,可采用文字、图表或数学公式等多种方法 进行描述。
    3.2 功能描述
    对各个功能进行详细的描述。

    4.外部接口需求
    4.1 用户界面
    对用户希望该app所具有的界面特征进行描述。以下是可能要包括的一些特征: 
    · 将要采用的图形用户界面标准或产品系列的风格; 
    · 屏幕布局; 
    · 菜单布局; 
    · 输入输出格式; 
    · 错误信息显示格式; 
    4.2 硬件接口
    描述系统中app产品和硬件设备每一接口的特征,以及硬件接口支持的设备、app与 硬件接口之间,以及硬件接口与支持设备之间的约定,包括交流的数据和控制信息的性质以 及所使用的通信协议。
    4.3 app接口
    描述该app产品与其有关app的接口关系,并指出这些外部app或组件的名字和版本 号。比如运行在什么操作系统上,访问何种类型的数据库,使用什么数据库连接组件,和什么商业app共享数据等。 
    4.4 通信接口
    描述和本app产品相关的各种通信需求,包括电子邮件、Web 浏览器、网络通信协 议等。
    4.5 故障处理
    对可能的app、硬件故障以及对各项性能而言所产生的后果进行处理。

    5.性能需求
    5.1 数据精确度 输出结果的精度。
    5.2 时间特性
    时间特性可包括如下几方面
    ·响应时间; 
    ·更新处理时间; 
    ·数据转换与传输时间; 
    ·运行时间等。
    5.3 适应性
    在操作方式、运行环境、与其他app的接口以及开发计划等发生变化时,app的适应 能力。

    6.其他需求
    列出在本文的其他部分未出现的需求。如果不需要增加其他需求,可省略这一部分。

    展开全文
  • 移动 App 开发 Native App-原生开发 开发技术 原生的 Android 平台 原生的 iOS 平台 JavaScript bridge 用于原生应用中的 Web 和原生平台进行交互。 https://github.com/lzyzsd/JsBridge 博学谷 - 在职加薪课 ...

    移动 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)

    展开全文
  • APP开发文档

    万次阅读 2018-06-22 10:42:59
    APP 开发文档 APP名称:XX新闻一、主界面 1、登录页面 前端功能实现: 输入用户名密码,点击立即登录到首页界面(ERP帐户密码) 系统功能实现: (1)登陆用户根据角色不同所拥有的权限不同. 2、主界面 前端...

    APP 开发文档 

    APP名称:XX新闻

    一、主界面 

    1、登录页面 


     

    前端功能实现: 

    输入用户名密码,点击立即登录到首页界面(ERP帐户密码) 

     

    系统功能实现: 

    (1)登陆用户根据角色不同所拥有的权限不同. 

     

     

     

     

     

    2、主界面

     

    前端功能实现: 

    (1)显示用户头像、姓名、服务公司、服务门店的相关信息

     2)点击后,进入到预约单主界面 

    (3)点击后,进入到指派用户主界面 

    (4)点击后,进入到服务收款主界面 

    (5)点击三个按钮分别进入到订单查询,个人中心,主界面,并支持切换。

     

    系统功能实现: 

    (1)根据登录用户,直接显示用户姓名、服务公司、服务门店信息, 头像手机界面上传并保存,支持修改头像和联系方式.

    (2)根据未分配预约单信息,界面以数字形式显示未分配条 数,同时根据新增预约单和分配预约单加减显示数字,如果当时没有未分配 预约单则数字显示为空 

    (3)根据预约单为分配用户信息,界面以数字形式显示未分 配条数,同时根据新增预约单和指派用户状态变更加减显示数字,如果当时 预约单都已经分配用户则数字显示为空 

    (4)根据收款情况显示条数,如此服务订单收完全款,则显 示数字相应减少。

     

     

    二、预约单 

    1、预约单主界面 

     

    前端功能实现: 

    1支持模糊查询预约单信息,并能够手工添加预约单,同时点击返回按钮能够返回到主界面。 

    2上下滑动,显示预约单客户名称、预约时间信息。 

    3预约单详情,显示预约单号、客户名称、联系方式、地址、预约时间、服务项目、 备注信息。 

    4新增图片,点击签到保存图片,完成签到。 

    5如没有签订服务订单,则点击取消服务,取消此预约单,如果形成正式 意向,则 点击签订服务形成新的服务订单,如未签到,取消服务、签订服务为灰色, 签订服务后取消服务按钮为灰色,取消服务后,签订服务按钮消失。 

     

    系统功能实现: 

    1)根据后台存储预约单信息,显示客户姓名、预约时间 

    2)根据后台存储预约单详细信息,显示预约单号、客户名称、联系方式、地址、预 约时间、服务项目、备注信息。 

    3)照片上传存储后台显示,并根据后台系统时间记录用户签到时间,同时更新预约 单状态为用户已签到状态。

     

    2、新增预约单主界面-------------------预约详情

      

     

    前端功能实现:

     (1) 点击返回到预约单主界面 

    (2) 预约单号系统自动显示,由用户填写客户姓名、联系方式、上门地址、服务项目、上 门时间。

    (3)

    由系统显示此用户下有多少未上门且时间重叠的预约单,并且可查询此预约单详情,。 

    (4)点击提交按钮,提示此预约单上门时间有重叠是否提交,如时间不重叠,直接提 交成功。

     

     

    系统功能实现: 

    1、后台自动保存客户姓名、联系方式、上门地址、服务项目信息、备注信息。 

    2、后台把此用户已经分配未上门的预约单显示出来。 

    3、当用户点击提交按钮时,如此预约单的上门时间和用户之前已经分配的上门时间重

    叠,后台要自动判断,并提示。校验原则(时间为前后半个小时)

     

    3、取消服务 

     

    前端功能实现: 

    1)点击预约单主界面按钮弹出,填写取消服务原因,点击按钮,此预约单被取消, 中止改预约单。  

    系统功能实现: 

    (1)记录此预约单号取消服务原因。 

    (2)同时更新此预约单状态为取消服务状态。

     

    4、签订服务主界面

      

     

    前台功能实现 

    (1)手机本地调用或者直接拍摄清晰图片上传合同 

     

    系统功能实现: 

    (2)保存和上传图片

     

     

    三、指派PSR界面 

    1、指派PSR主界面 

     

    前端功能实现: 

    1)支持模糊查询预约单信息,并能够手工添加预约单,

    同时点击返回按钮能够返回到主界面。 

    2)上下滑动,显示预约单客户名称、预约时间信息。 

    3)预约单详情,显示预约单号、客户名称、联系方式、地址、

    预约时间、服务项目。

    4)录入上门日期后,选择指派用户,点击确定后,指派用户

    成功,并跳转到更换用户主界面。 系统功能实现: 

    1)根据后台存储预约单信息,显示客户姓名、预约时间 

    2)根据后台存储预约单详细信息,显示预约单号、客户名称、

    联系方式、地址、预约时间、服务项目。 

    3

    后台保存,此预约单上门日期和指派psr信息及指派人 

    4)记录更换理由 

    (5)更新此预约单状态为已指派PSR

     

     

     

    2、更换用户主界面 

     

    前台功能实现: 1)初始界面

    按钮为灰色不可以点击 

    2)单击用户信息,更换按钮变更可点击,点击更换后,跳转到指派用户界面,重新指派用户,同时填写更换理由。 系统功能实现: 

    1)更换新的用户以后,后台重新存储新的用户信息,前端显示。 2)保留被替换掉用户信息,用以评级,信息统计等作用。 3)保存更换理由

     

    四、服务收款界面 

    1、服务收款主界面 

     

    前端功能实现: 

    1

    支持模糊查询服务订单信息,点击返回回到主界面。 

    2)上下滑动,显示服务订单信息。 

    3)显示服务订单号、客户名称、电话、地址、预约时间、服

    务项目,开工时间、施工周期。

    4)显示服务订单总金额、已付金额、未付金额、支持填写本

    次付款金额,支持在付全款圆框

    (最后一次收款)内打钩,点击确认

    收款,完成本次或者本服务订单全部收款。 

     

    系统功能实现: 

    1)根据后台存储服务订单信息,显示客户姓名、预约时间。 

    2)根据后台存储服务订单详细信息,显示服务订单号、客户

    姓名、联系方式、地址、预约时间、服务项目、开工时间、施工周期。 

    3)根据后台存储显示订单总金额、已付金额、未付金额,同

    时录入本次付款金额存储到后台,更新未付金额数值。 

    4)如本次付款勾选已经收全款圆框,服务订单状态变更为已付款。 

    5)如果本次付款金额小于未付金额,同时勾选已经收全款方框,那么未付金额数值直接刷新为0. 

    6)记录本次收款金额和是否标注最后一次。

     

     

     

    五、订单查询界面 

    1、订单查询主界面------订单详情主界面 

     

    前端功能实现1)支持模糊搜索 

    2)显示服务订单客户,签订时间、服务订单状态。 3)三个导航键支持互相切换。 

    4)点击返回按钮返回到订单详情主界面。 

    5)显示此订单选择房间、商品、面积、单价。 

    6)显示成交金额、已付金额、未付金额。

    7)显示开工时间、完工时间。 8)显示合同上传图片信息。 

    9)点击服务终止可以终止此服务订单。 

     

    系统功能实现 

    1)根据后台存储的客户信息及订单签订时间、同

    时调取此订单服务状态。 

    2)显示后台存储,房间、商品、单价、面积信息 

    3)显示后台存储成交金额、已付金额、未付金

    额信息。 4)显示后台存储开工时间、完工时间信息。 

             

     

    3、服务终止主界面 

     

    前端功能实现: 1)支持模糊查询商品信息 

    (2)显示商品详情 

    3)显示未付金额 

    4)显示开工时间、完工时间、及上传合同照片 

    5)填写服务退款或客户违约金额,填写终止原因 

    6)点击终止服务,终止此服务订单。

     

     

    系统功能实现: 

    1)显示后台存储房间、商品、单价、面积信息 2) 

    显示后台存储未付金额 

    3)显示后台存储开工时间、完工时间、上传合

    同图片。 

    4)后台存储录入,服务退款或者客户违约金的数

    值。 5

    点击终止服务后台更新服务订单状态为服务中止 

     

     

    六、个人中心界面 

    1、个人中心主界面 

     

    前端功能实现: 

    1、点击头像图片可上传图片,支持本地上传、手机拍照上传,点击保存。 2、支持添加修改联系方式。 3、点击返回键回到主界面。 4、点击退出登录回到登录页面。 系统功能实现: 

    1)保存用户上传头像信息,保存用户联系方式。 

     

     

    后台管理主界面

     

     、登陆界面 

     

    系统功能实现: 

    使用ERP帐号登陆、密码登陆,只有管理员可以登陆,其他用户不可以登陆项目管理系统后台。 

     

     

    二、用户管理主界面 

     

    系统功能实现: 

    1)导入商城预约单信息、导入ERP服务订单信息到系统后台,到处系统后台服务订单信息到ERP 

    2)支持添加修改前台登陆用户的名称、电话、服务公司、服务门店 

    3)支持分配用户权限 

    、后台管理界面 

    导入预约单需求字段

    预约单字段

    预约单号 

    客户姓名 

    联系方式 

    住址 

    上门日期 

    服务项目  

    备注  

    1、服务订单字段导入

    服务订单号  客户姓名 联系方式  住址 上门日期  开工日期   完工日期服务项目 备注 房间 商品名称  规格 型号 面积   单价   订单总金额  定金  已付金额 未付金额 本次付款金额 服务退款  客户违约金       

    2、服务订单上传

    服务订单号  客户姓名 联系方式  住址 上门日期  开工日期   完工日期服务项目 备注 房间 商品名称  规格 型号 面积   单价   订单总金额  定金  已付金额 未付金额 本次付款金额 服务退款  客户违约金


    一、各界面链接情况

     

    展开全文
  • 1. 了解应用市场概况  开发者对市场状况的了解与APP的成功紧密相连,目前,App Store和Google Play可以说是移动应用最为丰富的应用生态,像苹果的下载统计表单会记录热门应用的下载信息,若...产品方向是APP开发
  • Android项目实战:账本APP开发

    千次阅读 多人点赞 2020-04-02 10:17:49
    账本APP服务器端开发 开发
  • android app开发计划

    千次阅读 2016-03-01 13:39:00
    APP开发流程,框架等等 1. 开发过程全部使用android6.0(API 23)进行编译,最小版本支持android 4.0 (API 14),使用 Material Design Theme。 2. 项目包括以下模块(复制别人的,但是基本上好像就...
  • 移动APP开发框架盘点

    2020-07-14 20:21:13
    移动APP开发框架盘点 总体概述 现在比较流行的移动APP开发框架有以下六种:网页、混合、渐进、原生、桥接、自绘。前三种体验与Web的体验相似,后三种与原生APP的体验相似。这六种框架形式,都有自己适用的范围。...
  • 我们在开发app前都会做需求分析,这个app开发需求文档怎么写呢?一般可以从这几点入手:确定APP方案的目标,APP方案的受众分析,APP开发方案功能设计,APP的操作系统说明方案,APP是是否是原生APP,APP方案的视觉...
  • APP开发的八大细节

    2014-04-15 15:21:07
    ·了解应用市场概况 开发者对市场状况的了解紧密相连着APP的成功,目前,App Store和Google Play可以说是移动应用最为丰富的应用生态,像苹果的下载统计表单会记录热门应用的... 产品方向是APP开发的启明灯,没有
  • 浅谈App原生开发、混合开发及HTML5开发的优劣

    万次阅读 多人点赞 2017-10-07 19:41:23
    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率、节省成本...原生应用开发,是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如android是利用j
  • 这篇看一下怎么搞一个复杂一点的自定义组件:日期天气组件。 效果图: 上一篇的电池组件是通过重写View的onDraw来实现,这种方法对比较简单的组件来说是实用的。而如果对于日期天气组件来说,就没必要了。 可以通过...
  • uni-app组件开发----多粒度时间选择器组件

    万次阅读 热门讨论 2019-03-20 16:25:30
    ###WXRUI体验二维码 如果本插件对你的开发有帮助,请进入...可进行多时间粒度选择的时间选择器,组件名:rattenking-dtpicker,代码块: ruiDatePicker。 使用方式: 在 script 中引用组件 import ruiDatePicker f...
  • App开发到App Store上架,发布流程。

    千次阅读 2015-07-04 15:11:31
    1.IOS开发从新手到App Store上架。http://www.cocoachina.com/special/fornew.html2.苹果APP STORE产品上架以及审批流程iPhone app发布到appstore的步骤iPhone app发布到appstore的步骤如下: 要在苹果网站上注册...
  • H5 App开发工具 WeX5

    千次阅读 2016-05-04 11:49:25
    WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能“一秒打开”!对跨平台多前端应用开发的支持极好,一次开发,多平台运行。 WeX5采用混合应用(hybrid app)开发模式, UI体系完全基于w3c的...
  • 问题是当时js里时间是这种格式的 2016-09-07 16:37:50 用var time = obj.replace(/\-/g, "/");将格式改成 2016/09/07 16:37:50 就可以了
  • Windows App开发之更多技巧

    千次阅读 2015-07-27 07:34:48
    "选择日期" DatePicked = "datePickerFlyout_DatePicked" Closed = "datePickerFlyout_Closed" /> Button.Flyout > Button > < DatePicker Header = "Date" Margin = "4" /> < Text...
  • 随着App开发需求,很多软件有用户发布信息的需求,该功能也许是针对用户自己的需求而发布的、也许是他人。反正就是针对事件将在未来的某个时间发生而做的预先处理。比如:参加组织某个活动,举办某个活动的等等。...
  • 这个app的技术核心是唐东明老师的移动终端设计(java)的一学期的跟进的儿童画板app设计作业,再加上调用了李晨玮前辈的贴纸的包。仔细看前辈的源码收获很多。 文章本身是期末设计报告的增强...
  • 保险行业APP开发需要哪些功能?互联网+”的热潮下,APP日益成为产品与用户之间形成消费关系的重要渠道,也是连接线上线下的天然枢纽,传统保险业也在积极拥抱互联网,发力APP平台,抢占市场。各大保险公司也陆续推出...
  • app开发定制方案怎么做?(二) App开发的定制方案的功能设计 App的设计和开发都离不开对app功能的分析,特别是定制类的app软件的方案中要多app功能进行详细的说明。每款定制类或者非定制类的app开发完成以后,我们...
  • 如何组建优秀的APP开发团队

    千次阅读 2016-06-02 15:24:05
    如今,最好的创业机会是什么?毋庸置疑,互联网/移动互联网...王思聪:如果我是一个普通人,我猜我会选择互联网/移动互联网方向去创业,比如弄个网站或者做个APP。因为这种门槛比较低、做大的可能性也比较高。比如...
  • Android APP开发需求文档范本

    万次阅读 2017-04-21 10:55:19
    Android APP开发需求文档范本 软件需求文档格式的标准写法 1.引言 1.1 编写目的 • 阐明开发本软件的目的; 1.2 项目背景 • 标识待开发软件产品的名称、代码; • 列出本项目的任务提出者、...
  • 第一次做APP接口开发过程总结

    万次阅读 热门讨论 2018-04-26 17:47:41
    关于平湖人社APP后台开发总结 ...接口开发文档大致编写并提交产品与APP开发人员 1.主要是webservise 地址:http://XXXX/services/SbcxWebservice?wsdl 2.接口函数统一为 sbp_sbcx_XXXX 3.传入参数: 传入参数全为Stirn...
  • 寒假答应给女友做一个记录月经周期的app,由于我太vegetable,写的比较辣鸡,大家凑活着看(手动笑哭) 思路: 首先要跟大家说的是, android开发 要明白开发思想:逻辑...开发app有四种方式: 1.通过XML文件开发; ...
  • 很多想做APP开发的客户,首先就是问价格,但是真正懂技术的就很难直接去回答。 由于App的性质不同,导致了功能设置不同,那么开发的难易程度不同也决定了开发成本的高低和时间的长短。因此首先创业者要先了解“我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,286
精华内容 22,514
关键字:

时间日历app开发