Weex 快速上手

DaLei 2019-06-29

“工欲善其事,必先利其器”,学习Weex之前需要先搭建好本地的开发环境,如果只是想简单的体验下Weex的魅力,可以使用Weex提供的dotWe在线运行环境,地址为“http://dotwe.org/vue”。

安装依赖

Weex官方提供weex-toolkit的脚手架工具来辅助开发和调试。不过需要先安装Node.js和Weex Cli相关的环境。

安装Node.js

安装Node.js有多种方式,最简单的方式是直接从Node.js官网下载可执行安装程序直接安装即可。如果是Mac环境,还可以使用Homebrew进行安装,安装命令如下:

brew install node

安装完成之后,可以使用下面的命令来检测是否安装成功。

$ node -v
v6.11.3
$ npm -v
3.10.10

通常,安装Node.js软件包后,npm包管理工具也会随之安装。因此,接下来可以直接使用npm来安装weex-toolkit工具。

npm install -g weex-toolkit

如果要升级weex-toolkit,则可以使用下面的命令:

weex update weex-devtool@latest    //@后标注版本后,latest表示最新版本

如果是国内开发者,还可以使用淘宝的npm镜像来安装weex-toolkit,涉及到的安装命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

安装结束后,可以直接使用weex命令来验证是否安装成功,如果安装成功会显示weex命令行工具各参数,如下图所示。

Weex 快速上手

安装weexpack

weexpack是weex新一代的工程开发套件,是基于weex快速搭建应用原型的利器。使用weexpack可以快速的帮助开发者通过命令行创建weex工程和插件工程,添加相应平台的weex 应用模版,weexpack还支持快速打包weex 应用并安装到手机运行,并创建weex插件模版并发布插件到weex应用市场。安装weexpack的命令如下:

npm install -g weexpack

安装Weektools

weex-toolkit是官方提供的一个脚手架命令行工具,可以使用它进行Weex 项目的创建、调试以及打包等操作。weex-toolkit从1.0.1版本之后才开始支持初始化Vue项目,所以使用时请注意weex-toolki的版本。weex-toolkit的安装命令如下:

npm install -g weex-toolkit

如果使用上面的命令安装,使用的是从https://registry.npmjs.org获...,所以对于国内用户来说,最好选择从阿里的镜像去下载,安装时需要执行如下的一些命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘宝镜像
npm install -g weex-toolkit

安装完成之后,可以使用weex -v或者weex命令来验证是否安装成功。

安装Android环境

如果需要支持Android平台则需要配置Android开发环境:安装Java相关环境,安装Android Studio及Android SDK。在安装编译Android项目时需要保证Android build-tool的版本为23.0.2以上。

安装iOS环境

如果需要支持iOS平台则需要配置iOS开发环境:安装Xcode、cocoaPods及其相关环境。其中,Xcode是Apple 公司提供的集成开发工具,可以使用它开发macOS和iOS应用程序,而CocoaPods则是负责iOS项目管理的第三方开源库的工具,合理的使用CocoaPods可以提高程序的开发效率。

创建项目

接下来,使用Weex提供的create命令初始化一个Weex项目。

weex create weexdemo

执行完上述命令后,在工程weexdemo目录下就会创建一个使用Weex或Vue模板创建的项目,工程目录结构如下。

WeexProject    
├── README.md         //项目便签
├── android.config.json   //Android工程配置
├── configs             //weex配置         
├── ios.config.json       //ios工程配置
├── package-lock.json    
├── package.json        //项目npm包管理
├── platforms           //平台模版目录 
│   ├── ios             //ios原生平台目录
│   └── android         //android原生平台目录
├── plugins             //插件下载目录 
│   └── README.md 
├── src                //业务源码目录
│   └── index.we       
├── tools              //工具目录
│   └── webpack.config.plugin.js 
├── web              //web平台目录
│   ├── index.html 
└── webpack.config.js    // webpack模块打包配置目录

不过,通过create命令创建的weex工程默认是不包含iOS和Android原生工程模版的。如果需要添加原生工程模板,可以切换到appName目录后再安装依赖,模版默认会被安装到工程的platforms目录下,官方提供的模版默认支持weex
bundle调试和插件机制。安装命令如下:

weexpack platform add ios   //安装ios模板
weexpack platform add android    //安装android模板

安装模版完成之后,会在工程目录下增加如下的模版目录。目录结构如下:

├── platforms 
│   ├── ios
│   └── android

当需要用到混合开发的时候,就可以使用原生开发环境打开Android或iOS项目进行原生功能的开发。

开发与运行

使用create命令创建weex项目时,weex-toolkit工具已经为我们生成了标准项目结构。此时,打开初始化的Weex项目并定位到“/src/index.vue”,该页面是Weex的默认首页。代码内容如下

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

运行weex项目前,需要先使用命令“npm install”来安装项目的依赖,可以在package.json文件中查看与项目相关的依赖。然后,在项目的根目录下使用命令“npm run dev & npm run serve”开启watch模式和静态服务器。
打开浏览器,输入“http://localhost:8081/index.html”即可开启一个预览页面,使用用Weex 提供的playground app扫描生成的二维码即可在在手机上看到页面在手机上的渲染效果,如下图所示。

Weex 快速上手

如果需要在模拟器或真机设备上运行项目,可以使用下面的命令来启动应用程序,并且在运行客户端命令前请先启动服务端服务。

weex run ios        //在ios设备上运行
weex run android    //Android设备上运行

需要注意的是,在运行启动命令前,请确保Android、iOS所需要的原生运行环境配置正确,并且需要先启动模拟器或连接上移动设备再运行启动命令。

执行启动命令后,如果项目编译过程没有出现任何的错误提示,系统会在运行时要求用户选择一个安装的设备,如下图所示。

Weex 快速上手

如果没有任何错误,将会看到如系下图所示的运行效果。
Weex 快速上手

相关推荐