Weex从零开始(一)Windows下weex环境搭建

2017-09-14  本文已影响0人  博吖博

写在前面

虽然标题叫做从零开始,不过显然weex不是一门可以从零开始的技术,本文旨在记录个人在学习weex过程中的一些经历。
作为一个移动端开发者,native开发进行到一定阶段的时候,你或多或少都会关注到web app的相关技术,然后感受着Learn once, write anywhere or Write Once Run Everywhere的感召(威胁?)去这个未知的神秘世界一探究竟。

WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的跨平台APP.

weex环境搭建

需要的环境包括:
1.node.js(建议4.0以上)
2.npm

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

3.weex-toolkit(WEEX工具包)

node.js安装

首先下载安装Node.js
全程下一步就可以了
安装完成,cmd输入

node -v
v 版本号
npm -v
v 版本号

成功,下一步

weex-toolkit安装

用npm来下载安装weex-toolkit,cmd输入

npm install -g weex-toolkit 

默认的npm默认的是https://registry.npmjs.org/这个源,下载的非常慢建议直接

npm config set registry https://registry.npm.taobao.org  
npm install -g weex-toolkit  

安装完毕后

weex -v
v 版本号

ok,至此weex的基本开发环境已经配置完成。下面我们就开始我们的第一个程序。

第一个weex

先在本地目录下新建一个app目录,F:\weextest,然后cmd进入这个路径后
项目初始化

weex init

依赖安装

npm install

安装完成后就会看到整个目录下的文件结构如下:

file structure
src/: all source code
build/
: some build scripts
dist/: where places generated code
dist/assets/
: some assets for Web preview
dist/index.html: a page with Web preview and qrcode of Weex js bundle
dist/preview.html: Web render
.babelrc: babel config (preset-env by default)
.eslintrc: eslint config (standard by default)

在根目录下的package.json 中可以看到

 "scripts": {
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "serve": "npm run build && serve -p 8080",
    "debug": "weex-devtool"
  }

build: 源码打包,生成 JS Bundle
serve: 开启静态服务器
debug: 调试模式

接下来我们试一下serve模式

npm run serve

运行完成之后,在浏览器输入

http://localhost:8080/

大功告成!

参考

http://m.blog.csdn.net/ufocode/article/details/75171290
http://blog.csdn.net/hytfly/article/details/65680295

上一篇下一篇

猜你喜欢

热点阅读