欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Weex(一):Weex初体验——安装配置环境以及项目新建立

程序员文章站 2024-03-15 23:29:48
...

因为之前对网页前端有些许了解,想趁此机会将前端相关的知识都学一学,所以和朋友一起想要参加银联小程序开发大赛,也因此这两天接触了Weex框架以及学习Vue.js,只想说Weex感觉处处是坑,朋友说某乎上也是一片骂声,最后看到阿里自己都不用Weex,我就笑了。先吐槽两句:

1. 银联网页教程与所给文档教程两者根本对不上,该有的都木有,要用的脚架包都是很早之前的,教程安装是行不通的,你只会得到一个404的错误,因为根本找不到网页=_=

2. Weex是Vue的子集,也就是有些Vue能用的Weex拒绝,你强任你强,老子不让用,你说你气不气

此系列是借由Weex学习Vue.js,后续会有Vue.js学习历程。

1.安装以及环境配置

1.先说下Weex安装与配置

第一步:安装配置Node.js,这个官网下载即可,主要是要用npm下载包。(记得将Node.js设置到系统环境变量中)

第二步命令行将npm下载源改为国内源,下载速度会快一点。

npm config set registry https://registry.npm.taobao.org

第三步

npm install weex-toolkit

然后你可能会看到一大堆npm warn 忽略掉他,没有任何影响。

好的,到这里以后都不会有啥问题。

下载结束以后直接命令行继续输入

weex -v

Weex(一):Weex初体验——安装配置环境以及项目新建立

这样就安装成功了。

千万不要像银联的网页文档一样,什么cnpm挂载到私有库,别问,问就挂不上,问就 404 Not Found。

那么接下来就是最常见的Hello World了。

2.IDE选择

博主用的是VScode,相对来说建立项目之后好操作一些。

3.Weex的playground

Weex的playground是Weex推出的在手机端显示界面的软件。此处有一坑,与大家提醒分享一下。后面说到展示再提。

2.项目新建立

1.项目建立

命令行输入以下命令进行项目建立

weex create HelloWorld

Weex(一):Weex初体验——安装配置环境以及项目新建立

图中,ESLint是要从github上下载一些文件,过程会很慢,所以直接pass掉就好,过程选项大致如上(此处感谢朋友的提醒)

Weex(一):Weex初体验——安装配置环境以及项目新建立

同上,忽略它的WARN·······没有影响。

2.安装依赖库

创建完成,进入到该项目根目录下,在第一次运行之前进行依赖库与组件的安装,用以下命令

npm install

此后不用再该项目就不用再次npm install了。

3.运行

结束后就可以开始命令行运行了。(此处有坑!!!)

npm start

项目结构大致如下图(有部分是博主自己添加的)

Weex(一):Weex初体验——安装配置环境以及项目新建立

到此环境配置以及项目就建立好并且能够运行即成功。

运行后会弹出一个页面如下(博主有所修改):

Weex(一):Weex初体验——安装配置环境以及项目新建立

右侧有一个二维码可以用Weex的手机端playground进行扫码手机端显示。(此处有坑!!)

第一个坑:

到运行的时候,出错的地方来了,因为npm start运行之后,系统会开始监听默认或者自己设置的端口,如上图为8081。

报错如下:

Weex(一):Weex初体验——安装配置环境以及项目新建立

这个报错的意思是告诉你 8080端口被占用了。

脱坑操作如下:

这样命令行输入,查询8080端口有什么被哪些进程占用。

netstat -ano|findstr 端口号

效果如下:

Weex(一):Weex初体验——安装配置环境以及项目新建立

找到之后,直接“杀死”进程

taskkill /f /t /im 进程号

Weex(一):Weex初体验——安装配置环境以及项目新建立

第二个坑:

扫码要求必须,手机与电脑处于同一无线局域网络下,即IP地址一样(我的理解),但是有时候总是会出现扫码不成功,出现network error的界面。

脱坑操作:

原因借鉴此博客即可:https://blog.csdn.net/baidu_20758317/article/details/81007077

主要就是因为电脑端安装了虚拟机之类的,会导致Weex找到的IP地址不是真正的IP地址,于是手机与电脑并不处于同一个无线网下造成network error。

到此,关于安装以及建立项目上我遇到的坑以及解决办法就描述如上 ,后续会时不时更新一下博客,不过写Weex的博客,应该不会太多人关注吧·······