搭建开发环境

使用 dotWe 对 Weex 尝鲜是一个不错的选择,但如果你想更专业的开发 Weex, dotWe 就不怎么够用了。本节会教你如何搭建本地开发环境进行 Weex 开发。

第一步:安装依赖

Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先,你需要 Node.js 和 Weex CLi

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

对于 Mac,可以使用 Homebrew 进行安装:

  1. brew install node

更多安装方式可参考 Node.js 官方信息

安装完成后,可以使用以下命令检测是否安装成功:

  1. $ node -v
  2. v6.11.3
  3. $ npm -v
  4. 3.10.10

通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。

npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

注意: weex-toolkit1.0.8版本后添加了npm5规范的npm-shrinkwrap.json用于锁定包依赖,故npm版本<5的用户需要通过npm i npm@latest -g更新一下npm的版本,使用前请确认版本是否正确。

  1. $ npm install -g weex-toolkit
  2. $ weex -v //查看当前weex版本

weex-toolkit也支持直接升级子依赖,如:

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

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

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

提示:

如果提示权限错误(permission error),使用 sudo 关键字进行安装

  1. $ sudo cnpm install -g weex-toolkit

安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:

搭建开发环境 - 图1

第二步:初始化

然后初始化 Weex 项目:

  1. $ weex create awesome-project

执行完命令后,在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

第三步:开发

之后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。

package.json 中,已经配置好了几个常用的 npm script,分别是:

  • build: 源码打包,生成 JS Bundle
  • dev: webpack watch 模式,方便开发
  • serve: 开启HotReload服务器,代码改动的将会实时同步到网页中

我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。

然后我们打开浏览器,进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例,我们可以在 src/index.vue 中查看。

代码如下所示:

  1. <template>
  2. <divclass="wrapper" @click="update">
  3. <image :src="logoUrl"class="logo"></image>
  4. <textclass="title">Hello {{target}}</text>
  5. <textclass="desc">Now, let's use vue to build your weex app.</text>
  6. </div>
  7. </template>
  8. <style>
  9. .wrapper { align-items: center; margin-top:120px;}
  10. .title { padding-top:40px; padding-bottom:40px; font-size:48px;}
  11. .logo { width:360px; height:156px;}
  12. .desc { padding-top:20px; color:#888; font-size:24px;}
  13. </style>
  14. <script>
  15. exportdefault{
  16. data:{
  17. logoUrl:'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
  18. target:'World'
  19. },
  20. methods:{
  21. update:function(e){
  22. this.target ='Weex'
  23. console.log('target:',this.target)
  24. }
  25. }
  26. }
  27. </script>

关于 Weex 语法部分,你可以直接参考 Vue Guide,这里不再重复介绍。如果您想了解有关技术详情的更多信息,请继续阅读下一节。并且不要忘记在 dotWe 写代码并随时预览。