上一篇写了Weex的开发环境搭建Weex开发之-开发环境搭建，接下来我们来写一个Hello Weex 首先我们创建一个Weex项目,使用下面的命令 weex create WeexDemo 创建好后我们在...e); alert('title clicked.'); } } } 然后我们cd到hello 目录下，执行命令生成JS文件给iOS调用 weex...compile helloWeex.vue dist Weex是如何集成到iOS的这里就忽略了，网上有很多集成的文章。...奇怪了，百度搜索了一番找到了答案 iOS14适配：Xcode12+weex图片不显示问题 于是按照这样的方法修改好后，在怀着激动的心运行。...参考 Weex入门与进阶指南 iOS14适配：Xcode12+weex图片不显示问题
计划本系列文章包含以下内容： Weex入门准备，包含学习资料、学习途径等； Weex项目实践，使用Weex开发一个原生的界面； Weex源码分析系列； Weex的本地接入封装； 针对Weex不够高的地方进行源码修改...二、Why is Weex？ 这个章节本来是想忽略的，因为说Weex那肯定绕不开ReactNative，而这个章节也极易引起口水；但是不写总觉得技术选型没有做到位。...三、What is Weex？...从Weex官网介绍我们可以看出几个关键词：跨平台、高性能、Vue、W3C标准、三端一致；以上关键词我们会在逐渐的深入了解过程中逐步体会到。 放一张Weex整体架构图：可以参考下面备注。 ?...中搜索weex，并且设置对vue的支持。
1、前言 经过前面几篇Weex源码分析系列文章，相信大家对Weex是什么、Weex能带来什么、Weex是如何工作的等几个问题已经有了自己的答案。...如果还有疑惑的话强烈建议大家回过头再去看看之前的文章； 基于Weex0.16.0版本； 2、Weex的核心能力 诚然，Weex为了方便开发者提供了各种方便的组件便于傻瓜式开发，但随着我们对Weex剥丝抽茧...，我们更能学习到Weex的精髓：如何以新思路解决老难题？...Weex动态化、跨平台、结合Native的设计不仅解决了需要频繁发版的问题，同时在一定程度上可以节省人力成本。在技术选型上RN与Weex的思路都没有问题，也都坚信这条道路都可以走得通。...欢迎持续关注Weex源码分析项目：Weex-Analysis-Project
1、前言 在前两篇文章中我们结合源码学习了Module、Component的注册、调用、回调等流程，相信大家一定收获颇多，对Weex的理解也一定愈加深入。...那么本篇文章我们分析Weex的渲染流程，来看一看我们写的Js文件是如何在Native端变成Android里View的。...2、Weex渲染过程 2.1 渲染触发点 在Activity中我们开个某个Weex页面使用的是WXSDKInstance中的render方法，最终也是按照常规套路通过WXBridge调用Js继续处理。...，因为我们虽然写的是Js代码但是实际显示的确是Native控件； 那么Weex比原生多的流程就是：与V8的交互、关于Dom的解析与生成、设置属性与赋值（扩展）等； 5、总结 Weex渲染流程的分析难度比...； 在Weex渲染流程的分析中我们第一次接触到了Weex中的线程切换，之后会细说； 建议大家都实际跟踪下Weex的源码，里面有很多可以学习的细节； 欢迎持续关注Weex源码分析项目：Weex-Analysis-Project
本文作者：IMWeb 黄龙 原文出处：IMWeb社区 未经同意，禁止转载 第一个问题： weex是啥？...我也不知道，但是我是在 https://github.com/Laisly/weex 这里找到了这个，其实可以先不用管，不用下载这个也可以。后续当作weex的例子来看倒是挺好的。...第一步：安装android运行环境 到这里下载安装 http://alibaba.github.io/weex/download.html 这里把二维码也偷过来，也可以扫这个，当然这个可能是旧的。...第二步：安装 weex-toolkit npm install -g weex-toolkit 第三步：跑起来 新建一个文件比如 hello.we <text...weex hello.we 打开weex Playground App 扫码。这时可能会出现两种情况 一种情况是成功： ? 不要扫这个二维码，扫了也没用 另一种情况是报错： ?
常用的几个网址 官方 所有组件 插件市场 Weex Ui 安装运行 weex-toolkit 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能。...npm install weex-toolkit -g --registry=https://registry.npm.taobao.org 创建项目 weex create demo001 进入项目...cd demo001 运行项目 npm run web iOS端 使用 下载源代码 git clone https://github.com/apache/incubator-weex.git incubator-weex...–>ios–>sdk–>WeexSDK 目录放到项目里 incubator-weex–>pre-build–>native-bundle-main.js文件放到项目里 这里之所以不用pod引用 是因为WXStorageModule
第一个问题： weex是啥？...我也不知道，但是我是在 https://github.com/Laisly/weex 这里找到了这个，其实可以先不用管，不用下载这个也可以。后续当作weex的例子来看倒是挺好的。...第一步：安装android运行环境 到这里下载安装 http://alibaba.github.io/weex/download.html 这里把二维码也偷过来，也可以扫这个，当然这个可能是旧的。...第二步：安装 weex-toolkit npm install -g weex-toolkit 第三步：跑起来 新建一个文件比如 hello.we <text...weex hello.we 打开weex Playground App 扫码。这时可能会出现两种情况 一种情况是成功： ? 不要扫这个二维码，扫了也没用 另一种情况是报错： ?
1、前言 经过前面五篇文章的源码分析及总结，我们对Weex的整体架构及核心源码都有了清晰的认识。本篇文章主要总结我在Weex SDK源码阅读时觉得可以借鉴的细节。...备注：本文侧重讲Weex SDK源码级别的可借鉴细节，对大方向上的可借鉴点比如动态化+Native思路、一项技术完整的生态等方面可以参考上一篇文章《深入Weex系列（八）之Weex SDK架构分析》。...2、建造者模式 在使用Weex之前我们都会进行Weex SDK的初始化，对于Weex SDK它的辅助配置类就使用到了建造者模式。...3、So的加载 So的成功加载对Weex的运行至关重要，毕竟Weex需要V8引擎执行Js与Native的交互，源码中也可以看出So没有加载成功则Weex的各个模块不会执行。...欢迎持续关注Weex源码分析项目：Weex-Analysis-Project
一、介绍 weex 是阿里出品的一个类似RN的框架，可以使用前端技术来开发移动应用，实现一份代码支持H5，IOS和Android。...最新版本的weex已默认将vue.js作为前端框架，而weex-hacknews则是weex官方出品的，首个使用 Weex 和 Vue 开发的 Hacker News 原生应用，在项目中使用了 Vuex...因此这个应用可以作为weex-vue开发的典范，分析该项目代码可以了解如何使用weex技术栈进行开发，实现同一份代码在 iOS、Android、Web 下都能完整地工作。...1、下载 下载地址：https://github.com/weexteam/weex-hackernews 使用git clone项目或者直接下载zip包 2、安装 安装依赖： npm install...官方demo weex-hackernews代码解读(下）
weex 是阿里出品的一个类似RN的框架，可以使用前端技术来开发移动应用，实现一份代码支持H5，IOS和Android。...而weex-hacknews则是weex官方出品的，首个使用 Weex 和 Vue 开发的 Hacker News 原生应用，在项目中使用了 Vuex 和 vue-router等官方组件。...本文会分析weex-hacknews的代码，学习如何使用weex进行开发，本文是第二部分，第一部分见(http://www.cnblogs.com/xiaoqi/p/weex-hackernews-code-part1...几个关键点： @click 处理点击事件，jump是在入口程序里mixin的router跳转函数 weex里，text用于显示文本元素，可以理解为html里的span 7.2.2 story 组件...loadMoreStories 则是加载更多数据，list列表事件，下滑到底部时触发 其他页面类似，这里就不一 一介绍了 三、小结 weex-hacknews的代码分析就告一段落了，总体感觉：
1、前言 在上一篇文章中我们介绍了Weex SDK源码中可借鉴的细节，那么现在的Weex SDK已经是最优的吗？作为技术RD，我们心中一定要有敬畏：艺无止境，学习的过程中逐渐反思，寻找最优解。...那么我们今天就来说说Weex SDK中有哪些可以优化的细节。...这里提供两条解决途径供参考： 对Weex进行异步初始化，绝大多数应用使用Weex不会是整个App都由Weex完成，那么只要能保证Weex的初始化在使用之前完成即可；这点很容易做到毕竟App都有闪屏的时间可以利用...； 参考EventBus不同版本的改进，我们也可以将Weex的运行时注解改为编译时注解，这样就将在运行时的反射工作挪换到编译时，这种方式显然更好，也不需要再进行异步初始化； 3、适配的问题 对于Weex...不过这条属于苛责，之前也总结过对于Weex来说我们实际上只需要保存其Js引擎与Native的交互能力即可，别的都属于Weex为了吸引开发者而做的简略能力。
本篇内容： Weex的项目结构 npm webpack ESLint Devtools 一、Weex的项目结构 通过weex init WeexDemo创建一个WeexDemo...下图是创建weex时默认生成的package.json： ?...": "^0.2.64", "weex-loader": "^0.4.1", "weex-vue-loader": "^0.2.5", "url-loader": "^0.5.7...五、Devtools Weex 开发了一套 Weex Devtools，它与 Chrome Devtools 极为相似，学习成本很低，目前只支持在 Chrome 浏览器里使用。...在终端输入weex debug指令（最新版本 starter kit 添加了 npm run debug 支持），会弹出 Weex Devtools，打开 Playground，扫描 Devtools
我是按照http://alibaba.github.io/weex/doc/demo/modal.html 这个网址的内容进行weex学习的，这只是笔记。...Weex由， : required....Just uses HTML syntax and describes the structure of a Weex page, which is build upon several tags.... module.exports = { data: { title: { size: 48, value: 'Alibaba Weex... Hello Weex!
在Weex开发中不可避免的需要导入图片，在此介绍几种通用方法。 Weex图片资源存在形式？ 1、每个客户端保存一份图片资源，统一命名。...2、图片资源保存在服务器上，在渲染Weex页面过程中异步下载图片。 3、保存在weex工程中。这样只需要一份保存，多端使用。 如何选择？ 首先看公司氛围，如果客户端够统一，那么可以考虑第一种方式。...工程 1、创建weex工程 weex init WeexImageDemo 2、拷贝图片到Weex工程中，Demo放在了....": "^0.2.64", "weex-loader": "^0.4.1", "weex-vue-loader": "^0.2.5", "url-loader": "^0.5.7..." } 环境配置完成，下一步就是在Weex中使用，为了方便各个页面调用，将调用方式抽取出来，命名为config.js。
目前负责Weex框架以及上层业务产品的测试工作。 ---- ? ? ? ? ? ? ? ? ? ? ?
首先要吐槽下，同为混合开发框架，React Native的技术社区完善不知道甩了weex几条街，但还是希望自己的经验能为weex开发者带来一些帮助 weex 集成过程在官网已经有比较详细的介绍（官网链接...） 项目在立项初，决定使用 weex 混合开发框架运行在 iPad 端上。...在项目工程路径下执行 weex run ios 命令后，发现没有 iPad 相关的模拟器，只有 iPhone 相关机型的。总不能和领导说，weex 不支持 iPad 端模拟器调试？...想了想，既然 weex 调用的是 Xcode 中的模拟器，那么肯定会获取到 Xcode 中模拟器列表。如果强行给 weex 调用一个不存在的模拟器会发生什么？...weex提示找不到Device 这时，需要重启Mac，然后在 Xcode 中手动添加模拟器。添加完成后，再次运行 weex 命令，即可正常调用模拟器 ? Xcode手动添加模拟器
在使用weex+vuex发现当前页面修改了state的数据对应页面数据并没有发生改变，本以为是weex对vuex的支持问题，但是绑定data里面的数据也不能实时刷新，最后发现数据没有被包裹...正确的方式 数据响应 myValue:{{test}} 错误的方式 数据不响应 myValue:{{test}} 算是使用weex踩的第一个坑吧，还是文档阅读不仔细
Weex简介 Weex是由阿里巴巴研发的一套移动跨平台技术框架，研发的初衷是为了解决移动开发过程中频繁发版和多端研发的问题。...这样一来，甚至可以使用其他前端框架来驱动Weex，打造三端一致的native应用。 作为一套前端跨平台技术框架，Weex建立了一套源码转换以及Native与Js通信的机制。...Weex表面上是一个客户端框架，但实际上它串联起了从本地开发、云端部署到分发的整个链路。...具体来说，在开发阶段编写一个.we文件，然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle，并将生成的JS bundle上传部署到云端，最后通过网络请求或预下发的方式加载至用户的移动应用客户端...当集成了Weex SDK的客户端接收到JS bun
mask弹层示例 在移动开发中，我们经常会做一些弹框相关的东西，在Weex跨平台框架中，实现mask效果也比较简单。.../div> import {WxcMask} from 'weex-ui...'; let domModule = weex.requireModule('dom') export default { components: {'wxc-mask...项目，部分页面参考了项目网易严选 weex 版本，欢迎star或fork。...如果还有问题，请加群：515980159 移动跨平台技术总结 Weex快速上手 eros快速入门 eros issue eros Q&A
配置weex开发环境时候，首先要进行安装，执行如下命令： npm install -g weex-toolkit@beta 安装完以后，执行命令：weex help 一直提示错误： Error... (C:\Users\Administrator\.wx\modules\node_modules\_@weex-cli_generator@2.0.0-beta.3@@weex-cli... (C:\Users\Administrator\.wx\modules\node_modules\_@weex-cli_generator@2.0.0-beta.3@@weex-cli...最后尝试使用weex安装，即执行命令： weex install async 成功： C:\Users\Administrator\Desktop\tees>weex install async √...运行weex create project， 创建项目 成功。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
即时通信 IM
