weex项目实战Demo:动画,用户向导

weex开源以来,有不少人关注,写了一些weex小案例,仅供参考。可以学习weex原理和应用。跨平台应用的特定语法,package.json的写法,webpackge的配置,vue.js的写法,android继承weex,以及weex调试等。
也可以去github直接看效果:star,fork一下吧!
https://github.com/duqian291902259/weex-demo-dusan

以下是2016年写的,可以忽略,但是demo是2018年更新了,最新的weex体验,移步github。

###一,weex-demo-dusan效果

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中相关的依赖。

1
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目录。

1
npm run build

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

1
npm run dev

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

1
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!

1
Dusan_杜乾:Q:291902259,duqian.net.cn,公众号:OpenDeveloper