写在前面
虽然标题叫做从零开始,不过显然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