关于weex的一些操作

本文介绍如何使用Weex-toolkit及weex-devtool-extension进行Weex应用的开发与调试,包括解决5037端口占用问题、安装调试工具、配置Chrome扩展程序等步骤。

我们使用如下的命令检查5037端口

adb nodaemon server

这里会提示

cannot bind 'tcp:5037'

5037端口被占用了

C:\Windows\System32\cmd.exe /k "D:\nodejs\nodevars.bat"

npm install weex-toolkit -g  安装模块 

安装weex-ui 命令
npm i weex-ui -S

weex debug --调试

weex-devtool-extension
weex debug -v

weex debug src/pages/Home.vue //调试一个页面
weex-devtool-extension
A extension for Weex devtool to improve your debug experience,which equivalent an element tag for debugger page. #download weex-devtools-chrome-0.0.6.zip

#useage

下载crx文件
打开chrome浏览器的菜单,选择【更多工具】->【扩展程序】进入扩展程序界面
把crx文件拖到扩展程序页面里,点击安装(此方法已失效,新版本chrome会自动禁用第三方安装的extension)
下载zip文件,并解压到任意目录。
打开chrome浏览器的菜单,选择【更多工具】->【扩展程序】进入扩展程序界面,并勾选开发模式
选择【加载已解压的扩展程序】选择你刚才解压出来的那个目录【weex-devtool-extension】完成安装
确保你的weex devtool的版本在0.2.46以上(通过weex debug -v查看)如果版本过低请使用npm install -g weex-toolkit升级。
打开weex debug,连接设备调试,建议ElementMode选择vdom。
打开debugger页面。打开devtool调试器,点击weex tab
###深度检查工具 weex tab的下方有一个Node Deep Validator 用于检查当前Node tree的一些过深的节点和需要优化的情况(目前是div嵌套)   点击validate按钮会对当前的Node tree进行深度检查
,超过警戒值的节点的整个路径上的节点都会标记高亮(警戒值可以通过下面那个输入框设置 默认是10层)   另外 DIV嵌套的情况(即一个div套了一个div且这个div是其唯一子节点)也是会标记为高
亮(即使深度没有超过警戒值)
P.S. Node tree里的deep属性是最大深度level的意思 本身是我了我自己调试用,所以不要依赖这个属性(标记div嵌套的时候我做了处理 那个值不是真实值)
 

### Weex 框架使用指南及开发文档 Weex 是一个由阿里巴巴开源的跨平台开发框架,旨在通过一套代码实现多端(iOS、Android 和 Web)运行的应用程序。以下是关于 Weex 框架的相关信息和使用方法的详细介绍。 #### 1. Weex Toolkit 的功能与优势 Weex Toolkit 是为 Weex 开发者提供的强大工具集,能够帮助开发者更高效地进行应用开发和部署。无论是新手还是经验丰富的开发者,都可以从中受益。它提供了从项目初始化到调试、打包等一系列功能,极大简化了开发流程[^1]。 #### 2. Weex SDK 技术特点 Weex SDK 是 Weex 框架的核心组件之一,支持开发者构建跨平台应用程序。其技术特点包括高性能渲染、轻量级设计以及良好的兼容性。对于 iOS 应用的开发,Weex SDK 提供了详细的文档指导,帮助开发者快速上手[^2]。 #### 3. 学习 Weex 的步骤 对于初学者而言,学习 Weex 的最佳方式是先浏览官方文档,获取对框架的基本了解。随后可以通过运行 Playground 示例代码来加深理解。以下是一个简单的学习路径: - 浏览官方文档,了解 Weex 的基本概念和架构。 - 在本地环境中运行官方提供的 Playground 示例代码。 - 结合实际项目需求,逐步扩展知识面[^3]。 #### 4. Android 平台上的 Weex 容器使用 在 Android 平台上,推荐使用 EMAS-WEEX 而不是官方的 Weex SDK。EMAS-WEEX 提供了更为完善的依赖管理和初始化操作,能够更好地支持开发者的实际需求。此外,EMAS-WEEX 还提供了一些额外的功能和优化,有助于提升开发效率[^4]。 #### 5. 混合应用开发中的 Weex Weex 框架非常适合用于混合应用开发,因为它可以将原生代码与前端技术相结合,从而实现性能和开发效率的平衡。然而,初学者可能会遇到一些配置上的困难,建议按照以下步骤进行: - 确保环境搭建正确,包括 Node.js、npm 或 yarn 的安装。 - 使用 Weex Toolkit 初始化项目。 - 参考官方文档和社区资源解决常见问题[^5]。 ```javascript // 示例:创建一个简单的 Weex 页面 <template> <div class="container"> <text class="title">Hello Weex!</text> </div> </template> <style> .container { flex-direction: column; justify-content: center; align-items: center; background-color: #ffffff; } .title { font-size: 40px; color: #000000; } </style> <script> module.exports = { data: function() { return {}; } }; </script> ``` #### 6. 官方文档与社区资源 为了更好地掌握 Weex 框架,建议参考以下资源: - 官方文档:[https://weex.apache.org/cn/](https://weex.apache.org/cn/) - GitHub 仓库:[https://github.com/apache/weex](https://github.com/apache/weex) - 社区论坛:参与讨论并解决问题 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值