首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：手机用户2602920905 | 来源：互联网 | 2023-09-13 17:55
为什么80%的码农都做不了架构师？一、引子现在移动开发太火了，我想学！但是三天？可能吗？开发app真的很

为什么80%的码农都做不了架构师&＃xff1f;>>>   hot3.png

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

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

二、目标 写这篇教程的目的是带大家入门&＃xff0c;所以我们拿现在移动端比较火的“微信”开刀。既然只有三天时间&＃xff0c;那么我们也不可能做一款完整的APP把微信的所有功能都实现了。仔细研究你就会发现&＃xff0c;微信的每个细节每个交互都是经过反复推敲的&＃xff0c;它的确拥有国内优秀的产品团队和技术团队。这也是我们要精仿它的原因&＃xff01;
那么三天&＃xff0c;我们的APP能实现什么功能呢&＃xff1f;
  • 多端实现&＃xff0c;包含android、ios&＃xff0c;顺手附带winmobile&＃xff1b;
  • 精仿四大主页面&＃xff1a;消息列表、通讯录、发现和个人中心&＃xff1b;
  • 实现聊天功能&＃xff1b;

三、第一天学习正式开始

1、熟悉开发框架

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


1.1、现在我们先安装它的IDE&＃xff08;DevinceOne Stduio&＃xff09;。

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

1.2、新建项目

IDE启动后界面类似常规的Eclipse&＃xff0c;点击File-New-DeviceOne Project&＃xff0c;创建一个新的项目&＃xff1a;

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

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

2、编写第一个程序

项目创建后&＃xff0c;目录结构是这样的&＃xff1a;
 
  • app.doproj 项目文件&＃xff0c;主要声明项目分辨率
  • app.js 程序入口&＃xff0c;加载主界面ui
  • index.ui 是实际的界面文件
  • index.ui.js 是实际的代码编写处&＃xff0c;实现逻辑与界面的分离

现在我们双击 index.ui &＃xff0c;打开界面编辑器&＃xff1a;

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

var nf &＃61; sm("do_Notification"); //引入Notification控件
var btn_hello &＃61; ui("btn_hello"); //界面控件的引用btn_hello.on("touch",function(){ //按钮控件的点击事件nf.alert("Hello World !!!!!"); //弹出一个提示框
}); 怎么样&＃xff0c;很容易理解吧&＃xff1f;
现在我们在真机上将它运行起来。

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

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


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

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


3、所有的都是控件

DeviceOne的所有程序都是围绕着控件进行开发的。一切都是控件&＃xff01;那么现在&＃xff0c;我们要熟悉框架的核心控件及分类。
DeviceOne根据Android&＃xff0c;IOS&＃xff0c;Winphone的SDK抽象了一套统一的javascirpt库&＃xff0c;把所有组件分三种类型(UI,MM,SM)&＃xff1a;
  • 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来获取对象&＃xff0c;id一个ui对象的id属性值。目前不支持动态创建对象
  • sm : 通过SM组件的名称来获取对象
  • mm : 通过MM组件的名称&＃xff0c;id以及作用域来创建或者获取对象

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


3.1.核心的SM组件:

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

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

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

3.2.核心的MM组件:

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


3.3.核心的UI组件:

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

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

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

4、进阶的demo

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

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

5、程序加密

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

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

6、作业

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


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



推荐阅读
  • html

    lua语言闭包、模式匹配、日期、编译、模块的特性及应用

    本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]
  • list

    微软头条实习生分享深度学习自学指南

    微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]
  • char

    Java实现大数乘法（分治算法）

    本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • char

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

    HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • list

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • list

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • list

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • list

    C#之数据集：DataSet对象的使用及相关方法详解

    本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • get

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • list

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • go

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • go

    如何用UE4制作2D游戏文档——计算篇

    如何用UE4制作2D游戏文档——计算篇
    篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识，希望对你有一定的参考价值。 ... [详细]
  • list

    Linux进程控制块PCBtask_struct结构体结构及作用详解

    本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • replace

    Java String与StringBuffer的区别及其应用场景

    Java String与StringBuffer的区别及其应用场景
    本文主要介绍了Java中String和StringBuffer的区别，String是不可变的，而StringBuffer是可变的。StringBuffer在进行字符串处理时不生成新的对象，内存使用上要优于String类。因此，在需要频繁对字符串进行修改的情况下，使用StringBuffer更加适合。同时，文章还介绍了String和StringBuffer的应用场景。 ... [详细]
  • get

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
author-avatar
手机用户2602920905
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有