weex30秒创建第一个weex项目

寒小枫 寒小枫     2022-12-05     219

关键词:

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性能的跨平台开发工具 查看详情