JavaScript使用DeviceOne开发实战（一) 配置和起步

2015 年 9 月 底，DeviceOne Release发布。至此，DeviceOne 基本完成了对多端的支持。基于 DeviceOne 可以：

HTML5、Android、iOS、Windows 多端代码一次编写，各处复用；

实时简单部署。

本地化UI

在接下来的时间，我会通过一系列文章来介绍 DeviceOne。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和 Android和Windows 开发都适用。）

目前使用 DeviceOne 开发可以在Windows 或者 Mac 系统进行。

下面介绍下DeviceOne环境搭建，不管是应用开发还是组件开发，都需要搭建开发环境，只需要3分钟就可以完成。

1. 硬件环境

PC电脑或MAC电脑一台用于开发
移动设备一台用于调试和测试,手机或pad都可以（android、ios、windowsphone都可以），Android还可以尝试模拟器。

2. 软件环境

操作系统(MAC或Windows都支持)
Windows： 7 以上操作系统。
MAC：10.9 以上

移动设备：

Android ： 4.0以上操作系统
IOS ： 7.0 以上操作系统
WinPhone ：8.1 以上操作系统

JDK：1.7版本及以上

3. 网络环境

外网环境：很多功能都需要有外网才能进行，App的开发和调试可以离线进行。

4. 注册DeviceOne开发者账户

要想使用DeviceOne开发应用，首先需要在www.deviceone.net上注册一个自己的开发者账号，注册的地址是 注册

5. 下载设计器(IDE)

用户需要下载和使用DeviceOne提供的设计器（IDE）来开发移动应用，设计器提供所见即所得的方式来构建UI，提供代码编辑器来编写标准的javascript或lua的逻辑脚本代码，使用设计器提供的即时调试功能和真机移动设备互动调试应用，最后通过设计器提供的打包功能来发布最终应用。

设计器目前包含2个大的版本，一个是基于Eclipse RCP的版本，一个是自己开发的只支持Windows的版本。我们推荐大家使用基于Eclipse的版本。

下载地址是http://docs.deviceone.net/ 平台—>下载中心

安装设计器，直接找到刚才下载好的zip文件。解压到您相应的位置。本设计器是免安装绿色版，Windows的版本直接到解压好的文件路径下找到DoStudio.exe，双击打开。Mac版本解压后直接双击dostuio.app就可以启动。在启动的过程中可能会碰到一些问题，可以参考新版设计安装和启动问题整理

开发环境搭建完成后，我们开始尝试开发第一个DeviceOne移动应用，下面一步步介绍一下Hello DeviceOne应用的构建方法

1. 新建应用

首先打开设计器，点击新建项目，新建项目需要联网，输入用户密码验证码后登陆。但是创建完之后是支持离线开发和调试的。

在弹出的对话框中填写新建项目的名称并选择编写程序想要使用的前端脚本语言，目前可以选择JavaScript和Lua两种，还可以配置基本项目模板，包含空页面模板，带listview的模板等等，还可以配置屏幕分辨率，都配置好后点击确定按钮，会自动生成一个工程项目

我们可以看到设计器主页面如下图，我们可以在设计器里左侧工程导航区树上看到所有代码，其中app.js是整个程序的入口，类似于其它开发语言的main函数。更多的文件结构介绍请参考“DeviceOne应用结构”文档。设计器的详细说明可以参考“设计器使用指南”文档。

我们可以尝试在“控件列表”里拖拽一个Label组件到index.ui文件对应的“视图设计”，设置Label的背景颜色为绿色。视图设计可以所见即所得的拖拽和设置一个界面元素的基本属性和专有属性。

我们再修改一下index.ui.js源代码，把Hello World改成Hello DeviceOne。在js文件里可以修改应用运行的逻辑。

以上所述就是本文给大家介绍的JavaScript使用DeviceOne开发实战（一) 配置和起步的全部内容，希望大家喜欢。下篇文章给大家介绍JavaScript使用DeviceOne开发实战（二） 生成调试安装包，请各位朋友继续关注，喜欢的朋友直接点击了解详情。

赞 (0)

相关推荐

  • JavaScript使用DeviceOne开发实战（三）仿微信应用

    JavaScript使用DeviceOne开发实战（三）仿微信应用

    这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际App. 在实现的过程中,会有很多困难,还会发现有一些功能目前缺乏组件支持而无法实现,也会碰见各种移动开发中都会碰到的常见技术问题.一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App,也可以了解移动开发本身的很多技术细节,可以让App开发者少走很多弯路. 这

  • JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    大家没有进行开发之前首先需要考虑系统的差异性,比如说IOS手机有没有回退键,所以在开发时一定要考虑二级解密需要有回退键,否则ios的手机就会陷入到这个页面回不去. 安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统,以此防止用户误按回退键,具体代码实现如下: [mw_shl_code=javascript,true]page.on("back", function(){ if (canBack) { global.exit(); } else { nf.t

  • DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne是目前唯一的一款产品实现了所有的UI都是纯原生的,DeviceOne这个模型中所有UI组件功能组件都已经被抽象成可被自由扩展的跨平台组件,就连Webkit本身在模型中也仅仅退化成一个普通的UI组件而已,App开发者可以自由选择js脚本.lua脚本甚至python脚本来编写业务逻辑,让昂贵的原生开发人员能够更专注于底层技术创新和组件封装,让应用开发人员可以更加专注于具体项目的业务需求,实现原生开发和应用开发的分离,也就是让逻辑和控制充分解耦. 接触 DeviceOne 要从15年

  • 微信小程序 textarea 详解及简单使用方法

    微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值, 解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: <form bin

  • 使用DeviceOne实现微信小程序功能

    使用DeviceOne实现微信小程序功能

    微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能,该如何实现了?我们先来看看小程序的技术特点. 小程序的特点 1. 跨平台,微信就像JRE,在不同操作系统上都有实现,所以微信上的小程序就像运行在JRE上的java程序,从而实现跨平台.另外解决了多平台多机型的适配问题. 2. 体验好,webview加载html是最容易的跨平台方式,但是在手机上的体

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序中使元素占满整个屏幕高度实现方法

    微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

  • 微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • JavaScript使用DeviceOne开发实战（二） 生成调试安装包

    JavaScript使用DeviceOne开发实战（二） 生成调试安装包

    在上篇文章给大家介绍了JavaScript使用DeviceOne开发实战(一) 配置和起步,本篇文章继续给大家介绍关于javascript实战相关内容,一起学习吧. 生成调试安装包 首先需要说明的是,这个步骤并不是每次调试App都必须的,大部分情况生成一次调试安装包,安装到手机上之后就可以忽略整个这个步骤.因为调试安装包包含了很多原生组件,都是可以定制勾选的,如果你需要额外增加一些原生组件,则需要勾选更多的组件并要重新生成调试安装包. 点击调试程序的菜单里的"Build Debug Versio

  • 微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题把下面的代码复制到PowerShell里运行一下,然后重启服务器.# Enables TLS 1.2 on ... 请首先阅读本文: 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题 把下面的代

随机推荐