Weex入门初体验

来源:互联网 发布:广西星巢网络 编辑:程序博客网 时间:2024/05/29 16:32

前言

    由于手机端不断的进化,那些一个平台一个开发人员的开发模式已经满足不了各大行业的需求了。所以“Write once, run everywhere”也成为了一种方向,

所以自己抽点时间来了解下。之前看了ReactNative , 发现不能很好的和当前的版本合并开发,故就从 weex开始下手了。

一、weex入门

 1、环境准备

 参考官方文档教程,需要先安装Node, 如果没有安装 npm 最好也安装下,貌似通过这个npm很多乱七八糟的都可以下载下来,通过终端。总之我是这么理解的。

那么我们来安装weex吧,打开终端(cmd)命令如下:

npm install -g weex-toolkit
安装完成查看信息:



目前位置差不多就OK啦。

开始编写代码

2、代码编写

  首先初始化一个weex项目:

  在某个目录下建立一个文件夹,通过终端进入这个文件夹输入:

weex init

输入名字或者回车,稍等会就会OK了。

安装依赖包

npm install
在dist目录下创建main.js文件

npm run build

安装weexpack

 npm install -g weexpack

编译一下

weexpack build web


启动服务(80是端口号)

http-server -p 80

在浏览器输入 127.0.0.1:80就可以看到自己的页面啦;

我们找到src 下面的 xxx.we  文件,我们要写的 代码就在这里编译并且运行。

其实一开始还是挺容易的,环境的搭建,包括上手运行,就是要经常编译再刷新新页面。

不过这里给大家提供一个简单的方案,可以快速运行查看效果(编写demo时候比较方便)

http://dotwe.org/weex

类似w3school那样的 ,自己谢谢页面啥的还是比较方便的。

今天就写到这里,后续还有很多集成到android studio开发等等。欢迎吐槽学习。

--------------------------------------------------------------------华丽的分割线--------------------------------------------------------------------------------------

持续更新ing。。。。。

突然发现 weex是支持热加载的,也就是你保存了,立马手机上不用点击刷新,自己会闪一下,新改的就出现了,很强大:

我的终端命令是:


weex adb.we --qr

 abc.we : 我自己写的weex代码

--qr : 显示二维码

这样用手机扫一下,就能显示了,再次编辑 abc.we !保存!立即就能看到效果了!

对于那种编译一下, 显示一下的 开发模式 我已经伤透了,这个效率挺高的。66666 6 到不行。。。


0 0
原创粉丝点击