美文网首页
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入坑

    Weex这个坑决定不入了,专心研究Flutter,后会无期。 一、搭建开发环境 1. 安装 node.js(npm...

  • Weex入坑笔记

    Weex入坑笔记 第一步:安装依赖 Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。...

  • 116-weex安装使用(一)

    weex 官网 搭建开发环境Weex 入坑指南:Native App 的运行与构建 前言:重要:建议使用root用...

  • Weex从0到狂风暴雨

    前言:去年入门Flutter,甚是喜欢。无奈公司硬挖坑Weex。先是入坑Vue.js,最近已经进入Weex模式。W...

  • iOS Weex 踩坑之旅

    转项目管理也有大半年了,最近自己玩了一下weex,下面开始入坑: 网上有大把的资料,是关于weex集成的,...

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

  • Weex 详细入坑之旅

    一、与 Weex 的缘分 公司接了一个新项目,项目本身也不是很复杂于是我们老大说希望用 Weex 进行跨平台开发,...

  • weex遇到的所有问题

    不讲历史,不讲八卦。weex从开始入坑到如今,半月有余。期间遇到很多问题,一一整理出来,供所有后来入坑者共。 we...

  • Weex入门踩坑记录

    Weex入门踩坑记录

  • uniApp-study

    1. weex-image(nvue)踩坑 https://weex.apache.org/zh/docs/com...

网友评论

      本文标题:Weex入坑

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