| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
tvlh8169
8年前发布

跨平台开发之阿里Weex框架环境搭建

   <h3><strong>一、介绍</strong></h3>    <p>Weex是阿里今年6月份推出的跨平台解决方案,6月底正式开源。</p>    <p>1、官方支持iOS、Android、HTML5.</p>    <p>2、Write Once, Run Everywhere。一次编写可生成三平台代码。</p>    <p>3、DSL模板学习超简单,直接写HTML、CSS、JS。这意味着可以直接用现有编辑器和IDE的代码补全、提示、检查等功能。</p>    <p>4、轻量级、可扩展、高性能。</p>    <p>5、集成花样多,可在HTML5页面嵌入,也可嵌在原生UI中。</p>    <h3><strong>二、环境搭建</strong></h3>    <p>1、安装node.js环境</p>    <p>下载https://nodejs.org/en/download/</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b74768a13193f31aa3d4556348f2a6f3.png"></p>    <p>安装完成后,打开cmd  输入node --version命令查看node版本</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8e9b0586a44faec012467a78e7149d47.png"></p>    <p>2、安装命令行工具weex-toolkit</p>    <pre>  <code class="language-javascript">输入命令 npm install -g weex-toolkit  </code></pre>    <p>npm是nodejs一个非常流行的管理工具,可以安装基于nodejs开发的任何模块包,-g表示把weex-toolkit安装到全局模块中,成功后我们可以在</p>    <p>nodejs\node_modules下面找到weex-toolkit这个包;</p>    <p>注意:node_modules这个针对nodejs本身和基于nodejs开发项目都会存在,所以存在全局局部之分,不带-g参数则表示在当前项目的node_modules目录中添加模块包</p>    <pre style="text-align:center">  <code class="language-javascript">查看是否安装成功,输入命令weex,出现如下图表示安装成功  <img alt="" src="https://simg.open-open.com/show/beebfadfe352b517b5e703529bfb7425.png">  </code></pre>    <pre style="text-align:center">  <code class="language-javascript">查看weex版本  ,输入weex -version  <img alt="" src="https://simg.open-open.com/show/90cc3259469d5dff3e21aae236d7cdc5.png"></code></pre>    <p>3、编译测试</p>    <p>将下面代码拷贝到新建文件中,并以test_list.we文件命令</p>    <pre>  <code class="language-javascript"><template>  <div class="container">  <div class="cell">  <image class="thumb"src="http://t.cn/RGE3AJt"></image>  <text class="title">JavaScript</text></div></div>  </template>  <style>  .cell { margin-top: 10; margin-left: 10; flex-direction: row; }    .thumb { width: 200; height: 200; }    .title { text-align: center; flex: 1; color: grey; font-size: 50; }  </style>  </code></pre>    <pre style="text-align:center">  <code class="language-javascript">然后运行终端,进入test_list.we文件所在目录,输入weex tech_list.we  如果成功,会在浏览器中打开一个新的页面如下,表示运行成功  <img alt="" src="https://simg.open-open.com/show/d5b24633aa5d0ad000e0aed30be4c070.png"></code></pre>    <pre>  <code class="language-javascript">我们试着修改代码,保存会发现我们页面内容同时也更新了,这就是hot reloaded  </code></pre>    <pre>  <code class="language-javascript">终端也能看到    <img alt="" src="https://simg.open-open.com/show/9f95be2333df4430a0cd330b29d38229.png"></code></pre>    <p>4、手机运行APP</p>    <p>终端输入以下命令会生成一个二维码 weex tech_list.we --qr -h {ip or hostname}   这里-h指定本地ip地址或者主机名 ,我这里填写我本地的ip如下:</p>    <pre>  <code class="language-javascript">weex tech_list.we --qr -h 192.168.0.102</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e459339cd934cbaa52f6e9c3b9879d8a.png"></p>    <p>最后我们手机安装playground.apk(下载地址:https://alibaba.github.io/weex/download.html),打开二维码扫一扫运行即可</p>    <p> </p>    <p>来自:http://www.cnblogs.com/fozero/p/5995122.html</p>    <p> </p>    
 本文由用户 tvlh8169 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1477361385205.html
Weex 移动开发