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遇到了问题,一直提示以下错误:
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
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
npm ERR! Windows_NT 10.0.16299
npm ERR! argv "D:\\mySoft\\nodejs\\node.exe" "D:\\mySoft\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "weex-toolkit" "-g"
npm ERR! node v7.6.0
npm ERR! npm v4.1.2
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! unexpected end of file
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Administrator\npm-debug.log
解决方法
使用命令:
npm install npm -g
实现npm的更新安装
参考连接: NPM简介和基本使用
查看weex-toolkit版本
使用以下命令,验证是否安装成功
weex -v
4、webpack
使用npm安装,安装命令如下:
npm install webpack -g
//若npm方式安装慢,可以使用以下方式进行安装
cnpm install webpack -g
webpack的作用
把一切当成模块,模块打包的功能
5、安装java
由于国内网络环境的原因,安装会很慢
6、安装git
7、安装android-studio
安装android-studio是为了更好体验原生APP开发的感觉,否则安装好weex-toolkit即可进行weex项目的开发
安装好以上软件(工具)即可使用weex进行项目开发,此项目中,使用到vue这个前端框架
项目开发
一、创建项目目录
步骤1、使用weex命令建立weex项目目录
weex create helloWeex
输入完以上命令时,如果系统没有安装weexpack,会提醒你进行安装,这个weexpack也可以自己单独安装。安装命令如下:
npm install weexpack -g
温馨提示:需要等待一段时间
步骤2、cd进入到项目目录下,使用以下命令安装依赖包
npm install
//或
cnpm install 【不推荐】
温馨提示:需要等待一段时间
二、添加Android应用支持
建立好项目的基本目录,还需要添加平台的支持,使用以下命令进行添加支持:
weex paltform add android
安装需要等待一段时间
ios平台本demo不实现,添加成功后,项目根目录的platform下有Android文件夹
发布成Android应用
想在写完一段代码时进行预览效果,这时候就要使用run命令了。
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项目时,提示“脚本”运行没有权限, 具体错误提示如下:
C:\Users\Administrator\AppDaa\Roaming\npm\node_modules\weex-toolkit\node_modules\xtoolkit\lib\installer\update_checker.vbs
解决方法:不理睬也可以正常跑项目
2、使用命令创建weex项目时,提示项目名字不能太长
使用helloWeex和hlWeex项目名时,提示以下错误:
Sorry, name can no longer contain capital letters.
//对不起,名称不能包含大写字母。
最后使用wxdemo作为weex的项目名
原因
weex项目名不能包含大写字母
以上是关于weex开发学习笔记_环境搭建的主要内容,如果未能解决你的问题,请参考以下文章