由于之前公司网速一直不行，所以一直没有对新版本号为1.1的webappbuilder进行试用，昨天参加了esri开发者大会又让我忽然想起来这个1.1版本的还没体验呢，熬了一个多月的渣网速之后，终于在今天熬到头了（鼓掌庆祝下），公司终于把盼望已久的光纤牵进来了，趁着大家都在参加esri开发者大会的工夫，重新写一篇从零开始使用webappbuilder的教程吧。
第一步自然是下载咯
点我下载webappbuilder
下载不了的可以去我之前的一篇帖子 ArcGIS Web API集锦 里面有百度网盘的分享链接
第二步解压 这个自不用说（解压到任意文件夹即可，webappbuilder内部自己实现了一个web服务器，不需要依赖iis、tomcat或者apache）
请无视我杂乱无章的下载目录
让我们看看webappbuilder的目录结构
从上到下文件夹依次是客户端、文档、服务端，中间三个txt就不看了，最后一个是windows启动脚本类似于linux的bash脚本
上面的是server的目录结构，webappbuilder是基于nodejs express框架实现的，这里可以不需要再安装node的运行环境了，可以看到目录里面已有了node的32和64位运行环境。
废话不多说，点击
我们来启动webappbuilder
不出意外的话你的桌面会出现这样的一个黑框框，并且自动启动浏览器进入webappbuilder页面
到这里估计很多人就望而却步了，根本不知道填什么啊，本地也没搭portal啊，试了好多地址都不能用啊，然后听说还要去申请企业级账号，但是这个账号申请流程对于一些人来说可能还觉得很麻烦，于是很多人到这一步就自然放弃了，即使很想去体验一下webappbuilder，只能看着别人群里截图眼馋，又苦于不知道方法。
这里给广大的GISer带来一个好消息，只要你有esri的账号，arcgisonline的那个就可以，下载过webapi的人应该都有这个账号。但是如果你连这个账号都没有的话，那么我想你需要去面壁几分钟了，好了，不扯这个了，我就假设大家都有这个账号了。
其实arcgisonline的账号是可以作为webappbuilder的portal的url地址来登录的。
这里给大家再敲一下这个地址http://www.arcgisonline.cn/portal，其实在我上一篇帖子也说过这个方法，但是那是针对1.0版本的，1.1版本的多了下面的这个应用程序id，是不是到这一步又要崩溃了，没事多崩溃几次内心自然就强大了，这里也不卖关子，听我继续往下说。
到这一步其实已经快要成功了，是啊 就差一个应用程序id了嘛，让我们先别看这个页面了，我们重新开一个网页，输入http://www.arcgisonline.cn/进入如下页面
点击右上角登录，图里我已经登录了（这里我就不演示怎么登录了），我们直接切入正题
鼠标勇敢的点击内容菜单吧，另外说下，对于上一步没有账号的童鞋自觉点击大大的
按钮注册吧，点击之后出现这样的一个页面
点击应用程序标签，再点击添加项目：
出现如下页面，参照下面的选择：
点击添加项目按钮
之后，会转到这样的一个页面
这里我们需要进行一些设置：
点击
你会发现你渴望已久的应用程序id出现了
，等等等！！！！别兴奋太早，你如果认为你输入这个id进去就可以顺利进入webappbuilder页面的话，我想说你太天真了，你可能会出现一个错误页面，好事还需多磨，耐心往下看：
点击上方的编辑按钮进入编辑页面，编辑页面图太大，我就不截全图了，截取重要的应用程序注册这里
点击更新按钮
这里参照图1、2步删掉原有的那一串看不懂的字符
仔细看重定向url的输入框的placeholder，是让我们填入一个http://ip:host的地址
这里我们填入webappbuilder默认的端口号3344
这里我用主机名直接代替了ip，之前微博看一个童鞋使用的时候出现了一些问题这里说一下要跟你刚进去的那个地址对应如果你是http://主机名：端口号/webappbuilder/的话你也一定要注意更改那个url重定向为这个http://主机名：端口号，这里我疏忽了，如果是127.0.0.1:3344或者localhost：3344甚至是ip：端口号的话你也需要按照这个规则来改那个url重定向地址。总之就是要对应的设置重定向地址！！！切记！！！
最狠的办法是一次性把你要加的重定向地址全部加上，像下面这个样子一劳永逸，不管是静态ip还是localhost还是127.0.0.1等都可以正确的重定向了
填好之后点击添加，就可以看到你填入的那个地址取代了之前那个讨厌的一堆看不懂的字符的位置，再点击更新按钮弹出窗关闭，最后千万别忘了点击页面左下角的那个
大大的保存按钮！！！
到这里恭喜你应该得到了你想要的应用程序id
将这个id填入我们之前搁置的那个webappbuilder让你纠结已久的页面
点击继续按钮
出现一个权限确认页面，点击同意
duang！！！duang！！！duang！！！大功告成！
新建一个应用程序试试看
随便更改一些设置看看预览
好了，这个教程就做到这里吧，要开始干活了。欢迎大家吐槽，对于教程的任何问题可以与我微博交流，我会尽力帮助大家。
补充说明一下，其实勾选应用程序中的web制图也是可以的
后面只要选择注册id，再添加url重定向也一样可以使用
时间： 2024-10-17 12:14:17