【Weex一瞥笔记】

对ionic比较熟悉了,开始围观下其它框架,以比较下各自的优缺点,这次先来的是Weex。

环境搭建

参考Weex官网使用即可:

  • 安装node,使用 Homebrew 进行安装
brew install node
sudo npm install -g weex-toolkit

如果提示.xtoolkit的权限问题,则执行下述命令后再次安装:

mkdir ~/.xtoolkit&&chmod 777 ~/.xtoolkit

安装结束后你可以直接使用 weex 命令验证是否安装成功,它会显示 weex 命令行工具各参数:

weex命令行

环境就这样搭建起来了,看上去还是挺简单的。其中initcreate命令需要注意一下,常规混合式应用使用create创建weexpack项目。当然weexpack项目也可以如下直接装weexpack的CLI,通过该CLI构建及维护项目,只是weex-toolkit已经集成weexpack了,所以也不是必要。

sudo npm install -g weexpack

创建HelloWorld项目

weex create helloWorld && cd helloWorld
npm install

1. 网页测试

运行命令即可:

weex run web

或者npm命令运行:

npm run serve

2. 添加android平台

weex platform add android

一直等待下载安装完成,就会发现platform目录下多了个android的项目目录,然后执行:

weex run android

然后可能会报如下错误:

最终显示为: “BUILD SUCCESSFUL Total time: 10.355 secs => Install app ... adb: failed to stat app/build/outputs/apk/playground.apk: No such file or direct ory”

我们打开platform/android下的app/build/outputs/apk/,发现文件名为weex-app.apk,而不是playground.apk,所以找不到。怎么回事?

我们尝试vscode打开~/.xtoolkit目录,以关键字playground.apk搜索其下的node_modules文件夹,搜索结果如图:

image.png

What?观察发现,都是在weexpack里面的,而且居然写死了名字!也就是说修改配置文件,这里都不会动态变化,同时用Android Studio打开,包名也是固定死是:com.weex.app

我猜这是weexpack的bug吧?应该不会一直存在。根据这个猜测,就临时性的把playground.apk全部替换为weex-app.apk

然后再次执行:

weex run android

会提示没有发现android设备:

Error: No android devices found.

插入android手机或者启动AVD,并再次执行命令,此时应用顺利运行:

image.png

当然也可以用Android Studio来打开运行也是可以的。

简单比较

1. 目录结构

首先比较下weex和ionic的目录,两者还是有点像的,只是weex把ionic隐藏在node_modules里面的wabpack配置开放出来了,这样配置起来就灵活了一些。

weex

ionic

weex

ionic

2. UI

weex好像自身不带UI框架,但是可以很简单地集成weex-ui,而ionic自带UI,两者打个平手吧。此外weex基于vue2+,ionic基于angular2+,都是比较热门的框架,所以组件这方面两者都不用愁。

3. 页面展示

weex有单页和多页面方式,直观就是一个webview显示所有页面,另一个是多个webview各显示一个页面,而ionic只有单webview显示,所以从某种情况来说,多webview时,weex页面切换应该比ionic流畅。

4. 原生支持

可能刚接触不深,weex不建议但可以支持cordova,而且可以较方便集成原生第三方插件。反之,ionic只能支持cordova。只不过若都以cordova方式来开发的话,weex自身html方面的优化应该没有ionic那么好。

因为如其名,匆忙一瞥,对weex了解不深,可能有写错的,欢迎指正。时间不早了,暂时写到这里,到时再补充吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

Android的引用jar包

先来个基础的,在eclips里在工程名上右键->build path->contigure bud path->java build path里有个几个选项 a...

3627
来自专栏好好学java的技术栈

java工程师必备linux常用命令,这篇文章就够了

bash 是一个为GNU计划编写的Unix shell。它的名字是一系列缩写:Bourne-Again SHell — 这是关于Bourne shell(sh)...

2631
来自专栏用户2442861的专栏

IntelliJ IDEA配置Spark使用

第二步下载插件 首先启动intelliJ IDEA:在命令行终端中,进入$IDEA_HOME/bin目录,输入./idea.sh进行启动,进入如下界面,然后...

3911
来自专栏老司机的简书

XCode打framework包、cocoapods库制作及Pods库的二进制切换

近来公司的公共库里有点小问题,但是公共库打成了framework,即使手上有源码也很难调试。网上百度了很多方法,有临时方法,也有比较好的方案,写一篇博客记录下来...

1912
来自专栏菩提树下的杨过

[原创]在msmq3.0中使用http协议发送消息

1.先声明: msmq3.0仅在winxp和win2003以上系统支持,如果windows vista系统,据说已经开始支持msmq4.0了 2.为什么要使...

2918
来自专栏Jacklin攻城狮

学好Mac常用命令,助力iOS开发

在iOS开发的过程中,更多地注重iOS开发的效率,熟练使用Mac终端操作的常用命令,可以让你更好的游刃于iOS繁重的开发中。本文着重介绍常用的Mac终端基本指令...

921
来自专栏Laoqi's Linux运维专列

部署Java项目(Ⅰ)

3095
来自专栏pangguoming

Nodejs开发框架Express3.0开发手记–从零开始

转载请注明出处: http://blog.fens.me/nodejs-express3/ 程序代码已经上传到github有需要的同学,自行下载。 http...

40212
来自专栏猫哥学前班

8102 年的程序员不需要 Hosts 和 Fiddler

加入鹅厂之后,我发现团队都在用一款叫做 Whistle 的工具,起初我以为这只是一款类似 Fiddler/Charles 的普通货色。然鹅,发现下面这两种用法之...

4293
来自专栏ChaMd5安全团队

Web应用渗透测试-本地文件包含

0x01 前言 本文的目的在于帮助网络安全爱好者们去识别和测试LFI漏洞,通过研究去探究LFI渗透测试技术以及LFI漏洞通常在哪里被发现。如果你有更好的奇淫技巧...

40710

扫码关注云+社区

领取腾讯云代金券