美文网首页weex社区Weex开发技巧Weex开发
Weex初探--从安装到运行首个app

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

作者: AWeiLoveAndroid | 来源:发表于2018-08-17 17:35 被阅读265次

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

    一、安装Weex

    (一)下载JDK 1.8(必须是1.8版本)
    PATH:%JAVA_HOME%\bin
    CLASSPATH:.;%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 回车,如下图:

    查看node版本号
    • 查看npm版本号:

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

    查看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

    二、运行首个App

    (一)初始化weex

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

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

    (二)创建项目

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

    (三)添加安卓支持

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

    (四)运行项目

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

    weex的demo演示

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3ot4fb03pgw0o

    相关文章

      网友评论

      • DrunkPian0:RN都快凉了,更别提WEEX了,真的是在苟延残喘吧。Flutter还有点希望
        AWeiLoveAndroid:@DrunkPian0 我只是体验一下而已 看看这家伙有多坑。。

      本文标题:Weex初探--从安装到运行首个app

      本文链接:https://www.haomeiwen.com/subject/zphtiftx.html