黑马程序员技术交流社区

标题: 【iOS技术分享】迅速教你入门WEEX [打印本页]

作者: Simpon    时间: 2016-7-27 17:14
标题: 【iOS技术分享】迅速教你入门WEEX
本帖最后由 Simpon 于 2016-10-19 11:36 编辑

WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台APP.
1. 搭建WEEX环境1.1 首先下载安装Node.js,MAC版下载
1.2 安装 weex-toolkit(WEEX工具包)
终端执行
[AppleScript] 纯文本查看 复制代码
 sudo npm install -g weex-toolkit 
执行后需要输入你电脑的密码.
1.3 验证是否安装成功
终端执行
[AppleScript] 纯文本查看 复制代码
weex 
显示
[AppleScript] 纯文本查看 复制代码
info 
Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex init

选项:
  --qr          display QR code for native runtime, default action     [boolean]
  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                  [默认值: "no JSBundle output"]
  --watch       using with -o , watch input path , auto run transform if change
                happen
  -s, --server  start a http file server, weex .we file will be transforme to JS
                bundle on the server , specify local root path using the option
                                                                        [string]
  --port        http listening port number ,default is 8081         [默认值: -1]
  --wsport      websocket listening port number ,default is 8082    [默认值: -1]
  --np          do not open preview browser automatic                  [boolean]
  -f, --force   [for create sub cmd]force to replace exsisting file(s) [boolean]
  --help        显示帮助信息                                           [boolean]
  -h, --host                                               [默认值: "127.0.0.1"]

for example & more information visit https://www.npmjs.com/package/weex-toolkit
表明安装成功.

2. 安装weex的编辑工具
如果使用Xcode编辑weex,没有格式也没有高亮和提示,我们需要使用一个编辑工具来快速的编写weex的代码.
2.1 去sublime Text官网下载安装sublineText3 然后双击安装.
2.2 下载 weex高亮脚本
2.3 添加高亮脚本 sublime Text 导航栏里选择Tools->Developer->New Syntax
2.4 下载好的weex高亮脚本文件打开

把内容拷贝到新建的文件中,覆盖原有的内容. 然后cmd + s保存,把名称命名为Plain we.sublime-syntax,请注意文件名称必须命名为Plain we.sublime-syntax,否则没有高亮.
2.5 开启weex语法高亮

3. 来一个简单的Demo玩玩.
3.1 制作一个简单的weex文件
我们来做一个列表,现在只包含一个Cell,cell内部只有一个图片,图片右边是一个文本.
[AppleScript] 纯文本查看 复制代码
<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: 8; margin-left: 8; flex-direction: row; }
  .thumb { width: 100; height: 100; }
  .title { text-align: center; flex: 1; color: grey; font-size: 25; }
</style>
把上面的文本拷贝到编译器中,cmd + s 保存你想保存的位置,命名为list.we,其中`we`是`weex`文件的后缀.######
3.2 预览
打开终端,`cd` 到 `list.we` 所在的目录,执行
[AppleScript] 纯文本查看 复制代码
weex list.we 
`` weex 工具会启动服务器,把list.we`转换为html5的页面,然后在浏览器中把它打开. 效果如图

你可以改变上面的元素来查看不同的效果.
3.2 weex 语法简介
一个WEEX文件由三部分组成,分别为template,style,script;其中template是骨架,类似于HTML标签,style负责渲染,类似于css, script负责交互事件,类似于javascript
更多weex语法,参考Syntax chapter

精华推荐:
黑马程序员:为苹果与iOS开发者的前景正名
与君共勉 --- 记黑马22期同学成长经验。
【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术
关于iOS 10最新的课程视频及demo第三弹,火速发布了



作者: Android_Robot    时间: 2016-7-29 09:33
棒!!!
作者: baby14    时间: 2018-7-21 13:19
多谢分享




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2