Weex►第一章：Weex入门

Weex

Weex

一、集成 Weex 到已有应用

集成 Weex 到已有应用(官网)

二、创建Weex项目

创建Weex项目方法：

  • ①、在终端执行weex create 目录即可。

    ②、cd 到项目/platforms/platforms.json所在的platforms目录下执行sudo npm run pack:ios(如果不是在该目录会提示您platforms.json的错误)

  • 在使用前，请使用weex -v进行weex环境检测。详见【附1】Weex开发环境检测

三、Weex编码

  • 编写.we/vue代码

  • 将.we/vue代码文件转为js文件放入项目中

1、将.we/vue文件转换成 js文件的终端命令

.we/vue 转换成 js文件的终端命令 作用
weex compile dir js 会将dir文件夹下的所有we文件转换到js文件夹下
weex compile dir/xxx.we js 会将dir文件夹下的xxx.we文件转换为js文件存到js文件夹下
weex compile dir/xxx.vue js 会将dir文件夹下的xxx.vue文件转换为js文件存到js文件夹下

2、vue文件编写

附

【附1】Weex开发环境检测

【附2】Weex工具WebStorm的安装

【附1】Weex开发环境检测

通过执行显示当前weex版本的weex -v命令，验证Weex开发环境是否都具备了，如果都成功的时候，其会如下图所示：

image-20181217175137799

安装命令

1
2
3
4
5
6
// 国外可使用方法：
npm install -g weex-toolkit

// 国内请使用方法，否则weekpack安装不上，导致weex create命令执行出错：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

weex开发环境安装的命令对比

使用npm 使用cnpm
weex-bulider 安装成功 安装成功
weex-previewer 安装成功 安装成功
weexpack
(若无会导致执行weex create失败)		 安装失败 安装成功

更详细的weex安装请查看

通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。

遇到的问题1、weex -v命令(显示当前weex版本)一直报错

解决办法：通过终端重新执行npm install -g weex-toolkit命令来重新安装weex。

遇到的问题2、weex create 项目名命令(创建weex项目)出错

此问题，是你没正确安装weex-toolkit导致，详细看下个问题npm install -g weex-toolkit命令安装过程有错

遇到的问题3、npm install -g weex-toolkit命令安装过程有错

错误如下：

image-20181217173509332

分析可得错误原因是：npm的安装权限不足。

加上sudo后，执行sudo npm install -g weex-toolkit依旧如此。

最终通过进入/usr/local/lib/node_modules删除之前已经安装的weex-toolkit后，然后执行sudo npm install -g weex-toolkit安装通过。此时你会发现安装过程还有一些错误提示

image-20181217175640331

此问题引起的连锁反应是①终端执行weex -v的结果只有weex-bulider和weex-previewer，没有weexpack，从而导致②终端执行weex create 项目名失败

image-20181217174116400

【附2】Weex工具WebStorm的安装

1、WebStorm软件安装&破解

2、WebStorm配置vue环境

3、WebStorm其他配置