美文网首页
Weex 环境搭建

Weex 环境搭建

作者: APR_killer | 来源:发表于2019-04-22 21:37 被阅读0次
    介绍

    Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。

    关键词

    node.js:一个基于 chrome v8 引擎构建的一个 javascript 的运行时环境(runtime),类似 java 运行在 Windows 上运行时环境。
    npm:npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,类似 Linux 的 apt-get。
    webpack: 一个现代 JavaScript 应用程序的静态模块打包器( module bundler ),类似 Android 开发上面的 gradle 。
    weex-toolkit:脚手架工具来辅助开发和调试,通过 npm 来安装。
    vue: 一个构建数据驱动的 web 界面的渐进式框架,类似 Android 语言开发。
    weex:通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。
    Babel:一个 JavaScript 编译器 。

    安装weex步骤

    1、node.js 安装
    安装 Node.js 方式多种多样,最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。

      $ node -v           //验证 node.js 安装完成
      v11.14.0
    

    2、npm 安装
    通常安装了 Node.js 环境,npm 包管理工具也随之安装了。

    $ npm -v                //验证 npm 安装完成
     6.7.0
    

    3、weex-toolkit 安装
    通过 npm 安装 weex的脚手架工具。

    $ npm install -g weex-toolkit           //执行安装weex脚手架
    $ weex -v                                 //验证 weex-tookit 安装完成
    2.0.0-beta.20 (Core 2.0.0-beta.18)
    
    weex 项目创建

    1、项目创建

    $ weex create weex-app      ·//创建一个weex 项目
    

    2、依赖下载, 启动项目

     $ cd weex-app   //进入项目目录
     $ npm install     //通过apm安装项目依赖
     $ npm start       //启动一个本地的 web 服务,监听 8081 端口
    

    3、项目访问
    你可以打开 http://ip:8081 查看页面在 Web 下的渲染效果。

    Your application is running here: http://ip:8081.
    这样你的第一个weex 项目工程创建完成,且启动了一个web的本地服务
    
    屏幕快照 2019-04-19 下午3.32.07.png
    Weex工程结构

    weex web结构:

    ├── android.config.json
    ├── configs      // 工程编译 打包的配置和脚本目录
    ├── ios.config.json
    ├── node_modules  // 依赖库目录
    ├── package.json //  依赖库,脚本命令及版本的配置文件
    ├── package-lock.json
    ├── platforms  //  移动端模板工程目录
    ├── plugins       
    ├── README.md
    ├── src     // vue 页面的开发目录
    ├── test
    ├── web
    └── webpack.config.js //  webpack js 打包脚本,配置来之 configs配置脚本
    

    移动端模板工程添加:

    weex platform android  // 生成 weex android 模板工程
    weex platform  ios    //  生成 weex ios 模板工程
    

    相关文章

      网友评论

          本文标题:Weex 环境搭建

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