摘要:系列文章之环境搭建和一步一起从前端视角聊一聊如果你只想试试的语法写个啥的,在线编辑器上玩玩就够了。如果你想更深入的学习,显然是需要搭建本地开发环境的。脚手架让我们更专注于业务代码,节约开发环境构建成本,提供一定的灵活。
WEEX系列文章之环境搭建
和一步一起从前端视角聊一聊WEEX
如果你只想试试 weex 的语法写个 hello world 啥的, 在dotWe线编辑器上玩玩就够了。如果你想更深入的学习, 显然是需要搭建本地开发环境的。
本小结内容:安装官方脚手架weex-toolkit、下载Weex Playground、解决浏览器跨域问题。
脚手架让我们更专注于业务代码,节约开发环境构建成本,提供一定的灵活。同时呢,在能力没达到一定的水平时候,不建议去乱搞这些东西。但,像webpack这种工具还是需要学习和掌握的。 weex-toolkit对于weex,就相当于create-react-app对react,vue-cli对于vue的地位。
安装 weex-toolkit 的前置条件是安装node > 6。执行npm install -g weex-toolkit有好多网友不推荐大家使用 cnpm 安装说是有坑,大家视情况而定
顺利的话,使用weex -v检测安装是否成功。
创建一个 weex 项目weex create weex-demo
npm install
一切顺利的话,再执行 npm start 看看效果。
如果你已经看到了 hello world,那么恭喜你,你已经掌握了weex 50%的知识。
Weex Playground既然学习的是原生开发,我们怎能甘心只在浏览器上看效果,但是身为一个 FE 又不太会搞 Android Studio 和 Xcode这些原生的东西,weex 工程师足够给力为我们提供了Playground下载应用然后扫一扫屏幕上的二维码,就是真的原生应用了。这个 playground的原理,可以回顾一下上篇文章中weex原理图。只不过是咱们个人开发机在充当 Server 的角色而已。
使用playground条件 手机和开发机处于同一网段?
一个完整的项目怎能少了网络请求。在浏览器上调试的时候,很可能会遇到跨域的问题,前端可以通过 webpack-dev-server转发一下请求,后端服务是不会出现跨域屏蔽的,跨域只是浏览器的一种保护机制,但是感觉还是有些麻烦,既然是浏览器限制,只要打破限制就可以了。在这里推荐大家使用chrome插件Allow-Control-Allow-Origin: *
准备好上述三个环境后,我们就可以正式进入 weex 的学习之旅了。
我的第一个weex demo
欢迎大家指正批评、或留言。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89869.html
摘要:通过使用有限的类标签阉割的及基于语法来快速构建原生应用。高性能本身对加载时间和资源占用进行了优化。站在巨人的肩膀上,我们也很容易开发出高性能的。我们可以把部署到服务器上实现热更新。引擎运行这些实现与线程通信,达到和原生应用相同的体验效果。 和一步一起从前端视角聊一聊WEEX WEEX是一套构建高性能、可扩展的原生应用跨平台解决方案。就一个字吊。 通过使用有限的类HTML标签、阉割的CS...
摘要:有兴趣的兄台可以了解一下来正题,什么是这里有简介阿里巴巴开发团队在的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,年月正式开源,并在版本官方支持,与分庭抗礼。首先安装好的开发环境。 搞了几个月的Vuejs,也是时候开始搞搞基于Vuejs语法的Weex App了。 这里做个广告,最近用vuejs开发了一个小系统(前后端分离),架构有参考Oracl...
摘要:要想用好必须对基础,体系,打包工具有较深的了解对,有了解。官方提供的脚手架不能指定入口文件,如果我们想要在项目中使用,没有入口文件将会变得比较复杂。那么,我们应该如何使得当前项目具有入口文件呢答案是只能修改文件。 写在前面的话: 注意!该文档是2017年年底的文章,那个时候weex还有很多问题,现在weex已经全面更新,文档也比较全。下面的讲解可能不太适应新的weex框架,后面我会再立...
阅读 1975·2021-08-21 14:09
阅读 425·2019-08-30 15:44
阅读 2080·2019-08-29 16:32
阅读 1340·2019-08-29 15:36
阅读 3367·2019-08-29 12:43
阅读 2744·2019-08-29 11:14
阅读 377·2019-08-28 18:26
阅读 2207·2019-08-26 13:57