在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
本不想写此引导性博文的，但个人在创建第一个Demo时确实出现了太多坑，且官方并未给出很好但入门引导。顾撰写此文，希望对初学者有所帮助，不至于出现“从入门到弃门而去”的现象。文中若有不当之处，还请不吝指正。
根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发iOS和Android也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。
开发IOS应用需要MacOS系统
开发Android应用，MacOS、Linux、Window均可下面以IOS开发环境为例进行介绍
必须安装的软件
, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
$ sudo chown -R `whoami` /usr/local
使用Homebrew来安装，或直接安装Weex目前需要NodeJS 6.0或更高版本。Homebrew默认安装的是最新版本，一般都满足要求。
$ brew install node
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global
如果要支持 iOS 平台则需要配置 iOS 开发环境安装
，启动一次 Xcode ，使 Xcode 自动安装开发者工具和确认使用协议。安装 cocoaPods。
虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。
Android Studio
如果要支持 Android 平台则需要配置 Android 开发环境：安装 （推荐）或者 。打开
，新建 Android 模拟器并启动 。（如果有安装
，请关闭 Docker Server 。）保证Android build-tool的版本为23.0.2。
weex-toolkit
是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。使用 npm 安装:
$ npm install -g weex-toolkit
安装成功后，你输入 weex，应该可以看到下面的提示效果：如果你安装的过程中遇到了问题，比如 permission error 你可以去
找到解决方法。
是新一代的weex应用工程和插件工程开发套件，是基于weex快速搭建应用原型的利器。可以创建weex应用工程和插件工程，快速打包 weex 应用并安装到手机运行，还可以创建weex插件模版并发布插件到weex应用市场。 使用weexpack 能够方便的在在weex工程和native工程中安装插件。
$ npm install -g weexpack
$ weexpack create appName
生成工程的目录如下：
WeexProject
├── README.md
├── android.config.json
├── config.xml
├── hooks
└── README.md
├── ios.config.json
├── package.json
├── platforms // 平台模版目录
├── plugins // 插件下载目录
└── README.md
├── src // 业务代码（we文件）目录
└── index.we
├── start
├── start.bat
├── tools
└── webpack.config.plugin.js
├── web
├── index.html
├── index.js
└── init.js
└── webpack.config.js
通过 create 命令创建的工程默认不包含 ios 和 android 工程模版，创建完成之后就可以切换到appName目录下并安装依赖。
$ cd appName && npm install
安装 weex 应用模版
添加应用模版，官方提供的模版默认支持 weex bundle 调试和插件机制，注意模版名称均为小写，模版被安装到platforms目录下。IOS
$ weexpack platform add ios
$ weexpack platform add android
安装模版之后，会在工程目录下增加如下模版目录
WeexProject
├── platforms
├── ios
└── android
Hello Weex
直接上代码吧，一下是初始化的自带Weex代码，位于/src/index.vue
&template&
&div class="wrapper" @click="update"&
&image :src="logoUrl" class="logo"&&/image&
&text class="title"&Hello {{target}}&/text&
&text class="desc"&Now, let's use vue to build your weex app.&/text&
&/template&
.wrapper { align-items: margin-top: 120 }
.title { padding-top:40 padding-bottom: 40 font-size: 48 }
.logo { width: 360 height: 156 }
.desc { padding-top: 20 color:#888; font-size: 24}
export default {
logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
target: 'World'
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
Weex开发使用了VUE的框架，基本语法详见
运行看效果
执行如下命令
$ npm run build //web工程打包
$ npm run dev & npm run serve
或者执行单页调试
$ weex src/index.vue
如果有EACCES报错，可以使用sudo命令执行。
虚拟机&真机运行
官方给的启动指令为
$ weex run ios
$ weexpack run ios
但是如此运行坑较多不说，问题排查起来也是很麻烦，推荐使用xcode运行
这块也是官方未提及的部分添加Weex中ios工程选对工程文件，注意：此处应选择文件WeexDemo.xcworkspace打开后简单的简单点配置下基本配置，如项目名、识别符、版本、开发者等你可以选择虚拟机活着真机执行不过执行前你要保证代码是最新打包的打包方式：
$ weex build ios
注意了！到这个地方就不要进行下去了，直接control+c退出，因为如果继续进行下去就会覆盖掉之前在XCode上的配置，后面就没法继续进行了这一步是关键骤主，要的作用是将weex工程打包成jsbundle文件，并且放入对应plantforms下的ios和android包下具体地址为：
/platforms/ios/bundlejs/index.js
# android位置
/platforms/android/app/src/main/assets/dist/index.js
打包后即可安装到真机或者虚拟机了。然后点击执行即可如果你看到如下界面，说明你的环境和配置已经走通了，后面可以发挥你的真正实力了！如果你看到的是如下界面，说明还有地方需要打磨
如果你构建的时候报如下错误，请对号入座解决问题。1、'ATSDK/ATManager.h' file not found
'ATSDK/ATManager.h' file not found
解决方法：
2、could not find gradle wrapper within android sdk
error: could not find gradle wrapper within android sdk. might need to update your android sdk
解决方法：
3、Environment variable $ANDROID_HOME not found
MacOS开发Android app经常会遇到环境的坑，$ANDROID_HOME就是其中之一
解决方法：
4、weex-vue-render/index.js（404 Not Found）
资源报错【weex-vue-render/index.js】（404 Not Found）
解决方法：
5、ERROR in xxx.js from UglifyJs
ERROR in index.js from UglifyJs
这是因为webpack在打包vue文件时没有成功转换ES6的语法解决方法：
其他问题后续持续更新，欢迎留言或关注专题【】
18 收藏&&|&&74
你可能感兴趣的文章
3 收藏，124
8 收藏，708
152 收藏，7.5k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
请问怎么安装cocoapods？是按照官网上的sudo gem install cocoapods？ 我现在遇到一个问题是：'WeexSDK/WeexSDK.h' file not found。不知道是不是因为cocoapods没有安装的原因。请问怎么解决呢
请问怎么安装cocoapods？是按照官网上的sudo gem install cocoapods？ 我现在遇到一个问题是：'WeexSDK/WeexSDK.h' file not found。不知道是不是因为cocoapods没有安装的原因。请问怎么解决呢
https://segmentfault.com/a/0463
非常感谢，貌似使用的是默认es5的语法。
非常感谢，貌似使用的是默认es5的语法。
厉害了！感谢
厉害了！感谢
希望对你有所帮助
希望对你有所帮助
我还想请教一个问问题weexpack 和 用weex create的方式创建有什么不同啊?不太理解这个
@zwwill[zwwill] 我还想请教一个问问题weexpack 和 用weex create的方式创建有什么不同啊?不太理解这个
weexpack算是weex-toolkit的增强版的套件，可以通过命令行创建 Weex 工程，添加相应平台的 Weex app 模版、插件等，适用于穿件完整工程，具体你可以看下官方文档
@yumao[yumao_58c15ebc83061] weexpack算是weex-toolkit的增强版的套件，可以通过命令行创建 Weex 工程，添加相应平台的 Weex app 模版、插件等，适用于穿件完整工程，具体你可以看下官方文档https://github.com/weexteam/weex-pack
npm run serve 后在chrome里，点击貌似不会触发事件（hello后面不会变成weex），请问是怎么回事？
npm run serve 后在chrome里，点击貌似不会触发事件（hello后面不会变成weex），请问是怎么回事？
weex 注册的是 touch 事件，不是 click 事件，在 chrome 浏览器下只能触发 click 事件
weex 注册的是 touch 事件，不是 click 事件，在 chrome 浏览器下只能触发 click 事件
打包成ios的app 不是得使用苹果电脑？
打包成ios的app 不是得使用苹果电脑？
@渣渣渣渣 是
@渣渣渣渣 是
WeexDemo.xcworkspace 这个文件并不存在
WeexDemo.xcworkspace 这个文件并不存在
需要执行命令 weex run ios 才会构建
需要执行命令 weex run ios 才会构建
谢谢 前端想真机运行起一个demo还真是难啊... 光想看看ios上的效果都要怀疑人生 codesign那些什么的真是蛋疼
@zwwill[zwwill] 谢谢 前端想真机运行起一个demo还真是难啊... 光想看看ios上的效果都要怀疑人生 codesign那些什么的真是蛋疼
还是要问一下...因为以前做几个简单的iosapp都只是照教程来的 所以weex run ios 那里要填的参数我不怎么懂 而且本职不开发ios现在基本上也忘光了 appid就用以前别的可运行项目的appid改一下最后一段就行了对吧？ 比如有个可以运行的项目是com.example.demo1 我这里填com.example.demo2 可以吗？codeSign是填那个开发证书那个名字吗 就是类似“iphone developer: (xxxxx)”这一串字符串是吗 然后那个profile填什么...我查了一下就是说有个profile文件 我要用他那个脚本去获取它的uuid对吧？ 那个脚本要填个路径 我怎么找到那个profile的路径呢 然后最终那个profile那里填的是什么呢？ 问了这么多实在不好意思 先谢谢了～
@zwwill[zwwill] 还是要问一下...因为以前做几个简单的iosapp都只是照教程来的 所以weex run ios 那里要填的参数我不怎么懂 而且本职不开发ios现在基本上也忘光了 appid就用以前别的可运行项目的appid改一下最后一段就行了对吧？ 比如有个可以运行的项目是com.example.demo1 我这里填com.example.demo2 可以吗？codeSign是填那个开发证书那个名字吗 就是类似“iphone developer: (xxxxx)”这一串字符串是吗 然后那个profile填什么...我查了一下就是说有个profile文件 我要用他那个脚本去获取它的uuid对吧？ 那个脚本要填个路径 我怎么找到那个profile的路径呢 然后最终那个profile那里填的是什么呢？ 问了这么多实在不好意思 先谢谢了～
请问一下，我clone下来的，ios运行的时候报了这么一个错误，errorCode:-2013 functionName: exception:[8:6031] ReferenceError: Can't find variable: Vue，请问一下怎么解决
请问一下，我clone下来的，ios运行的时候报了这么一个错误，errorCode:-2013 functionName: exception:[8:6031] ReferenceError: Can't find variable: Vue，请问一下怎么解决
需要安装执行环境和依赖包的。
需要安装执行环境和依赖包的。
你是说npm install吗，还是pod install
你是说npm install吗，还是pod install
!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the!!!! WARNING:
--unsafe-perm=true flag when running npm install!!!! WARNING:
or else it will fail.!!!! WARNING: link:!!!! WARNING:
!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING:
`--unsafe-perm=true` flag when running `npm install`
!!!! WARNING:
or else it will fail.
!!!! WARNING: link:
!!!! WARNING:
https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
请问一下安卓模版为何跑不起来..,报缺少iml文件和output.outputFile未定义..感觉纯前端要上手weex有难度啊？
请问一下安卓模版为何跑不起来..,报缺少iml文件和output.outputFile未定义..感觉纯前端要上手weex有难度啊？
是的，还是需要点基础的，不然里面的坑踩不出来
是的，还是需要点基础的，不然里面的坑踩不出来
看了两遍，今天要照楼主的教程亲手做一个hello world试试???
看了两遍，今天要照楼主的教程亲手做一个hello world试试???
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)1658人阅读
ESP8266之SDK开发（6）
使用SDK基于NONOS，链接：
1、资源下载
①、 官网下载：
②、网上找的集成版资源:
（备用链接： 密码：058j）
注意：共需要下载三个东西，cygwin，eclipse，ESP_IDE。
大致作用，如图，官网相关介绍链接:
考虑到文件比较大，官网采取了按需下载的做法。
计算机如果有eclipse，则只需要下载编译环境cygwin以及ESP_IDE，然后首次打开ESP_IDE时，选择对应的路径即可。（eclipse对应到eclipse.exe所在目录，cygwin对应到bin所在目录。）
然后还有一点，关于cygwin的安装路径不得有空格和中文，否则容易出现问题。
首先解压 Cygwin_Eclipse_IDE.exe 到 D:\目录下
注意：路径中不要有空格和中文放哪都可以！
3、路径配置
打开ESP8266IDE.exe 弹出窗口
即是前面介绍的eclipse和cygwin的相关路径。（eclipse对应到eclipse.exe所在目录，cygwin对应到bin所在目录。）
点击确定，等待加载，弹出窗口：
选择工具空间，同样可以自定义，
①、第一次选择不再提示后，如何修改cygwin和ecilpse的路径？
当我们选择不再提示，而下次想去更改时cygwin和eclipse对应的路径时，可找到对应的conf文件夹，然后在里面进行修改。
修改为0，即可。
②、第一次选择不再提示后，如何修改workspace路径？
进入 Window & Preferences & General & Startup and Shutdown 选中 Prompt for workspace on startup。
接着来，点击OK，弹出ESP_IDE界面.
环境装好！！！
4、导入工程方法
下面两种方法采用SDK V1.5.4版本的，链接：
分为两种，一种直接在当前路径下，导入eclipse。
另一种把不是在工作空间的工程copy工作空间，然后导入！
打开 ESP8266IDE.exe，选择 File→Import
点开 C/C++分支，并选中 Existing Code as Makefile Project
去除 C++支持，选中 Cygwin GCC，点击 Browser，选中 ESP8266_NONOS_SDK 所在目录，
点击 Finish 完成导入
先 Clean Project，再 Build Project，以防止出错。编译后，控制台输出如下图即编译成功
为什么要每次，build前使用clear进行清除呢？
copy到工具空间的方法
其实直接用上面这个方法就行，然后手动直接copy就行了。
介绍这个方法仅作为了解！！！
这个方法导入的SDK，操作的是副本，也就是操作的是workspace里面copy的。这样省去了手动复制的操作。。
好了，这一篇就先介绍到这里。
下一篇，我们将着手串口的打印，
文章：25篇
阅读：4101
文章：21篇
阅读：3514UPGRADE YOUR BROWSER
We have detected your current browser version is not the latest one. Xilinx.com uses the latest web technologies to bring you the best online experience possible. Please upgrade to a Xilinx.com supported browser:,
. Thank you!
Xilinx 新用户？
一经登录,表示您同意 Xilinx 和。
使用 Xilinx SDK 在 5 分钟内创建 Hello World (英文版)
通过使用本网站，本人接受使用 cookies。
分享此页面21ic官方微信-->
请完成以下验证码
飞思卡尔新手，KSDK 1.2的hello world 在我的板子上怎么跑不起来
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
& && &我的板子用的是K22FX512VLQ12，用的KEIL，KSDK 1.2.0 twrk22f120m里面的demo apps的hello world，下载到我的板子上，运行到OSC初始化时就跳到hard fault里面去了，不知为何？板子我用PE生成的工程编译了一个简单的IO程序是没问题的，用的外部8M晶振。
& && &另外感觉KSDK好复杂，以前用小壁虎的库很容易就上手了，这个KSDK真是摸不着头脑。
你具体是运行到哪句进hardfault?
给个截图看看。
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
你具体是运行到哪句进hardfault?
给个截图看看。
这个函数一执行就跳了
本帖子中包含更多资源
才可以下载或查看，没有帐号？
高级技术员, 积分 923, 距离下一级还需 77 积分
高级技术员, 积分 923, 距离下一级还需 77 积分
高级技术员, 积分 923, 距离下一级还需 77 积分
高级技术员, 积分 923, 距离下一级还需 77 积分
是不是build的时候优化的太厉害了？
楼主你好！
是这样的，你先参考下我之前的这篇关于K22产品分类的文章：
你这款芯片，需要参考K21板子的代码，因为如果你使用K22的代码，由于很多的模块没有，一初始化，就会进hardfault了。
另外，它们的时钟系统也是有些区别的。
所以，你可以在你板子上跑K21的代码试试。
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
本帖最后由 bndanshen 于
13:47 编辑
感谢楼上，正解，用K21的就OK了。
还有就是为什么fsl_device_registers.h中为什么没有K22FX512VLQ12这个mcu呢？
另外怎么建立一个MDK的工程文件呢，我想用什么外设直接加进去就行，不用的外设就不加到工程里去。IAR有make_new_project.exe,MDK有没有类似的东东呢？
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
自己顶一下
感谢楼上，正解，用K21的就OK了。
还有就是为什么fsl_device_registers.h中为什么没有K22FX512VLQ12这个mcu ...
因为TOWER K22不支持这颗芯片，只有K21支持，但是KSDK里面列出来的只有K21的，所以这个还是比较特别的类型，K22FX512VLQ12就参考K21的代码，这个是经验。
如果要新建MDK的工程，你可以自行新建MDK工程，然后添加相关的代码即可。
目前这个没有对应的生成MDK工具，需要自行新建。
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
初级技术员, 积分 93, 距离下一级还需 7 积分
谢谢楼上了。结贴！
谢谢楼上了。结贴！
好的，后续有问题，欢迎继续发帖交流。
助理工程师, 积分 1065, 距离下一级还需 935 积分
助理工程师, 积分 1065, 距离下一级还需 935 积分
助理工程师, 积分 1065, 距离下一级还需 935 积分
助理工程师, 积分 1065, 距离下一级还需 935 积分
看看，我也正在学习，看看有没有帮助
实习生, 积分 30, 距离下一级还需 20 积分
实习生, 积分 30, 距离下一级还需 20 积分
实习生, 积分 30, 距离下一级还需 20 积分
实习生, 积分 30, 距离下一级还需 20 积分
楼主你好！
是这样的，你先参考下我之前的这篇关于K22产品分类的文章：
Kinetis K22 120M产品分类信息
你好，我用ksdk1.2.0版本的，用K60 tower 板那个工程下载到另外一个开发板里面， 也出现了跟楼主一样的问题，很奇怪，我查了下芯片的型号 ，里面是定义的，不知道为什么，能给出个招吗？谢谢！
你好，我用ksdk1.2.0版本的，用K60 tower 板那个工程下载到另外一个开发板里面， 也出现了跟楼主一样的问 ...
你好，新的问题，请发一个新的问题贴出来，然后把你芯片的具体型号，使用代码路径等都写清楚，我会在你新的问题贴里面回答你，尽量不要跟在别人已结贴后面问问题。
楼主如果问题解决了，还请把我及时结贴。
扫描二维码，随时随地手机跟帖
技术导师奖章
人才类勋章
坚毅之洋流
发帖类勋章
时间类勋章
精英会员奖章
等级类勋章
您需要登录后才可以回帖
热门推荐 /5}