您现在的位置是：首页 > 博文答疑 > 移动开发尝试博文答疑

移动开发尝试

Leo2016-12-10【1】

简介对于一个主机十年的人，手机移动开发真是一个新世界

对于一个主机十年的人，手机移动开发真是一个新世界。



这两天有幸参加了公司的hybird培训。处于好奇，来听听。虽说本人一直从事大型机（大后端）的开发维护，但对于前端的技术，个人还是感觉有一定基础。但这两天的体验，感觉毁我三观。下面分享以下相关知识点。(趁脑袋还能记住）

Hybird:(混合模式移动应用），感觉就是如何在复杂，多样性的环境下，能高效的开发移动app.
通过基于html5和javascript的各种框架，工具，来满足用户和开发的需求。


开发需要的工具



1. 基础工具

node 6.9.1版本：  

(nodejs运行在服务端的 JavaScriptScript, Chrome JavaScript 运行时建立的一个平台. 详细信息可以参考：http://www.runoob.com/nodejs/nodejs-tutorial.html）

Windows:

https://nodejs.org/dist/v6.9.1/node-v6.9.1-x64.msi

MacOS:

https://nodejs.org/dist/v6.9.1/node-v6.9.1.pkg


2. Java 1.8       

 (这个不多说，要用的）

到Oracle官网安装：

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html



3. IDE            

   (andriod app集成开发工具。本人是window+android)

A. Windows系统按照Android studio

https://dl.google.com/dl/android/studio/install/2.2.2.0/android-studio-bundle-145.3360264-windows.exe


B. Mac OS安装XCode

(1): 到bugly镜像站点下载<http://android-mirror.bugly.qq.com:8080/Xcode/>

(2): 到AppStore安装Xcode


4. Sublime Text 3 编辑神器    (看起来比UE感觉高大上，有很轻便）

http://www.sublimetext.com/3


5. NPM包安装：    

   (npm 是node.js提供的命令，可以用来下载，需要的包）

windows打开powershell或者cmd；

mac打开terminal执行;


//设置淘宝镜像，nrm方便镜像切换

npm set registry https://registry.npm.taobao.org/

npm install -g nrm;

nrm use taobao;


//安装cordova  

  (cordova 是一组设备相关的api)

npm install -g cordova;


//安装web pack  

 (webpack 近期最火的一款模块加载器兼打包工具)

npm install -g webpack

npm install -g webpack-dev-server


//安装vue和babel 

  (vue 和 babel : 构建数据驱动的 web 界面的渐进式框架,MVVM) 

npm install -g vue-cli

npm install -g babel-cli


//安装react-native   

（和vue, babel 一样，一种web界面的框架，但各自有各自优缺点）

npm install react-native; //备用


6. package.json需要的包安装

直接在当前目录(和package.json)同以目录下，执行npm install即可。如果一次失败，多执行几次，可能是网络原因导致的


开发流程和概念：

手机app开发主要是 html+javascript+css做前端UI显示，通过javascript，调用cordova提供的接口来访问手机的相关功能


目前有很多前端框架用来帮助UI显示。不同框架，优缺点不同。根据具体情况，酌情使用。

目前比较流行的是React/Vue这样基于MVVM(Model-View—ViewModel)框架。利用双向绑定技术，使得Model变化是，ViewModel会自动更新，而ViewModel变化是，View也会自动变化l。

这个感觉比较有意思，比较以前只是通过js update现有html/dom 标签的方式，MVVM能更方便的和页面交互。

blob.png


Vue:是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

blob.png


ES6:新一代的javascript也被称为ECMAScript 6(也称为 ES6 or Harmony). ES6加了一些新的语法和特性。

    感觉js 越来越像一门编程语言，而不是script.


Cordova:

提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。

Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。



实例学习：

  • HelloWorld for Cordova

    先用Cordova做一个HelloWorld app。

    1.请保证前面要求安装的都正确执行

    2.通过cordova create 创建应用

  • cd E:\6.2 Mobile Dev\mytesting
cordova create hello com.example.hello HelloWorld

    运行结果，会生成以下文件：

blob.png

3.添加平台platform

cd Hello
cordova platform add android

    运行结果，会生成以下文件：E:\6.2 Mobile Dev\mytesting\hello\platforms\android\assets\www

    assets\www文件 是app相关source.被添加到andriod平台下了。

blob.png

4.用andriod-studio打开此项目 path: E:\6.2 Mobile Dev\mytesting\hello\platforms\android

  经过一会的加载，文件被成功导入studio,点击"sync Project with Gradle files",同步构件文件。

20:35:50 Platform and Plugin Updates: The following components are ready to update: Android Support Repository, Google Repository, Intel x86 Emulator Accelerator (HAXM installer), Android SDK Platform-Tools 25.0.1, Google APIs Intel x86 Atom System Image, Android SDK Tools 25.2.3
20:36:10 Gradle sync started
20:38:22 Gradle sync completed
20:38:23 Executing tasks: [:CordovaLib:generateDebugSources, :CordovaLib:mockableAndroidJar, :CordovaLib:prepareDebugUnitTestDependencies, :CordovaLib:generateDebugAndroidTestSources, :generateDebugSources, :generateDebugAndroidTestSources, :mockableAndroidJar, :prepareDebugUnitTestDependencies]
20:38:46 Gradle build finished in 17s 839ms
20:42:33 Gradle sync started
20:42:37 Gradle sync completed
20:42:38 Executing tasks: [:CordovaLib:generateDebugSources, :CordovaLib:generateDebugAndroidTestSources, :CordovaLib:mockableAndroidJar, :CordovaLib:prepareDebugUnitTestDependencies, :generateDebugSources, :generateDebugAndroidTestSources, :mockableAndroidJar, :prepareDebugUnitTestDependencies]
20:42:41 Gradle build finished in 3s 780ms


5.将android手机通过数据线连接电脑（确保手机驱动按好，手机开发模式打开）

  可以在Monitor中看到手机以连接，而且能监控到。

blob.png

6.点击 "Run" 按钮，选择设备。等待一会，手机HellowWorld app会安装好。显示如下：

blob.png

blob.png

7.至此HellowWorld app，通过Cordova,Android Studio建好了。


  • 进阶练习：

上面是如何用cordova搭建一个sample app.Cordova的作用远不如此，他提供的api可以调用设备的功能。

网上有很多小例子，可以参考。 比如：http://www.phonegapcn.com/capture

课上我们也就练习了一些小方法。

这里就不介绍了。：）


  • 进阶练习2：

有了Cordova帮助，我们就能调用手机Native的功能。但页面的显示，还是要靠前端框架。

对，就是ES6/Vue等 (说白了，还是js!!!..)


下面是一个demo app的总体生成过程：

  

1. 下面是一个用ES6/Uve开发的一个app (具体怎么写的，不清楚，还有待学习。。。）

    blob.png

下面两个commad 用来新建vue project.
   1. use the vue to develop the webpage.
       1.npm install -g vue-cli
          install the vue tool
       2.vue init webpack my-project
         create the project.

    2.编译Vue project to javascript 

npm run dev

    3.打包项目到cordova

package it into cordova

   4.将包dist folder下的文件，copy到 cordova project的 www folder下

    5.和之前一样，通过cordova preprea command 同步到andriod platform or ios.

    6.In Andriod studio, sync and run it

    7.最终，一个看这比较高大上的app就可以运行了。：）

blob.png

总结-------：

   这两天虽然听的不太懂，但总体概念是理解了。细节的语法和技术，估计以后也用不上。也就不深究了。

   写此篇，以表前端技术发展之迅速，作为长年与cobol,jcl, zos 打交道的人，深感知识过于陈旧。

   但说白了万变不理其中。基础的概念，思想是相通的。这玩意也不难。。呵呵


  本文是对学习的总结，属于门外汉，如果哪里写的不对，还请高手多多指教。

  


文章分类