目录
1. 环境配置
2. Sublime Text工具高亮显示
3. 集成到已有iOS项目
weex简介
一个轻量级、可扩展、高性能框架（内置前端框架: Vue.js 和 Rax）。
2016年4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测。
2016年6月30日，阿里巴巴正式宣布Weex开源。
和React Native比较：
React Native宣称“Learn once, write anywhere”，可以支持iOS、Android
Weex宣称“Write Once, Run Everywhere”，可以支持iOS、Android、HTML5
ReactNative官方只允许将ReactNative基础js库和业务JS一起打成一个JS bundle，没有提供分包的功能，所以如果想节约流量就必须制作分包打包工具。而Weex默认打的JS bundle只包含业务JS代码，体积小很多，基础JS库包含在Weex SDK中。这一点阿里的Weex与Facebook的React Native、微软的Cordova相比，Weex更加轻量，体积小巧。把Weex生成的JS bundle轻松部署到服务器端即可完成版本更新。
相关工具：
weex-toolkit
WEEX工具包（终端使用），用来 创建、编译、运行、debug 项目。
playground
一个上架的App，用来扫码预览页面。
weexpack
用来打包JSBundle的，实际也是对Webpack的封装。
code snippets
一个在线的playground。
weex-devtool
开发调试神器
- 环境配置
1、安装node.js（官网下载，双击安装）
2、安装weex-toolkit(WEEX工具包)
sudo npm install -g weex-toolkit
weex -v 验证是否安装成功
3、下载Sublime Text编辑工具，并试手：
=>编辑内容如下，并保存为helloWorld.vue：
<template>
<div>
<text class="title">Hello Weex</text>
</div>
</template>
<style>
.title { color: red; }
</style>
<script>
</script>
说明：
【一个weex文件由三部分组成】,分别为
1、template（负责UI）
由标签组成。分为：开放标签<text>内容</text>；闭合标签<image src="http://..."/>
2、style（负责修饰UI）
3、script（负责交互）
=>运行并显示helloWorld页面
weex preview helloWorld.vue
4、创建应用
weex create awesome-app
命令执行完以后，在当前目录的 awesome-app 文件夹里就有了一个空的 Weex + Vue.js 项目。
目前 weex-toolkit 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 rax-cli
5、运行应用
cd awesome-app
npm install
npm start 会自动启动浏览器显示应用
运行结果
6、
iOS集成(执行完毕后会在awesome-app文件夹下生成platforms | ios文件夹)
weex platform add ios
Android集成
weex platform add android
启动应用
weex run ios
weex run android
weex run web
调试
install weex-debugger
weex debug（weex-toolkit提供），会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。
运行结果
项目结构
项目结构
--------------------
修改src | index.vue，重新运行查看效果
--------------------
package.json 中，已经配置好了几个常用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启HotReload服务器，代码改动的将会实时同步到网页中
安装项目依赖
npm install
开启 watch 模式和静态服务器，会在浏览器中打开并显示页面
npm run dev & npm run serve
- Sublime Text工具 高亮显示
1、点击 上方菜单栏 | Tools | Developer | New Syntax
编辑内容如下，并保存为Plain we.sublime-syntax（名称必须是这个）
2、点击 上方菜单栏 | View | Syntax 选择 Weex Component （可在下方第4行编辑该名称）
%YAML 1.2
---
# http://www.sublimetext.com/docs/3/syntax.html
name: Weex Component
file_extensions:
- we
scope: text.html.we
contexts:
main:
- include: we-interpolations
- match: '(<)([a-zA-Z0-9:-]++)(?=[^>]*></\2>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.html
push:
- meta_scope: meta.tag.any.html
- match: (>)(<)(/)(\2)(>)
captures:
1: punctuation.definition.tag.end.html
2: punctuation.definition.tag.begin.html meta.scope.between-tag-pair.html
3: punctuation.definition.tag.begin.html
4: entity.name.tag.html
5: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (<\?)(xml)
captures:
1: punctuation.definition.tag.html
2: entity.name.tag.xml.html
push:
- meta_scope: meta.tag.preprocessor.xml.html
- match: (\?>)
captures:
1: punctuation.definition.tag.html
2: entity.name.tag.xml.html
pop: true
- include: tag-generic-attribute
- include: string-double-quoted
- include: string-single-quoted
- match: <!--
captures:
0: punctuation.definition.comment.html
push:
- meta_scope: comment.block.html
- match: '--\s*>'
captures:
0: punctuation.definition.comment.html
pop: true
- match: "--"
scope: invalid.illegal.bad-comments-or-CDATA.html
- match: <!
captures:
0: punctuation.definition.tag.html
push:
- meta_scope: meta.tag.sgml.html
- match: ">"
captures:
0: punctuation.definition.tag.html
pop: true
- match: (?i:DOCTYPE)
captures:
1: entity.name.tag.doctype.html
push:
- meta_scope: meta.tag.sgml.doctype.html
- match: (?=>)
captures:
1: entity.name.tag.doctype.html
pop: true
- match: '"[^">]*"'
scope: string.quoted.double.doctype.identifiers-and-DTDs.html
- match: '\[CDATA\['
push:
- meta_scope: constant.other.inline-data.html
- match: "]](?=>)"
pop: true
- match: (\s*)(?!--|>)\S(\s*)
scope: invalid.illegal.bad-comments-or-CDATA.html
- match: '(?:^\s+)?(<)((?i:template))\b(?=[^>]*lang="jade(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: text.jade.embedded.html
- match: (</)((?i:template))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:template))
pop: true
- include: scope:text.jade
- match: '(?:^\s+)?(<)((?i:template))\b(?=[^>]*lang="pug(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: text.pug.embedded.html
- match: (</)((?i:template))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:template))
pop: true
- include: scope:text.pug
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="stylus(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.stylus.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.stylus
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="(?:s(a|c)ss)(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.sass.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.sass
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="less(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.less.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.less
- match: '(?:^\s+)?(<)((?i:style))\b(?![^>]*/>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.css.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.css
- match: '(?:^\s+)?(<)((?i:script))\b(?=[^>]*lang="coffee(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- meta_scope: source.coffee.embedded.html
- match: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
captures:
2: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (?<!</(?:script|SCRIPT))(>)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- match: (</)((?i:script))
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
pop: true
- include: scope:source.coffee
- match: '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- meta_scope: source.js.embedded.html
- match: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
captures:
2: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (?<!</(?:script|SCRIPT))(>)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- match: (</)((?i:script))
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
pop: true
- match: (//).*?((?=</script)|$\n?)
scope: comment.line.double-slash.js
captures:
1: punctuation.definition.comment.js
- match: /\*
captures:
0: punctuation.definition.comment.js
push:
- meta_scope: comment.block.js
- match: \*/|(?=</script)
captures:
0: punctuation.definition.comment.js
pop: true
- include: scope:source.js
- match: (</?)((?i:body|head|html)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.structure.any.html
push:
- meta_scope: meta.tag.structure.any.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (</?)((?i:address|blockquote|dd|div|dl|dt|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|hr|menu|pre)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.block.any.html
push:
- meta_scope: meta.tag.block.any.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (</?)((?i:a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.inline.any.html
push:
- meta_scope: meta.tag.inline.any.html
- match: "((?: ?/)?>)"
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: "(</?)([a-zA-Z0-9:-]+)"
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.other.html
push:
- meta_scope: meta.tag.other.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- include: entities
- match: <>
scope: invalid.illegal.incomplete.html
- match: <
scope: invalid.illegal.bad-angle-bracket.html
entities:
- match: "(&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)"
scope: constant.character.entity.html
captures:
1: punctuation.definition.entity.html
3: punctuation.definition.entity.html
- match: "&"
scope: invalid.illegal.bad-ampersand.html
string-double-quoted:
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.double.html
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
string-single-quoted:
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.single.html
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
tag-generic-attribute:
- match: '\b([a-zA-Z\-:]+)'
scope: entity.other.attribute-name.html
tag-id-attribute:
- match: \b(id)\b\s*(=)
captures:
1: entity.other.attribute-name.id.html
2: punctuation.separator.key-value.html
push:
- meta_scope: meta.attribute-with-value.id.html
- match: (?<='|")
captures:
1: entity.other.attribute-name.id.html
2: punctuation.separator.key-value.html
pop: true
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.double.html
- meta_content_scope: meta.toc-list.id.html
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.single.html
- meta_content_scope: meta.toc-list.id.html
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
tag-stuff:
- include: we-directives
- include: tag-id-attribute
- include: tag-generic-attribute
- include: string-double-quoted
- include: string-single-quoted
we-directives:
- match: '(?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=)'
captures:
1: entity.other.attribute-name.html
2: punctuation.separator.key-value.html
3: entity.other.attribute-name.html
4: entity.other.attribute-name.html
5: entity.other.attribute-name.html
6: punctuation.separator.key-value.html
push:
- meta_scope: meta.directive.we
- match: (?<='|")
captures:
1: entity.other.attribute-name.html
2: punctuation.separator.key-value.html
3: entity.other.attribute-name.html
4: entity.other.attribute-name.html
5: entity.other.attribute-name.html
6: punctuation.separator.key-value.html
pop: true
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: source.directive.we
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: scope:source.js
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: source.directive.we
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: scope:source.js
we-interpolations:
- match: '\{\{\{?'
captures:
0: punctuation.definition.tag.begin.html
push:
- meta_scope: expression.embbeded.we
- match: '\}\}\}?'
captures:
0: punctuation.definition.tag.end.html
pop: true
- include: scope:source.js
- 集成到已有iOS项目
pod 'WeexSDK'
AppDelegate.m文件
1、#import <WeexSDK/WeexSDK.h>
2、didFinishLaunchingWithOptions添加如下代码：
// business configuration
[WXAppConfiguration setAppGroup:@"MyApp"];
[WXAppConfiguration setAppName:@"HelloWorld"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
// init sdk environment
[WXSDKEngine initSDKEnvironment];
// set the log level
[WXLog setLogLevel: WXLogLevelAll];
ViewController.m文件
#import "ViewController.h"
#import <WeexSDK/WeexSDK.h>
@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *weexSDK;
@end
@implementation ViewController
- (void)dealloc {
[_weexSDK destroyInstance];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//
self.weexSDK.viewController = self;
self.weexSDK.frame = self.view.frame;
[self.weexSDK renderWithURL:[[NSBundle mainBundle]URLForResource:@"index" withExtension:@"js"]];
//
__weak typeof(self) weakSelf = self;
self.weexSDK.onCreate = ^(UIView *view) {
[weakSelf.view addSubview:view];
};
//
self.weexSDK.renderFinish = ^(UIView *view) {
NSLog(@"weexSDK renderFinish\n");
};
//
self.weexSDK.onFailed = ^(NSError *error) {
NSLog(@"weexSDK onFailed : %@\n", error);
};
}
- (WXSDKInstance *)weexSDK {
if (!_weexSDK) {
_weexSDK = [WXSDKInstance new];
}
return _weexSDK;
}
@end
index.js
从后台请求。这里为了方便，将前面环境配置的helloWorld.we改为helloWorld.vue并编译为js文件。
将指定we文件转换为js
weex compile myDir/helloWorld.we js
将指定vue转为js
weex compile myDir/helloWorld.vue js
网友评论