很难吗？教你三天精仿一个跨平台的微信

最新推荐文章于 2024-08-10 16:52:53 发布

weixin_34275734

最新推荐文章于 2024-08-10 16:52:53 发布

阅读量109

点赞数

文章标签： ui 移动开发 javascript ViewUI

原文链接：https://my.oschina.net/qinerg/blog/652455

版权

为什么80%的码农都做不了架构师？>>>

一、引子

现在移动开发太火了，我想学！但是三天？可能吗？
开发app真的很难！尤其是在移动端想做“全栈”攻城师难上加难！需要学习很多的技术领域。Java、ObjectC、Swift、多线程、HttpClient、TCP、数据库……
还要跨平台！就算要用Html5，也需要学习Css3、响应式布局。要避免各种坑……

其实也不难。只要我们找到合适的跨平台开发框架，找到合适的界面库，并采用单一的技术栈，学习一些技巧，还是可以有机会用三天时间入门的。并利用框架的成熟性，跳过移动平台忌讳的卡、顿、慢，分辨率自适应、各OS兼容性等问题。

二、目标

写这篇教程的目的是带大家入门，所以我们拿现在移动端比较火的“微信”开刀。既然只有三天时间，那么我们也不可能做一款完整的APP把微信的所有功能都实现了。仔细研究你就会发现，微信的每个细节每个交互都是经过反复推敲的，它的确拥有国内优秀的产品团队和技术团队。这也是我们要精仿它的原因！
那么三天，我们的APP能实现什么功能呢？

多端实现，包含android、ios，顺手附带winmobile；
精仿四大主页面：消息列表、通讯录、发现和个人中心；
实现聊天功能；

三、第一天学习正式开始

1、熟悉开发框架

由于要实现跨平台，所以必须要选择一个能自适应各平台的开发工具及框架。出于多种考虑，本次未采用传统的html5方式开发，而是选择了只需JavaScript语言，就可以编译出纯原生、跨平台移动应用的DeviceOne。为什么使用它呢？它有什么好处？
没有关系，跟着我学下去，三天之后你就能领略到它的魅力！

1.1、现在我们先安装它的IDE（DevinceOne Stduio）。

工具安装是非常简单的。它的IDE是基于Eclipse构建的，所以我们需要先安装JDK，然后将下载IDE解压到任意目录即可完成安装。
下载地址：http://doc.deviceone.net/web/doc/env/ide.htm
注意：下载的版本要同JDK的位数匹配，否则启动时会报错。
如果安装时遇到其它问题，可以参考这里 http://doc.deviceone.net/web/doc/detail_course/ide_introduce.htm

1.2、新建项目

IDE启动后界面类似常规的Eclipse，点击File-New-DeviceOne Project，创建一个新的项目：

第一次创建项目的时候会提示登录，但项目创建完后是可以离线开发和调试的。

输入项目名称，选择开发语言JavaScript，选择模板及分辨率。框架会自动根据手机的真实分辨率进行缩放，所以我们这里选最常见的分辨率即可。

2、编写第一个程序

项目创建后，目录结构是这样的：

app.doproj 项目文件，主要声明项目分辨率
app.js 程序入口，加载主界面ui
index.ui 是实际的界面文件
index.ui.js 是实际的代码编写处，实现逻辑与界面的分离

现在我们双击 index.ui ，打开界面编辑器：

可以看到框架已经自带了很多的控件，而中间的UI设计区已经放置了一个 button。
现在我们双击 index.ui.js 看看代码怎么写的：

var nf = sm("do_Notification");  //引入Notification控件
var btn_hello = ui("btn_hello"); //界面控件的引用

btn_hello.on("touch",function(){  //按钮控件的点击事件
    nf.alert("Hello World !!!!!");   //弹出一个提示框
});

怎么样，很容易理解吧？
现在我们在真机上将它运行起来。

在IDE中启动服务：设计器中的Service右键点击Create按钮，如果弹出一个选择窗口，请选择刚创建好的demo项目。创建后，记录下显示的ip地址和port号。确保state是Running

下载调试机座。由于我们的程序还没有用到什么特殊的控件实现，所以先直接下载一个公共调试版本。

最新的调试机座在这里下载http://doc.deviceone.net/web/doc/env/debug_app.htm
在手机上安装调试机座并运行起来：

运行app，在服务地址处输入刚才我们记录下的地址和端口。请确保手机和电脑在同一网段。然后点击更新,把代码从电脑上同步到手机上。
现在我们点击“进入”，就可以看到我们在设计器上设计的效果，点击按钮，会弹出Hello DeviceOne

3、所有的都是控件

