首页 > 学院 > 开发设计 > 正文

Weex入门教程之3,使用 Vue 开发 Weex 页面

2019-11-09 15:00:20
字体:
来源:转载
供稿:网友

环境安装

在这里简略地介绍下,详细看官方教程

Node.js 环境

Node.js官网 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。

npm 是一个 javaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

安装完成后,检测是否安装成功

Microsoft Windows [版本 10.0.10586](c) 2015 Microsoft Corporation。保留所有权利。C:/Users/aaron>node -vv6.9.4C:/Users/aaron>npm -v3.10.10C:/Users/aaron>

weex-toolkit安装

目前, weex-toolkit 目前仅有最新的 beta 版本开始才支持初始化 Vue 项目,使用前请确认版本是否正确。 安装命令:

npm install -g weex-toolkit@beta

安装结束后,可以在打印信息里,看到安装的位置

...C:/Users/aaron/AppData/Roaming/npm`-- weex-toolkit@1.0.1-beta.5 +-- chalk@1.1.3 | +-- ansi-styles@2.2.1 | +-- escape-string-regexp@1.0.5 | +-- has-ansi@2.0.0 | | `-- ansi-regex@2.1.1 | +-- strip-ansi@3.0.1 | `-- supports-color@2.0.0 ...

使用weex命令验证是否安装成功

Microsoft Windows [版本 10.0.10586](c) 2015 Microsoft Corporation。保留所有权利。C:/Users/aaron>weexUsage: weex <foo/bar/we_file_or_dir_path> [options]Usage: weex init [PRojectName]Options: --port http listening port number ,default is 8081 [default: 8081] --wsport websocket listening port number ,default is 8082 [default: 8082] --output to build the js bundle to the specify a path [default: "no JSBundle output"]Usage:weex <command>where <command> is one of: debug start weex debugger compile compile we/vue file run run your projectweex <command> --help help on <command>C:/Users/aaron>

查看Weex版本

C:/Users/aaron>weex -v v1.0.1-beta.5 - weex-devtool : v0.2.76 - weexpack : v0.3.5C:/Users/aaron>

准备工作已经完成,接下来,hello Word!

初始化 Weex 项目

Microsoft Windows [版本 10.0.10586](c) 2015 Microsoft Corporation。保留所有权利。C:/Users/aaron>f:F:/>cd F:/0Develop/workspace_weexF:/0Develop/workspace_weex>weex init weexVue --output F:/0Develop/workspace_weex/weexVueprompt: Init your Project: (weexVue)file: F:/0Develop/workspace_weex/weexVue/.babelrc created.file: F:/0Develop/workspace_weex/weexVue/.eslintrc created.file: F:/0Develop/workspace_weex/weexVue/.gitignore created.file: F:/0Develop/workspace_weex/weexVue/app.js created.file: F:/0Develop/workspace_weex/weexVue/assets/phantom-limb.js created.file: F:/0Develop/workspace_weex/weexVue/assets/qrcode.js created.file: F:/0Develop/workspace_weex/weexVue/assets/qrcode.min.js created.file: F:/0Develop/workspace_weex/weexVue/assets/style.CSS created.file: F:/0Develop/workspace_weex/weexVue/assets/url.js created.file: F:/0Develop/workspace_weex/weexVue/build/init.js created.file: F:/0Develop/workspace_weex/weexVue/index.html created.file: F:/0Develop/workspace_weex/weexVue/package.json created.file: F:/0Develop/workspace_weex/weexVue/README.md created.file: F:/0Develop/workspace_weex/weexVue/src/foo.vue created.file: F:/0Develop/workspace_weex/weexVue/webpack.config.js created.file: F:/0Develop/workspace_weex/weexVue/weex.html created.F:/0Develop/workspace_weex>

初始化结束后,有两个文件值得看(生成的项目功能和用法可以参考其 )。 描述项目一些配置 file: F:/0Develop/workspace_weex/weexVue/package.json created. 编译运行步骤 file: F:/0Develop/workspace_weex/weexVue/README.md created.

开发

之后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中,已经配置好了几个常用的 npm script,分别是:

build: 源码打包,生成 JS Bundledev: webpack watch 模式,方便开发serve: 开启静态服务器debug: 调试模式

我们先通过 npm install 安装项目依赖。之后运行 npm run devnpm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器,进入 http://localhost:8080/index.html 即可看到 weex h5 页面。


陈科肇


编译vue|we文件,生成js文件

如果你需要集成到已有Android项目或其它,你就需要编译vue生成js文件。 查看编译命令语法

F:/0Develop/workspace_weex/weexVue>weexUsage: weex <foo/bar/we_file_or_dir_path> [options]Usage: weex init [projectName]Options: --port http listening port number ,default is 8081 [default: 8081] --wsport websocket listening port number ,default is 8082 [default: 8082] --output to build the js bundle to the specify a path [default: "no JSBundle output"]Usage:weex <command>where <command> is one of: debug start weex debugger compile compile we/vue file run run your projectweex <command> --help help on <command>F:/0Develop/workspace_weex/weexVue>weex compile Usage: weex-builder [options] <source> <dest> Options: -h, --help output usage information --ext [ext] set enabled extname for compiler default is vue|we --web set web mode for h5 renderF:/0Develop/workspace_weex/weexVue>weex-builder --ext vue F:/0Develop/workspace_weex/weexVue/src F:/0Develop/workspace_weex/weexVue/src/buildCommand { commands: [], options: [ Option { flags: '--ext [ext]', required: 0, optional: -7, bool: true, long: '--ext', description: 'set enabled extname for compiler default is vue|we' }, Option { flags: '--web', required: 0, optional: 0, bool: true, long: '--web', description: 'set web mode for h5 render' } ], _execs: {}, _allowUnknownOption: false, _args: [ { required: true, name: 'source', variadic: false }, { required: true, name: 'dest', variadic: false } ], _name: 'weex-builder', Command: [Function: Command], Option: [Function: Option], ext: 'vue', _events: { ext: [Function], web: [Function], '*': [Function: listener] }, _eventsCount: 3, rawArgs: [ 'E://0Develop//nodejs//node.exe', 'C://Users//aaron//AppData//Roaming//npm//node_modules//weex-builder//bin//weex-builder.js', '--ext', 'vue', 'F://0Develop//workspace_weex//weexVue//src', 'F://0Develop//workspace_weex//weexVue//src//build' ], args: [ 'F://0Develop//workspace_weex//weexVue//src', 'F://0Develop//workspace_weex//weexVue//src//build', [Circular] ] }build completed!output:F:/0Develop/workspace_weex/weexVue/src/build/foo.jsF:/0Develop/workspace_weex/weexVue>

ok,已经编译成js文件到你指定的位置了

集成 Weex 到已有应用

你用Vue开发好页面后,你就可以编译成js文件,然后应用到Android项目了。 参考: 链接:http://pan.baidu.com/s/1eScbJzG 密码:73q5

工作原理

陈科肇

Weex 构建移动应用,整体结构设计

一个具有高并行研发能力、动态化和标准化规范化的移动应用应该由以下几个方面构成:

|------|------|------|------| |-----|| page | page | page | page | | api ||------|------|------|------| | api ||------|------|------|------| | api || page | page | page | page | | api ||------|------|------|------| | api | | api ||---------------------------| | api || router | | api ||---------------------------| |-----|页面:首先移动应用应该可以被拆解成若干个页面,每个页面相对解耦独立,同时每个页面都有一个 URL 进行唯一标识。路由:这些页面将会通过路由机制有机的串联起来,页面之间的关系是通过路由来进行调度的。常见的移动应用路由包括导航栏、tab 切换等。设备能力:以各种 API 或服务的方式提供出来,供页面自由使用。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表