weex开发学习笔记_环境搭建

Posted echophp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了weex开发学习笔记_环境搭建相关的知识,希望对你有一定的参考价值。

weex开发之环境搭建

需要安装的软件

1、node.js

node.js使用C++语言编写的,采用Google Chrome浏览器的V8引擎;作用:javascript的运行环境。

node.js的安装包可以直接到官网上下载安装,安装高版本的node.js,都会自动安装好npm这个软件工具

下载链接: node.js下载路径

2、NPM

即Node包管理器(Node Package Manager);以JavaScript编写的软件包管理系统,默认环境:Node.js

3、 使用npm安装weex-toolkit

weex-toolkit 是官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能

遇到的问题

安装weex-toolkit遇到了问题,一直提示以下错误:

 
   
   
 
  1. npm ERR! tar.unpack unzip error C:\Users\ADMINI~1\AppData\Local\Temp\npm-17704-604b21f3\registry.npmjs.org\rx\-\rx-4.1.0.tgz

  2. npm ERR! tar.unpack untar error C:\Users\ADMINI~1\AppData\Local\Temp\npm-17704-604b21f3\registry.npmjs.org\rx\-\rx-4.1.0.tgz

  3. npm ERR! Windows_NT 10.0.16299

  4. npm ERR! argv "D:\\mySoft\\nodejs\\node.exe" "D:\\mySoft\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "weex-toolkit" "-g"

  5. npm ERR! node v7.6.0

  6. npm ERR! npm  v4.1.2

  7. npm ERR! code Z_BUF_ERROR

  8. npm ERR! errno -5

  9. npm ERR! unexpected end of file

  10. npm ERR!

  11. npm ERR! If you need help, you may report this error at:

  12. npm ERR!     <https://github.com/npm/npm/issues>

  13. npm ERR! Please include the following file with any support request:

  14. npm ERR!     C:\Users\Administrator\npm-debug.log

解决方法

使用命令:

 
   
   
 
  1. npm install npm -g

实现npm的更新安装

参考连接: NPM简介和基本使用

查看weex-toolkit版本

使用以下命令,验证是否安装成功

 
   
   
 
  1. weex -v

4、webpack

使用npm安装,安装命令如下:

 
   
   
 
  1. npm install webpack -g

  2. //若npm方式安装慢,可以使用以下方式进行安装

  3. cnpm install webpack -g

webpack的作用

把一切当成模块,模块打包的功能

5、安装java

由于国内网络环境的原因,安装会很慢

6、安装git
7、安装android-studio

安装android-studio是为了更好体验原生APP开发的感觉,否则安装好weex-toolkit即可进行weex项目的开发

安装好以上软件(工具)即可使用weex进行项目开发,此项目中,使用到vue这个前端框架

项目开发

一、创建项目目录

步骤1、使用weex命令建立weex项目目录
 
   
   
 
  1. weex create helloWeex

输入完以上命令时,如果系统没有安装weexpack,会提醒你进行安装,这个weexpack也可以自己单独安装。安装命令如下:

 
   
   
 
  1. npm install weexpack -g

温馨提示:需要等待一段时间

步骤2、cd进入到项目目录下,使用以下命令安装依赖包
 
   
   
 
  1. npm install

  2. //或

  3. cnpm install  【不推荐】

温馨提示:需要等待一段时间

二、添加Android应用支持

建立好项目的基本目录,还需要添加平台的支持,使用以下命令进行添加支持:

 
   
   
 
  1. weex paltform add android

安装需要等待一段时间

ios平台本demo不实现,添加成功后,项目根目录的platform下有Android文件夹

发布成Android应用

想在写完一段代码时进行预览效果,这时候就要使用run命令了。

 
   
   
 
  1. weex run android

这里是有一个坑,在命令执行完,它会报一个错误,错误是找不到安装设备。No android devices found.如果你自学这个坑会够你添一会的了。那这里我们安装的android-studio就派上用途了。

在Android Studio里运行weex

温馨提示

坑的重灾区

注意点

npm依赖node.js才能运行

使用npm安装软件时,结尾的-g表示安装全局的包

weex-toolkit安装,不能使用cnpm方式进行安装

weex开发学习文档

  • weex从入门到放肆

拓展知识点

1、vue-cli

vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种

2、ESLint

用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格

参考链接:ESLint的简介

遇到的问题

1、使用命令创建weex项目时,提示“脚本”运行没有权限, 具体错误提示如下:
 
   
   
 
  1. C:\Users\Administrator\AppDaa\Roaming\npm\node_modules\weex-toolkit\node_modules\xtoolkit\lib\installer\update_checker.vbs

解决方法:不理睬也可以正常跑项目

2、使用命令创建weex项目时,提示项目名字不能太长

使用helloWeex和hlWeex项目名时,提示以下错误:

 
   
   
 
  1. Sorry, name can no longer contain capital letters.

  2. //对不起,名称不能包含大写字母。

最后使用wxdemo作为weex的项目名

原因

weex项目名不能包含大写字母


以上是关于weex开发学习笔记_环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

Weex简介及环境搭建(mac版)

Weex学习第一章:环境搭建

Weex开发之路:开发环境搭建

跨平台开发之阿里Weex框架环境搭建

跨平台开发之阿里Weex框架环境搭建

weex 与 weexpack 环境搭建