DeviceOne的所有程序都是围绕着控件进行开发的。一切都是控件！那么现在，我们要熟悉框架的核心控件及分类。
DeviceOne根据Android，IOS，Winphone的SDK抽象了一套统一的javascirpt库，把所有组件分三种类型(UI,MM,SM)：

UI(User Interface) : 页面上的控件,只要能放在页面展示出来的,能在设计器中可视化编辑属性的,就是UI. 如 Button 、 ImageView、 Label 等.
SM(Singleton Modle) : 单例的组件,主要实现对原生单例API的封装. 如 Global 、 App、 Page、 Storage 、 Device 等.
MM(Multiton Modle) : 多实例组件, 对原生的多实例API的封装. 如 SQLite 、 Http 、 Animation 等.

平台提供了3个对应的工厂方法以获取或构建UI/SM/MM的实例.

ui : 通过UI对象的id来获取对象，id一个ui对象的id属性值。目前不支持动态创建对象
sm : 通过SM组件的名称来获取对象
mm : 通过MM组件的名称，id以及作用域来创建或者获取对象

DeviceOne目前提供了8个核心组件，这些组件都会默认加载到应用中且不能删除。其它所有组件都是这些控件的子类。每一个扩展组件的API文档都在组件商店里能获取到。核心组件列表如下：
do_App，do_Page，do_Global，do_Storage，do_Animation，do_ALayout，do_LinearLayout，do_Webview

3.1.核心的SM组件:

do_App:整个应用通常只有一个do_App的对象，这个对象管理应用内多个Page对象之间的关联。通过openPage和closePage来管理页面。
do_Page:do_Page作为一个SM组件，是有其特殊性，它其实在整个应用中并不是一个单实例，只不过我们不允许跨Page访问其他Page，所以把它作为一个SM组件。
整个应用由多个do_Page对象组成，每个对象都是移动设备屏幕的一层，是全屏显示的，由App来启动新的Page盖住底部的Page，由App来关闭最上层的Page露出底部的Page。每一个Page启动到关闭都有自己的生命周期，在不同的阶段会触发不同的事件。

do_Global:主要是管理一些共享内存，应用的基本属性：系统时间，版本之类的。监控一些原生App的运行生命周期的事件。

do_Storage:DeviceOne自定义一套文件管理的机制，有自己的读写文件，压缩文件等基本文件和目录的操作。详细的介绍可以参考文档“文件结构的说明”。

3.2.核心的MM组件:

do_Animation: 所有UI组件都有animate方法，这个MM组件就是用来描述动画的参数集的。

3.3.核心的UI组件:

do_ALayout:这个布局是最基础的UI组件，虽然叫绝对布局，但是它本质是类似百分比的方式来布局组件的，在不同的设备上会自动按比例适配屏幕大小。绝对布局都是靠x，y，width，height来决定位置和大小。

do_LinearLayout:这个布局是基于线行布局，有横向和纵向之分，里面的所有子控件不能叠加，只能从上到下或者从左到右排列。

do_Webview:原生web浏览器的组件实现，这也是一个非常重要的组件，用户可以加载标准的html+js，也可以调用DeviceOne提供所有js的API。

4、进阶的demo

好了，了解了些本原理后，我们可以进一步自由实验，来熟悉平台啦。
现在随意在 index.ui 中拖入一些控件，如 label ，然后在按钮的回调事件里，改变 label的值及字体大小。由于这些东西很简单，我就不贴代码了。

另外，我们可以引入论坛里网友分享的项目原码。
http://bbs.deviceone.net/forum.php?mod=forumdisplay&fid=36
推荐“Star分享的UI模板组件”这个贴子，效果很炫，呵呵。

5、程序加密

出于安全性，Deviceone内置了两种加密机制，用于保证项目源码的安全性和重要数据不外泄。
这里所说的加密，是指安装包解压后看不到源代码的内容，安装到手机上后，运行时产生的安全数据即使被找到了也无法识别。
程序中的ui.js 文件，用于编写业务逻辑代码，是需保护的重点。在Deviceone开发中无需设置，默认即会对此文件加密。

另外，框架内置了一个加密目录：data/security/，所有在此目录下的所有文件都会缺省加密。且每一个应用的密钥都是不同的，很难破解。
但需要注意的是security子目录里的文件只能读写出内容，不能直接作为其他函数的参数，也最好不要放二进制文件或很大的内容。

6、作业

今天，我们只是熟悉了开发框架，为接下来的项目开发打下基础。
为了第二天的教程顺利展开，希望大家预先熟悉do_ListView组件及数据绑定的概念。因为这是项目的基础，我们会大量应用。
数据绑定介绍：http://doc.deviceone.net/web/doc/detail_course/databind.htm
ListView控件：http://store.deviceone.net/documents/do_ListView/4.6.html

转载于:https://my.oschina.net/qinerg/blog/652455