Weex项目实战

Posted 2021-04-29 OpenDeveloper

weex开源以来，有不少人关注，但由于目前weex团队太忙，很多细节有待完善，我们继续帮weex填坑，体验weex的三端统一的乐趣（实际上，要适配all设备还是挺难的）。

之前写了篇weex环境搭配的文章，不会的可以查看weex官方project：https://github.com/alibaba/weex。近日写了个简约但完整的weex小案例，仅供交流参考。可以学习package.json的写法，webpackge的配置，.we文件的写法，以及weex调试等。 
也可以去github直接看效果:star，fork一下吧！weex-demo-dusan

一， weex-demo-dusan效果

先看demo的gif演示： gif图片不动就看下面咯。

二，How to start

这个项目基于weex，所以要安装相关环境，前文有介绍。 
weex，A framework for building Mobile cross-platform UI:http://alibaba.github.io/weex

三，Install dependencies

进入项目根目录，执行install命令，安装package.json中相关的依赖。

npm install

四，Development

开发部署的步骤，写好.we文件，然后： 
* npm run build: build src/main.we into build/main.js 
* npm run dev: watch file changes of src/main.we and automatically build into build/main.js 
* npm run serve: preview in html5 renderer throughhttp://localhost:8080/

至于如何打包编译，可以修改webpack.config.js, 不懂可以学习 weex-loader

生成的代码在 src/build/ 目录下，当然可以自己配置.

看不明白？解释下吧

---

1,将.we源文件转换为对应的js文件，位于src/build目录。

npm run build

2，监控文件变化，改动代码后自动build，实时看效果。

npm run dev

3，开启本地server服务，端口可自定义，可用pc浏览器调试H5页面。

npm run serve

六，调试运行

1，在APP中渲染：

build后的目标代码，将对应的url生成二维码后，用官方的playground扫描二维码，可以在app中渲染： 
http://192.168.100.47:8080/src/build/main.js

2，在浏览器中预览页面效果：

http://192.168.100.47:8080/index.html?page=./src/build/main.js

---

七，Overview

接触了一下weex，是不是感觉666？该demo仅用weex实现了splash，guide，home页面，交互主要是点击，左右，上下滑动。

1，进入splash页面，有个loading动画效果，缩放，旋转。

2，自动（点击）进入用户向导，左右滑动切换（自动切换），索引，点击立即体验。

3，home界面简单，仅做演示。后续完善login，网络交互等更复杂的场景。

Future

demo虽小，也能显现weex项目的结构和特点，三端统一，write once，run everywhere.有常见的移动端交互，动画，事件。

weex的强大之处，有待研究，后续完善。

更多weex相关内容，请看相关博文：

1，Weex开源测试之环境搭建，weex未来展望

2，Weex开发笔记

Thanks to weex team！

Weex，Just do it!

Dusan_杜乾：Q：291902259，博客：duqian.site，公众号：OpenDeveloper