Weex这个坑决定不入了,专心研究Flutter,后会无期。
一、搭建开发环境
1. 安装 node.js(npm也随同安装)
方式一:Homebrew --> brew install node
注意:安装后,执行 node -v 查看已经安装的 node 版本
报错1 :-bash: /usr/local/bin/node: No such file or directory
解决办法:
1. 链接 node:brew link node
报错2 :Error: Could not symlink share/doc/node/gdbinit
Target /usr/local/share/doc/node/gdbinit already exists.
解决办法:
2. 删除 sudo rm '/usr/local/share/doc/node/gdbinit'
报错3:如果依旧报错(乱七八糟的)
Error: Could not symlink share/doc/node/gdbinit /usr/local/share/doc/node is not writable.
解决办法:
3. 执行brew doctor(brew doctor 的作用检查homebrew,各模块是否正常)
执行 brew prune(Broken symlinks were found. Remove them.)
执行 brew link node(链接 node)
根据提示,分别进行响应操作,直到安装成功。
方式二:Node.js 官网下载 pkg
Node.js是Weex代码构建中的必要依赖;
npm是随同Node.js一起安装的“包管理工具”,解决nodeJS代码部署的问题。(npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码)
查看已安装版本:
node -v 和 npm -v
注意⚠️:千万别用 n 来管理 Node.js(坑太多)
MacOS中删除Node.js
使用 n 来管理Node.js的版本
n:npm install -g n
n: n 查看当前已安装的或正在激活的Node.js版本
n: n x.x.x 安装特定版本,并激活
n: n latest / n stable / n lts 安装不同的Node.js版本
n: n rm x.x.x / n - x.x.x / n prune 删除对应的版本
用 n 来管理 Node.js 的时候,可以先断开brew链接的Node.js:
brew unlink node
从 n 管理的 Node.js 切回 Homebrew 时:
rm '/usr/local/bin/node'
rm '/usr/local/lib/dtrace/node.d'
brew unlink node && brew link node
npm相关:
更新到最新版本:npm i npm@latest -g
用 n 切换不同版的node时,可能会造成npm工作不正常:
curl -0 -L https://npmjs.com/install.sh | sudo sh
注意:中国用户可能会遭遇 npm 被墙的问题,那么可以使用淘宝的 npm镜像
cnpm:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装Weex脚手架 weexpack 和 weex-toolkit(Weex CLi)
weex-toolkit: npm install -g weex-toolkit
weexpack: npm install -g weexpack(必须安装,否则添加ios/android时,会报错
error: unknown option `--telemetry')
官方脚手架全家桶:
weex-toolkit:是用来初始化项目,编译,运行,debug所有工具;
weexpack:是用来打包JSBundle的,实际也是对Webpack的封装;
(weexpack 是 weex 新一代的工程开发套件,是基于weex快速搭建应用原型的利器。它能够帮助开发者通过命令行创建weex工程,添加相应平台的weex app模版,并基于模版从本地、GitHub 或者 weex 应用市场安装插件,快速打包 weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建weex插件模版并发布插件到weex应用市场。)
WeexPlayground:是一个上架的App,这个可以用来通过扫码实时在手机上显示出实际的页面;
dotWe:是一个在线的playground;
weex-devtool:开发调试神器;
3. 创建工程
weex create 工程名
在工程目录下:cd 工程目录
npm install // 安装项目依赖
npm start // 启动项目
或者
npm run dev & npm run serve // 开启 watch 模式和静态服务器
注意,在 package.json 中,已经配置好了几个常用的 npm script。
npm script: npm run-script build
关于 Weex 语法部分,你可以直接参考 Vue Guide;
并且可以在 dotWe 写代码,并随时预览;
编译和运行
默认情况下 weex create 命令并不初始化 iOS 和 Android 项目,你可以通过执行 weex platform add 来添加特定平台的项目:
weex platform add ios (weex platform remove ios)
weex platform add android
运行:
weex run ios
weex run android
weex run web
编译:
weex compile [source] [dist] [options]
例如:weex compile src/index.vue dest
调试(暂未搞懂!!!):
weex debug
调试 .vue 文件:weex debug your_weex.vue
http://weex.apache.org/cn/tools/toolkit.html#集成devtool工具
二、Weex介绍
1. 什么是Weex?
Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。
Weex 的结构是解耦的,渲染引擎与语法层是分开的,也不依赖任何特定的前端框架;目前主要支持 Vue.js 和 Rax 这两个前端框架。