-
Notifications
You must be signed in to change notification settings - Fork 66
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
【Weex】Weex 快速创建工程 Hello World #5
Comments
Open
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
开发环境
根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。
下面以IOS开发环境为例进行介绍
必须安装的软件
Homebrew
Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local
目录不可写的权限问题。可以使用下面的命令修复:
Node
使用Homebrew来安装Node.js,或直接安装
**Weex目前需要NodeJS 6.0或更高版本。**Homebrew默认安装的是最新版本,一般都满足要求。
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
Xcode IDE
如果要支持 iOS 平台则需要配置 iOS 开发环境
安装 Xcode IDE ,启动一次 Xcode ,使 Xcode 自动安装开发者工具和确认使用协议。
安装 cocoaPods。
Android Studio
如果要支持 Android 平台则需要配置 Android 开发环境:安装 Android Studio(推荐)或者 Android SDK。打开 AVD Manager ,新建 Android 模拟器并启动 。(如果有安装 Docker ,请关闭 Docker Server 。)
保证Android build-tool的版本为23.0.2。
weex-toolkit
weex-toolkit 是官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。
使用 npm 安装:
安装成功后,你输入 weex,应该可以看到下面的提示效果:
如果你安装的过程中遇到了问题,比如 permission error 你可以去 weex-toolkit issues 找到解决方法。
weexpack
weexpack 是新一代的weex应用工程和插件工程开发套件,是基于weex快速搭建应用原型的利器。可以创建weex应用工程和插件工程,快速打包 weex 应用并安装到手机运行,还可以创建weex插件模版并发布插件到weex应用市场。 使用weexpack 能够方便的在在weex工程和native工程中安装插件。
准备工程
创建工程
生成工程的目录如下:
通过 create 命令创建的工程默认不包含 ios 和 android 工程模版,创建完成之后就可以切换到appName目录下并安装依赖。
安装 weex 应用模版
添加应用模版,官方提供的模版默认支持 weex bundle 调试和插件机制,注意模版名称均为小写,模版被安装到platforms目录下。
IOS
Android
安装模版之后,会在工程目录下增加如下模版目录
Hello Weex
直接上代码吧,一下是初始化的自带Weex代码,位于
/src/index.vue
Weex开发使用了VUE的框架,基本语法详见官方手册
运行看效果
web
执行如下命令
或者执行单页调试
EACCES
报错,可以使用sudo
命令执行。虚拟机&真机运行
官方给的启动指令为
或者
但是如此运行坑较多不说,问题排查起来也是很麻烦,推荐使用xcode运行
xcode运行
这块也是官方未提及的部分
添加Weex中ios工程
选对工程文件,
注意:此处应选择文件WeexDemo.xcworkspace
打开后简单的简单点配置下基本配置,如项目名、识别符、版本、开发者等
你可以选择虚拟机活着真机执行
然后点击执行即可
如果你看到如下界面,说明你的环境和配置已经走通了,后面可以发挥你的真正实力了!
如果你看到的是如下界面,说明还有地方需要打磨
帮你填坑
如果你构建的时候报如下错误,请对号入座解决问题。
1、'ATSDK/ATManager.h' file not found
2、could not find gradle wrapper within android sdk
3、Environment variable $ANDROID_HOME not found
4、weex-vue-render/index.js(404 Not Found)
其他问题后续持续更新,欢迎留言或关注专题【WeexHub】
The text was updated successfully, but these errors were encountered: