继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Weex初探--从安装到运行首个app

慕仰1870381
关注TA
已关注
手记 53
粉丝 4484
获赞 457

好多人说Weex跨平台不错,一直要推荐我玩一下,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

一、安装Weex

(一)下载JDK 1.8(必须是1.8版本)
PATH:%JAVA_HOME%\binCLASSPATH:.;%JAVA_HOME%\lib\tools.jar (一定不要忘了前面的点)
(二)Android Studio、SDK以及模拟器(如果是真机运行不需要安装模拟器)
  • Android Studio

    Android Studio的下载地址请看:https://developer.android.google.cn/studio/#downloads
    安装方式:指定安装路径,一直点击下一步就可以了。

  • SDK和安卓模拟器:

    打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可,这里也可以选择安装模拟器,找到对应的勾选进行下载即可。
    需要在Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。(如果已经配置,就不用再去配置了。)
    例如:

D:\android-sdk\tools;
D:\android-sdk\platform-tools;
(三)安装node

许多前端工具的安装都依赖于node的包管理器npm

  • 安装地址:

    Node官网: https://nodejs.org/
    如果官网打不开,可以看nodejs中文官网 https://nodejs.org/zh-cn/

  • 添加环境变量:

    下载好之后,复制node的安装路径,在path中添加node环境变量。

    示例如下:

E:\develop\nodejs\;
  • 查看node版本号:

    安装完成后在cmd中输入 npm -v 回车,如下图:

webp

查看node版本号

  • 查看npm版本号:

    在cmd中输入 npm -v 回车,如下图:

webp

查看npm版本号

※【说明】npm工具是nodejs里面自带的,所以只要配置了nodejs环境变量就OK了,不需要单独配置npm到环境变量。

(四)命令行输入npm install -g weex-toolkit@latest进行安装weex,如下图所示:
npm install -g weex-toolkit
(顺便说一下卸载命令行 npm uninstall -g weex-toolkit  这个是为了随时弃坑准备的)
(五)查看weex版本号,命令行输入weex -v

webp

二、运行首个App

(一)初始化weex

首先创建一个文件夹,cmd进入文件夹根目录,使用命令行weex init开始初始化项目。

首次运行会检查环境,自动帮你安装weexpack,如下图:

webp

(二)创建项目

使用weex create 项目名命令创建项目,创建过程有一大堆选项,可以自由选择,选择完毕就开始创建项目了。截图如下:

webp

(三)添加安卓支持

执行weex platform add android命令。如图:

webp

(四)运行项目

执行npm run android命令,运行在安卓设备上,如果要运行在模拟器,需要提前打开模拟器。使用示意图如下:

webp

weex的demo演示





打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP