[使用 Weex 和 Vue 开发原生应用] 1 如何配置开发环境

系列文章的目录在 ? 这里

开始之前

每个项目开始之前,都会先讲怎么搭环境,Weex 和 Vue 都讲了。其实一个框架推出之后,“怎么配置开发环境”这类文章会比较多,每个人写的都不一样,最好的方式是去看官方文档。我这里如果详细写的话,肯定和官方文档 80% 内容都一样。

所以我就不讲怎么搭环境了!文章标题是骗人的! ?

因为有现成的项目可以参考(weex-hackernews),可以直接“授之以鱼”。不过,我会根据不同的需求,帮你找到“授之以渔”的那些文章。

其实这些技巧与 Weex 和 Vue 都没多大关系的,在 日新月异 的前端环境里,学习怎么配“最先进”的开发环境是个绕不过的坎。我这里只讲与 Weex 和 Vue 有关的。

学习 Weex + Vue

现在有机会在生产环境中使用 Weex + Vue 的应该寥寥无几,大家应该都是抱着一份好奇的心态想看看 Weex + Vue 能折腾出什么花样。

如果你只是想学习 Weex 和 Vue,那就不比大费周章的搭建什么 Android 、iOS 环境,直接在 dotwe.org 上写例子,使用 Weex Playground App 扫描二维码就可以查看页面了。Weex 从 0.9.5 才开始支持 Vue,使用之前请确保 SDK 版本正确。

《[使用 Weex 和 Vue 开发原生应用] 1 如何配置开发环境》

用 Weex Playground App 扫描这个链接中的二维码可以获取 WeexSDK 的版本。(建议提 issue 之前都能提供环境信息)

除此之外,我还有一个仓库,weex-vue-examples,里边包含了各种单页的小例子,几乎涵盖了所有 Weex 组件、模块,也用到了很多 Vue 2.x 的特性。可以也可以直接将代码复制到 dotwe.org 上运行。

进一步学习 Weex + Vue

如果你不满足于使用在线网站写代码,想在本地写一些更复杂的例子(有没有发现 dotwe 上没法写多文件的例子),很好,给你推荐两个工具:weex-toolkitweex-pack

为什么是两个工具?因为解决的问题不一样,目前这两个工具也正在考虑合并,把 weex-pack 合进 weex-toolkit,只保留 weex 命令。

同样,我也不写具体的使用方法了,各自的项目文档上都有,我讲一下这两个工具的特点和差别。

如果大家有详细的使用经验,欢迎贡献出来,精力有限,欢迎好心人帮我填坑。。。?

使用 weex-toolkit

安装完 weex-toolkit 之后,它生成了 weex 命令,是个工具集,用法是 weex <command> [options]。它主要有三个功能:

  • 初始化项目。

  • 编译 .we.vue 文件。

  • 调试代码。

对我来说,用的最多的就是 调试代码weex debug 可以会启动一个 server 并且弹开一个调试页面,上边有个二维码;用 Weex Playground App 扫描这个二维码就可以用 chrome 开发者工具调试真机了。

对于项目的初始化,大家可以用各自最喜欢的工具来搭,官方标配是 Webpack + weex-loader ,其他的,像启动本地服务、eslint、postcss、自动化测试这些东西都可以自行配置的,和其他标准的前端项目一样。

至于编译,还是建议使用 dotwe.org 或者本地配个工程编译源码,因为命令行工具更新慢,又比较难定制。

使用 weex-pack

weex-pack 最初存在的目的就是为了方便大家打包 Android 和 iOS 应用,是解决原生开发的一些问题的。它也能初始化项目,不过生成的项目里除了 Web 工程以外,还有 Android 和 iOS 。

虽然能够直接生成好 Android 和 iOS 工程,但是如果你机器上什么环境也没配,也是运行不起来的。

运行 Android 至少得装 java 和 Andorid SDK,建议使用 Android Studio,生成的安卓工程是基于 Android Studio 的;运行 iOS 得用 Mac,依赖管理使用 CocoaPods,再稍微配置一下 Xcode 即可。这方面的教程网上比较多了,我也不专业,我就不误人子弟了。

集成 WeexSDK

其实你不是非得集成 WeexSDK 才能用真机看 Weex + Vue 的渲染效果的,有好几种方法:

能走到这一步的人都比较有耐心,相信你对 Weex 也有了比较全面的了解。官方也有文档教你怎么集成 WeexSDK :

如果你想扩展 Weex 的组件和模块,也有相关文档可供参考:

在 weex-hackernews 这个项目里,我最初也是没有使用 weex-pack 这个工具,是一步一步用 Android Studio 和 Xcode 创建的项目,并且添加的原生初始化代码。(因为当时工具都还不支持 Vue,连 WeexSDK 都得手动基于仓库源码集成?)

参考 weex-hackernews 的两个 PR 查看初始化步骤和代码:AndoridiOS

    原文作者:IOS
    原文地址: https://segmentfault.com/a/1190000008344148
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