weex项目实战

2018年最新weex实战,戳这里:

https://blog.csdn.net/dzsw0117/article/details/79270643
项目github地址,直接看效果:star,fork一下吧!

https://github.com/duqian291902259/weex-demo-dusan

weex开源以来,有不少人关注,但由于目前weex团队太忙,很多细节有待完善,很多开发者在为weex填坑,体验weex的三端统一的乐趣(实际上,要适配all设备还是挺难的)。写了个简约但完整的weex小案例,仅供参考。可以学习package.json的写法,webpackge的配置,.we文件的写法,以及weex调试等。
也可以去github直接看效果,2018年更新了,欢迎star,fork一下吧!weex-demo-dusan

一, weex-demo-dusan效果

先看demo的gif演示:
demo的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 through http://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

六,调试运行

开启server后,浏览器输入http://localhost:8080/,可以预览页面。localhost改为自己电脑的ip地址,方便pc和app中查看效果。

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动画效果,缩放,旋转。

splash界面

2,自动(点击)进入用户向导,左右滑动切换(自动切换),索引,点击立即体验。

用户向导pages

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

home界面

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,公众号:OpenDeveloper

个人网站:http://duqian.site

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页