WEEX快速创建工程 Hello World

1.按照weex官网搭建环境，安装依赖（安装node 和 npm，weex-toolkit，安装完后可以weex -v 来验证），这里附上地址https://weex.apache.org/zh/guide/develop/setup-develop-environment.html#安装依赖

---

 2. 打开终端，进入要创建项目的目录，我这里创建在桌面weex文件夹下

截图

---

3.终端中输入 weex create +项目名  然后会提示输入一些项目的基本信息（项目名称，描述，开发者，如果直接回车就是默认的）

注意：中间一些问你需不需要eslint啊，需不需要测试模块啊~，然后我们看最后有一个'Should we run 'npm install' for you after the project has been created?' ，很显然问你需不需要在项目创建完成后直接安装依赖。（ 会有提示你进入项目目录，运行npm star 走向人生颠峰）

运行效果

运行效果

---

4.此时进入打开你刚创建项目的文件夹（我的是桌面weex文件夹）会看到有day02

项目目录还是很清晰，简单分析一下（可能有错误，希望留言，共同进步）

1、android.config.json和ios.config.json应该是native端app初始化的配置文件

2、configs：一些公共文件和打包文件(这里webpack的打包文件分成了开发和生产两套)

3、plateforms，ios和android的运行平台在这个文件里

4、plugins，插件（需要了解的可以去官网查看，这里就不多说了）

5、src，weex 资源文件

6、test 个人感觉应该跟测试有关吧 没用过

7、web 应该是web 一写三跑 有安卓 ios web

8、webpack.congig.js 这个是webpack的默认配置文件，打开可以看见，这里面只做了base处理，其它处理都转到configs下的配置文件里面去了。

9.package.json 打开这个文件夹我们可以看到 scripts里面每一个属性都对应一段脚本，比如说一个scripts ：{"build": "node build.js"}执行npm run build 等同于执行 node build.js。然后像上面的有些是执行了多个任务，这里如果是并行执行使用'&',若果是继发执行(即前一个任务成功才能执行下一个任务),使用'&&'

---

5.话不多说，cmd进入到工程所在的文件夹，输入npm start   

此时启动了一个本地服务端口8081 并在浏览器中打开了一个网页，地址为http://10.200.41.236:8081/web/preview.html?page=index.js&wsport=8082

执行效果

可以看到页面提示你用Weex playground app 去扫码。如果有的小伙伴也没有安装这个app的话，可以打开手机淘宝，直接扫码。扫码结果如下:

手机截图

有人会问为什么淘宝能打开这个页面呢？其实淘宝跟我公司一样也是只用了单页面，淘宝也内置了weex sdk，打包好的js文件直接部署到服务器，当遇到一个url的时候就去检查他是不是weex打包的js文件，是的话就去服务端下载，下载完成之后再用weex sdk渲染成native的视图即可

---

6.把项目day02拉进下载好的HBuiderX,更改index.vue代码 command+s  此时大功告成

执行效果

7.cmd 到项目目录下 weex run ios （platforms文件夹下就会有ios的工程）就可以在模拟器或者真机上跑了，如图

执行效果

xcode打开

选取文件

xr模拟器运行结果