Mac Weex开发环境安装教程

  公司最近项目不忙,要为下个项目做技术储备所以就有时间学习了weex 简单来说就是跨平台h5、Android、iOS三端只需要一套代码然后还有原生的体验,然后本人只有点iOS开发经验,没有前端经验,所以遇到了许多坑,所以记录一下里面有写的不对的,请大神勿喷。

一、安装weex需要的软件和环境

Node.js(v10.16.2)
npm(6.10.3)
Weex Toolkit(weex当前版本2.0.0-beta)
weexpack

二、搭建weex环境

2.1 安装Node.js和npm

  首先在终端输入以下命令查看电脑是否安装Node.js和npm

node –v
npm –v

  如果已安装会显示版本号

  如果未安装Node.js,点击链接 http://nodejs.cn/download/ 选择你需要安装的版本（windows ，mac，linux 3种系统的版本），下载你需要的版版本,输入命令查看版本是否安装成功

node -v	

  安装成功后显示

  通常，安装了Node.js环境，npm包管理工具也随之安装了,输入下面命令查看是否安装成功,要更换一下国内淘宝的npm源下载速度会快很多

npm –v

  更换taobao源

npm install -g npm --registry=https://registry.npm.taobao.org

  安装成功:

2.2 安装weex脚手架

  使用 npm 来安装 weex-toolkit脚手架(WeexToolkit致力于标准化Weex生态系统中的工具库。它确保可以基于智能默认配置无缝连接各种构建工具，因此您可以专注于编写应用程序，而无需花费数天时间来纠缠配置问题。)

npm install -g weex-toolkit

  注意: 在weex-toolkit1.0.8版本后添加了npm5规范的npm-shrinkwrap.json用于锁定包依赖，故npm版本<5的用户需要更新一下npm的版本，使用前请确认版本是否正确。

npm i [e-mail] -g

  成功升级完之后输入下面命令查看版本以及子依赖是否安装成功

weex -v

  安装成功后:

  上图中是weex需要的插件,如果查看weex版本时如果只有一个工具则需要在终端依次手动加入其它插件

weex build
weex run
weex device
weex compile
weex doctor

三、创建运行weex项目

3.1 创建weex项目模板

  创建一个文件夹用于存放weex项目，通过终端cd到该文件夹路径下，执行下面命令,并输入相关配置在目录中就创建了一个使用 Weex 和 Vue 的模板项目

weex create weexDemo

  按照提示输入相关内容
  (1)项目名称(不能输入大写)
  (2)项目描述
  (3)作者
  (4)选择weex web渲染版本,最好选择第二个推荐使用的
  (5)Babel编译版本,选择第一个推荐使用的
  (6)是否使用路由管理,确定输入y,不使用输入N
  (7)是否使用ESLint管理代码(ESLint是一个代码规范管理工具,一般都不使用选择N)
  (8)选择ESLint预置文件,一般选择第一个标准风格
  (9)是否使用单元测试,选择是Y
  (10)是否运行npm安装,选择是第一个选项
  安装成功:

  安装成功后会多出weexDemo文件夹,src中是项目源码

  在终端cd到weexDemo目录下，执行前端依赖操作,该操作会将package.json目录下的依赖安装到weex项目中

npm install

  更新成功:

3.2 运行本地服务项目

  cd weexDemo文件目录到终端,运行下面命令启动本地服务

npm start

  启动成功,默认浏览器会自动打开一个本地页面,终端会显示本地服务地址

  浏览器界面,使用Weex playground app可以扫描预览, 源代码在src/目录中，可以像一个普通的Vue.js项目一样来开发。

四、开始开发项目

4.1 运行weex项目

  使用前端开发工具打开项目源码,这里用的idea,其他工具也可以,选择open打开项目路径

  选择weexDemo文件,点击open就可以了

  项目打开后的界面

  点击红框中的按钮,添加npm运行项目

  配置好点击运行按钮运行,启动程序,然后就可以编写代码了,下面是运行成功的界面

4.2 打包项目文件

  要想在app展示weex项目需要将项目文件打包成js文件,在项目终端运行下面命令,就会把src文件中的源码打包成js文件存放在文件目录中dist文件夹,默认只有一个index.js。

weex-builder src dist –w

  打包编译成功如下:

  以上是从weex从环境搭建到开发项目打包js的完整流程了,在学习weex中遇到了许多坑也填了许多坑,记录下希望能帮到你。