美文网首页跨平台
weex入门之开门篇

weex入门之开门篇

作者: 平安喜乐698 | 来源:发表于2018-09-29 14:14 被阅读32次
目录
    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 
        开发调试神器

playground应用下载
weex代码在线编辑工具

  1. 环境配置

node.js官网下载
Sublime Text官网下载

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
  1. 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
  1. 集成到已有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

相关文章

网友评论

    本文标题:weex入门之开门篇

    本文链接:https://www.haomeiwen.com/subject/vjivoftx.html