Weex入坑

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

Uninstall node.js in MacOS

Removing 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 这两个前端框架。