美文网首页
Weex入坑

Weex入坑

作者: ShuoyuanLiu | 来源:发表于2018-02-26 11:32 被阅读0次

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

    相关文章

      网友评论

          本文标题:Weex入坑

          本文链接:https://www.haomeiwen.com/subject/xfviaxtx.html