关键词:
1.简介
Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
关于搭建weex开发环境大家可以看官网教程,很详细,这里就不多说了!
2.创建HelloWeex
1.通过weex init 工程名字 可以创建一个Weex项目
2.进入项目目录,执行npm install命令安装项目依赖,然后稍等片刻
去了个厕所,哎呦,安装完成
3.之后看下此时的项目目录
简单介绍一下,dist是编译好的js文件,node_modules是我们执行过npm install后安装的依赖库,src就是我们编写页面的地方了,打开看看
卧槽,这是啥,别怕,这就是HelloWeex页面,不信?打开看看:
果然是他,HelloWeex大哥,说了半天也没见他长啥样啊,别急,我们运行下weex foo.vue命令
等了好一会,自动弹出了浏览器页面:
终于等到你,还好我没放弃!
3.debug调试单个页面
1.执行weex debug foo.vue命令
此时同样会弹出浏览器页面:
不要紧张,就一个页面的二维码而已,下面去官网 下载Weex Playground App,安装成功后,扫描上图的二维码,既可以进入debug调试模式:
然后随便改点foo.vue里面的代码,点击app右上角的刷新图标,看看是不是看到效果了,自己去尝试一下吧!
weex项目开发weex与weexpack的区别
...面源文件、webpack配置、npm脚本等。项目产生的输出就是一个JSBundle文件,可以自由的进行部署。weex-pack是初始化一个完整的App工程 查看详情
weex与weexpack环境搭建
weex与weexpackweexinit会生成一个weex项目,里面有weex,vue模板。如果要开发Android,需要建一个Android项目。weexpack,可以帮助搭建Android和iOS项目 ----------------------weex------------------------------------------------------------一、安装依 查看详情
weex环境搭建及组件相关使用总结
...一个 weex 命令。你可以用 weexcreate 命令来创建一个空的模板项目:weexcreateawesome-app命令执行完以后,在当前目录的 awesome-app 文件夹里就有了一个空的 Weex+Vue.js 项目。开发下一步就是进入刚刚创建的... 查看详情
weex项目开发weex+weex-ui
github地址:weex-uihttps://github.com/alibaba/weex-ui官网:https://alibaba.github.io/weex-ui/#/cn/汇集使用(推荐)import{WxcComponent1,WxcComponent2}from"weex-ui"为了不打包所有的组件,你需要使用 babel-plugin-component 来只 查看详情
weex入坑指南
weexcreatenewtest 然后在某个阶段卡死, 解决方案:在路径下创建新建文件夹,并命名为项目的名称。 查看详情
weex快速创建工程helloworld
开发环境根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。开发IOS应用需要MacOS系统开发Android应用,Ma... 查看详情
基于weex的flutter项目框架
参考技术A最近在做的一个项目,项目的前期采用Weex开发。但是随着交互复杂度的增加,Weex一处开发多处多处运行的特征并没有很好的体现,相反很多时候我们还是需要做IOS和Android的适配。如今火热的Flutter相比Weex和Rn来说,给... 查看详情
weex环境搭建
...维码看到we文件的页面。-h 是热更新weexinit即是初始化一个项目 查看详情
weex项目开发
开发环境配置:http://www.cnblogs.com/crazycode2/p/7822961.html1.weexcreateproject 与 weexinitproject 的区别>个人理解weex-toolkit可以用来开发时调试,weexpack用作打包,但是怎么把weex-toolkit开发完成的文件放进weexpack进行打包呢>你... 查看详情
如何将原有weex项目改造成vue版本
...决的问题将内核切换成Vue之后,原先基于Weex语法开发的项目将如何过渡到Vue?首先需要明确一点:Weex原有的前端框架也会继续存在于WeexS 查看详情
weex用阿里矢量图
首先这段代码来自zwwill在github上的weex网易严选项目他是在utils下封装了一个方法letutilFunc=initIconFont()letdomModule=weex.requireModule(‘dom‘);domModule.addRule(‘fontFace‘,‘fontFamily‘:"iconfont",‘src‘:"url(‘http://at.alicdn.c 查看详情
weex学习第一章:环境搭建(代码片段)
1、安装Node.js//查看版本node-vnpm-v2、安装Java下载链接:https://www.java.com/zh_CN/3、安装Git下载链接:https://git-scm.com/4、安装weex-toolkitnpminstallweex-toolkit-g//查看版本weex-v 5、安装webpacknpminstallwebpack-g6、安装android- 查看详情
用androidstudio运行weex项目错误汇总(代码片段)
在本地使用命令weexrunandroid运行weex项目时报错:“Error:Noandroiddevicesfound.”,后面发现这是个坑,需要使用androidstudio启动项目来运行。在本地下载安装好androidstudio环境和工具后,将weex项目下platforms-》android文件引入(如果是ios则... 查看详情
最新weex中使用vue-router
...;1.项目的目录结构 2.首先,打开src文件,这里默认只有一个index.vue,其他是我加进去的,在src下加入router.js文件 route 查看详情
从git上拉下来的严选weex项目demo(代码片段)
项目地址 https://github.com/zwwill/yanxuan-weex-demo在package.json里"author"之类后面加上"private":"true",防止提示Norepositoryfield.#:yanxuan-weex-demonow$npminstall#:yanxuan-weex-demonow$npmrunbuild>[email 查看详情
weexpack使用教程
...快速搭建应用原型的利器。它能够帮助开发者通过命令行创建weex工程,添加相应平台的weexapp模版,并基于模版从本地、GitHub或者weex应用市场安装插件,快速打包weex应用并安装到手机运行,对于具有分享精神的开发者而言还能... 查看详情
入选apache孵化器4年多,阿里捐赠的weex项目未能成功毕业
近日,由阿里开发并捐赠给Apache软件基金会(ASF)的Weex项目未从Apache孵化器成功毕业,目前Weex的孵化器状态已更改为「retired」。根据Apache软件基金会「GuidetoRetirement」,retirement(退出)不代表项目停止维护,仅表示不再在Apache... 查看详情
vue.js作者尤雨溪加盟weex团队担任技术顾问
...三端,Weex又壮大了!Weex是阿里巴巴今年6月底正式开源的一个项目,旨在提供拥有Web开发体验和Native性能的跨平台开发工具 查看详情