带有 Weex 和 VueJS 2.0 的原生移动应用
带有 Weex 和 VueJS 2.0 的原生移动应用
原文：https://medium.com/hackernoon/how-to-create-a-weex-vue2-project-6b94981bee4e
如何为 Web、Android 和 iOS 构建 Weex 应用程序！
如果你读过Weex 的现状:一份不准确且过时的报告，你会了解到没有明确的途径来开发一款适用于 web、 Android 和 iOS 的 Weex VueJS 应用。
嗯…现在有了！我们开始吧！
好吧…也许我们应该在这里设定适当的期望值。Weex 仍然有很多粗糙的边缘。本教程不会结束可部署的生产应用程序。不过，你会看到一个简单的 Weex Vue2.0 应用程序在浏览器和手机上运行。这是一个很好的里程碑。
安装工具
我们将需要 vue-cli 来安装模板和 weex-toolkit 来构建本地应用程序。
> npm install -g vue-cli
> npm install -g weex-toolkit创建应用程序
从这个 weex-vue 模板创建应用程序。
> vue init tralves/weex-vue <project_name>
> cd <project_name>
> npm install该模板使用文件夹结构创建项目:
Folder structure
重要的文件夹有:
dist—编译后的 js 将去向何方。platforms— Android/iOS 原生项目。src—app 代码。
其他重要文件:
config.xml—用于生成本地项目的 cordova 配置文件。这还不能正常工作。weex.html—网页版的入口文件。app.js—vue js用于weex.html的引导文件。index.html—在类似手机的框架中呈现应用程序。显示一个二维码，您可以用它将您的应用程序加载到 Weex 游乐场应用程序中。
您的应用程序将在src中。如果您打开App.vue文件，您会发现一个只有两个 Weex 组件的简单布局:<image>和<text>。你可以在官方文档中找到更多关于所有 Weex 组件的信息。Weex 将这些组件编译成网页版的 html(例如，<image>变成了<img>)和 iOS/Android 应用的原生组件。
这个例子非常简单，但是您可以构建更复杂的应用程序。查看 weex-hackernews 和 weex-todo-list 。这些应用程序展示了如何使用 vue 路由器、vuex、本地持久数据等。
Web 构建
> npm run build
> npm run serve命令npm run build将应用的 web 和本地版本编译成build/。npm run serve启动一个本地网络服务器。
现在，您可以将浏览器指向[http://localhost:8080](http://localhost:8080to)以在浏览器中预览移动应用，并指向http://localhost:8080/weex.html以访问网页版本。
Android 版本
首先，我们需要:
- 下载安装安卓工作室。
- 添加
$ANDROID_HOME环境变量，并将 SDK 工具添加到$PATH中。在我的例子中，我添加了.bash_profile:
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools然后我们添加 android 平台:
> weex platform add android然后，连接 Android 设备(并激活 USB 调试)并运行:
> weex run android注意:如果你没有 Android 设备，它会使用一个非常慢的模拟器。
就是这样！应用程序应该在设备中运行！
iOS 版本
先决条件:
- Xcode
- 椰子
然后:
> weex platform add ios安装 cocoapods 依赖项:
> cd platforms/ios
> pod install打开platforms/ios下的 Xcode 工作区WeexDemo.xcworkspace。
从窗格中添加依赖关系:
- 打开通用设置。
- (1)按下下的“+”链接框架和库
- (2)选择
libSDWebImage.a、libSocketRocket.a和libWeexplugin.a库。 - (3)按“添加”
跑项目！
我对过时的椰子有些问题。如果你遇到编译问题，试试
pod update。
weex-vue 的下一步？
待办事项列表很大:
- 请修复 config.xml 设置。
- 让 config.xml 生成一个正确配置的 Android/iOS 项目。目前，这个模板生成的项目有错误的名称、图标、应用 id 等。
- 修复调试工具。Weex 有非常棒的使用 Chrome 开发工具的调试工具。到目前为止，我还不能使它正常工作。
- 改进构建工具:图标/闪屏生成器、可分发的 Web 构建等。
- 关于 Weex 插件的工具和教程，这些插件是与本机功能交互的组件。
- 更多的演示应用，更复杂的场景，将显示更多的 Weex 组件和插件。
