weex框架 - CSDN
精华内容
参与话题
  • 阿里Weex框架快速体验与环境搭建

    万次阅读 2019-09-29 12:35:26
    目录阿里Weex框架快速体验与环境搭建weex sdk集成到Android工程weex服务项目搭建Weex优雅的“降级”到 HTML51. 前言Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持...

    本期六篇文章目录(可点击跳转)

    一. 阿里Weex框架快速体验与环境搭建

    二. weex sdk集成到Android工程

    三. weex服务项目搭建

    四. Weex优雅的“降级”到 HTML5

    **五. weex项目实战篇(一) **

    **六. weex项目实战篇(二) **


    1. 前言

    Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。
    对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者可通过Weex官网申请内测。
    开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

    2.环境搭建

    1)因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js。
    第一步:下载安装文件
    下载地址:官网http://www.nodejs.org/download/
    这里用的版本是(node-v6.2.0-x64.msi)
    第二步:下载完成之后,双击 node-v6.2.0-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面,一路next完成安装。
    第三步:安装npm相关环境。
    在命令行中切换到nodejs目录
    这里写图片描述
    键入命令:npm install express 回车等待安装express…
    键入命令:npm install jade 回车等待安装jade…
    键入命令:npm install mysql回车等待安装mysql…
    这里写图片描述

    2)在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序

    npm install -g weex-toolkit
    

    如图所示:
    这里写图片描述
    在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后,你应该看到如下内容显示:
    这里写图片描述
    (请使用 weex --version 命令检查你的weex-toolkit版本是否大于 0.1.0)
    至此,环境已经全部安装完毕。

    3.weex快速体验

    1)我们先编写一个列表项,命名tech_list.we文件( .we 是Weex推荐的后缀名 )

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    2)在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we
    

    如图所示:
    这里写图片描述
    成功后,你系统默认浏览器的窗口将自动打开以显示如下内容。
    这里写图片描述

    3)现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端,切换到保存tech_list.we文件的目录,执行:

    weex tech_list.we --qr -h {ip or hostname}
    

    如图所示:
    这里写图片描述
    此二维码用来后面扫描。

    4)安装官方demo:playground.apk
    下载apk文件,Weex Playground
    下载安装后点击App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。
    这里写图片描述

    这里我需要强调,这个列表是完全由native view(不是Webkit)来进行渲染的,相比Webkit渲染的界面,你的App能获得更快的页面加载速度和更少的内存开销。

    现在你能尝试变更一些 tech_list.we中的内容,在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化,这个特性常被称为 Hot-Reload ,希望能帮助你更方便的进行Weex开发。

    5)变化布局
    我们更改tech_list.we的内容

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">helloWorld</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we
    

    奇迹出现了,不需要重新部署,只要本地调整,app页面就改变了,更后台部署一样。
    这里写图片描述

    4.其他

    之前做了一年基于luajava实现的跨平台,性能跟安全问题都解决了,后面看了一样聚划算的luaview,跟他们应该差不多,我的感受是开发效率是个问题,没有可视化布局,不能debug,开发效率低。
    其实跟weex一样,如果有特殊性能要求的地方,就使用原生代码写,然后前端脚本语言调用,思想都是差不多的。

    5.一些书籍

    项目demo参考:github下载地址:https://github.com/cyforever123/weex-hongkong

    Weex快速上手教程
    Weex中文文档


    如有错误欢迎指出来,一起学习。
    在这里插入图片描述

    展开全文
  • 阿里妹导读:本文主要为大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 Weex Ui 层建设的一些经验,希望能对大家有所启发。 文章较长,首先放上 Weex Ui 的...



    阿里妹导读:本文主要为大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 Weex Ui 层建设的一些经验,希望能对大家有所启发。


    文章较长,首先放上 Weex Ui 的开源地址,欢迎大家提PR,同时也可以通过 Star 来表示你的喜欢。(https://github.com/alibaba/weex-ui)



    分享嘉宾:侑夕 阿里巴巴高级前端工程师

    Why Weex ?

    Weex vs H5

    我们为什么选择Weex作为我们首要的跨端开发技术呢?

    写过H5的同学肯定会被它的简单高效发布即更新一条URL可适配多端等这些所吸引,但写过 Native 的同学肯定也会被 Native 的富交互性能体验可调用原生能力可管理内存等特性给我们的业务带来更好的体验。

    快和体验想同时兼得

    飞猪前几年也一直在这个方向上面探索。

    包括最开始的 Hybrid 开发,通过 Bridge 提供部分 Native 能⼒来提升 H5 体验,譬如我们在H5里面可以直接获取App的定位信息、使用相机、播放视频、导航跳转等能力,业界也有Cordova、Ionic、Meteor这些成熟的方案。


    还有利用离线包体系通过提前将资源⽂件下载,访问时路由拦截加载本地资源,让我们的H5页面可以达到秒出、动态更新、弱网可用效果,内部有手淘Zcache、飞猪信鸽、支付宝九州这些成熟的系统。

    等到了16年左右,跨平台开发技术逐渐火起来后,一种全新的开发思路吸引这我们,也即用JS来写Native,⽤ Web 的开发体验构建⾼性能、可扩展的 Native 应⽤,同时真正获取上述所说的体验

    业务对比分析


    那么为什么会选择 Weex 呢?其实和飞猪业务特点很有关系,同时又可以很好解决这些痛点。

    飞猪业务迭代速度快,也需要快速上线;同时很多时候景点和海外弱网使用,同时要体验良好;

    其中最重要的一点是多容器接入,适配飞猪、手淘、天猫、支付宝,也即我们一次重要业务的开发需要一个iOS、一个Android同学来开发两端,同时由一个H5同学来开发兼容手淘、支付宝、UC的 Web 版本,也即一次业务发布涉及到多端同时开发、上线。



    Weex 其实很好的解决了上述的一些问题,包括在飞猪、手淘、天猫 Weex环境下完全 Native体验,同时Bundle 资源大小较 H5 小很多,加上富交互体验、长列表性能好非常适合商品列表页面和双十一场景,最重要的是真正让我们从3个人的开发减少到了1个人,其他2个人可以去做更多有意义的事情。

    接下来我们可以从下面这个展示来看Weex和H5业务的一个展示、数据对比:


    这是一个业务逻辑复杂的页面,包括筛选、排序、日历选择、收藏、长列表、业务逻辑也很复杂的页面,重构成Weex以后,我们首屏可用时间降级68%、Bundle大小直接减少了73%,由于体验变好变快、让我们页面转化率居然提升了14.5%。


    以上也就是我们为什么选择Weex作为我们跨端开发的一些重要原因,接下来介绍的是飞猪的weex 技术体系。


    飞猪 Weex 技术体系

    架构图


    可以从底层一直往上看,底层由我们APP的Framework / Libraries / OS Kernel等组成,我们在Weex的上下层和手淘、天猫一起设计出一套统一的Api设计,包括接口请求、数据埋点、路由跳转、网络状态、支付功能、导航栏定制等这一系列的通用服务,在 Weex 上面我们封装了Weex Ui组件库、业务组件库、UPX搭建营销模块、还有抹平多端差异的 Util 函数库,这样在我们上层可以长出我们众多的业务。

    由于 Weex 在我们这边和 H5 一样,都是当做页面来发布、而不是一个 View 里面写很多子View来组织,同时也很不建议大家使用vue-router来管理,更多的使用多页面来跳转体验会更好。

    说到构建发布流程,我们统一通过Clam来对我们项目进行初始化、构建、debug、预发、发布等工作,同时在上线方面直接通过Awpp命令来直接发布页面到CND,同时可以通过信鸽将离线资源推送到APP,运营同学也可以直接通过搭建的方式将页面发布出去。

    Weex 页面如何在飞猪、手淘、支付宝进行多端投放 ?

    那你可能会问 Weex 页面如何在飞猪、手淘、支付宝进行多端投放呢?


    第一种为通过前端 URL 参数决定渲染为 Weex 还是 H5

    xxxx.html?_wx_tpl=xxxx.js:前面为降级时的 H5 地址, 后面 _wx_tpl 带的参数代表 Weex JS 地址, 当容器发现 URL 带有 _wx_tpl 参数时, 会下载后面的 JS 地址然后用 Weex 容器渲染。

    第二种为通过服务端返回内容决定渲染为 Weex 还是 H5

    xxxx?wh_weex=true:前面可以是 JS 地址也可以是 H5 地址,后面是固定的参数 wh_weex=true,当容器发现 URL 带有 wh_weex=true 时, 会请求前面的 xxxx 地址, 如果发现响应的 mime type(HTTP header content-type)为 application/javascript,则使用 Weex 渲染返回的内容, 否则使用 WebView 渲染成 H5。

    飞猪 Weex 业务大盘




    Weex 并不是像外界某些人传言说没有什么公司在使用Weex的,反而是超过你的想象,以上是我们这边17年12月份前的一个相关weex页面的一览,大家可以在飞猪、手淘、支付宝里面找到这些页面,均是一份页面同时投放到多端的。


    什么业务适合用 Weex ?

    包括众多的营销业务、首页、频道、搜索列表、正向流程、简单详情、富交互页面都是很适合使用Weex来开发的,同时在我们这边也有一个对应的原则包括 展示类项目优先使用 Weex、重构/新项目优先使用 Weex、深度垂直类目尝试使用 Weex。

    Weex 不适合复杂场景 ?


    大家可以看下如下这几个场景的视频演示:

    大家可能会觉得Weex不适合复杂的场景,其实也不一定,通过很多方式是可以做到复杂场景的支持,包括双11超长列表滚动,30多屏数据,快速滚动很顺滑。


    同时包括逻辑异常复杂、多组件的国际机票列表页,Weex 同样也可以胜任;包括图3富交互的使用场景,粘手效果的丝滑拖动,快速滑动,动态隐藏头部等等功能都是可以做到的。

    通过在我们这边很多业务场景的使用 Weex 踩坑 最佳实践的积累,其实有很多东西可以沉淀下来 通过封装的方式给后续其他业务使用,这样让后面的业务可以达到快速生产,这也是我们建议Weex Ui 组件体系一个很大的原因。

    Weex Ui 的发展和开源

    为什么要建立 Weex Ui 组件库体系 ?

    • 在引入 Weex 初期,通过 Weex Ui 让未接触 Weex 的同学对其编写有借鉴作用

    • 提炼业务中的公共组件,便于直接引用,提高大家开发效率

    • 业务规范、视觉规范、最佳实践的及时同步

    • 将 Weex 业务中的疑难杂症通过组件封装,对外只暴露简单逻辑


    Weex Ui 一览

    经过一年多的建设,我们一步一步将 Weex Ui 优化,整理,最终进行了开源,通过下图可以看到 Weex Ui 是怎么来的。


    目前 Weex Ui 组件库包括7大类31个成熟的组件,同时并不是直接开源给大家使用,而是在内部已经使用了1年多后稳定后开源给大家使用,大家可以通过手淘、飞猪、任何浏览器扫码进行预览。


    同时一个开源库的文档其实是后续发展中用户是否能快速上手的一个很大因素,Weex UI

    包括组件说明、使用规则、Demo展示、详细使用API、升级文档等等,可以让你快速使用。


    Weex Ui 是不是只适合电商体系呢?

    近期我们队 Weex Ui的使用者做过一次问卷调查,结果让我们很惊喜,并不是只有电商在使用,还很很多其他的体系在使用,包括工具类、企业应用、文娱、自媒体、新闻这些其实都是有使用的。


    组件化搭建你的 Weex 页面

    很多时候基础建设,其实为了给业务开发来加速,譬如接下来这个飞猪专线的页面就是通过我们的Weex Ui组件库来搭建起来的。


    然而基础组件只能够解决通用组件的问题,其实还包括业务组件这一块,也即上图中的your-item组件, 也即我们下面要说的 Weex 业务组件化。


    除了基础库,在 Weex Ui 层还可以做什么 

    Weex 业务组件化


    业务组件库更多是前端、后端、设计师之间的一个“约定”,通过一定规范共同让业务组件变得可复用。

    也即Weex代码中直接引入此组件,直接插入后端返回的原始数据,就可以生成设计师所设计出的商品卡片,最终可以做到支撑任意 Weex 业务模块 投放到 任意 Weex 页面 中 任意位置 的能力

    那么应该怎么做呢?


    可以自动化测试 Weex 吗 ?

    答案是可以的,之前通过macacajs测试框架和Weex结合来弄,通过自定义一连串的手势、事件,最后通过用json来表明执行的顺序,可以做到: 

    1、安装app

    2、自动打开native页面

    3、登录,自动输入

    4、自动测试飞猪度假首页,包括点击、跳转、滑动、下拉刷新等操作

    5、自动测试飞猪专线、包括左滑、右滑操作

    6、自动测试Weex Ui,包括打开组件、点击交互逻辑

    7、自动各个页面运行截图,并将测试情况邮件给测试方



    Weex 无障碍优化

    Weex 其实也是支持无障碍的,也即让盲人在最短的时间内通过最快的方式找到自己想要的信息。

    同时当盲人访问我们Weex页面时候,让他们对 Weex 是可感知的、可操作的、可理解的、同时页面也是鲁棒的。



    无障碍在Weex实现起来是很简单的,譬如如下实现:


    飞猪 Weex 双十一性能优化

    每年的双十一也就是我们Weex的一个战场,几乎所有会场页面均由Weex实现,如何让用户丝滑的逛我们的页面呢?期间我们也将之前很多经验包括优化技巧放到了双十一的会场页面,包括一些经验的整理。



    回到开源

    其实 Weex 可以在很多很多地方使用,包括各种应用场景,这也是我们开源Weex Ui 的一个很大原因,给大家更多 Weex 可实现功能的输入,最佳实践实现的参考。同时外部开发者也急需要一套成熟组件库来提高开发效率。

    开源地址:https://github.com/alibaba/weex-ui

    从2017年9月30号开始,我们一直在弄Weex Ui 的开源发展,包括共建 weex-toolkit 让其更好支持Weex Ui、欠缺组件的补全 + 现有组件的增强、继续扩展边界 + 轻舟解决方案 UI 库、引入更多富交互体验 + 组件的无障碍优化、简易的使用方式 + 详细的中英文档等等工作。

    其实更多的是想大家一起参与进来,共同促进我们 Weex 的发展,说到共同促进,那么你可以做什么呢? 其实可以做很多很多事情:


    晚上圆桌会议 - Weex 组件方向讨论总结

    1. Weex 原生组件的封装应该注意什么?

    • 通用性,只有多个业务同时在使用,同时具备可抽离性特性的组件,譬如Video/TabBar/TitleBar/ImageUpload 这些在 Native中成熟的组件

    • 稳定性,Native 组件不像 weex 上层的组件可调节性大,所以需要注意好 Native 组件一定需要没有Bug,防止修复和更新麻烦,同时 Native 组件一开始应该将大部分情况做成可配置化,防止频繁更新,导致需要适配很多版本

    • 原子性,不建议一个组件同时做很多事情,应该是单一的功能,然后通过搭配的方式来得到更多功能


    2.weex 组件开发和实践过程中的一些经验?

    • 811原则,默认80%的功能应该是不需要用户配置很多参数,10%的地方用户可以通过配置一些参数来达到目的,10%的稀有情况可以暂时不考虑,可能这里会花费很多时间开发,所以可以等到有业务需要使用时候,再更新上去

    • 统一收口原则,为了避免后续组件变成一个大杂烩,后续迭代视觉交互、新功能的增加需要将通用性考虑进去,这里需要一个人统一来收口、开发维护此组件,可以避免很多“业务特性”来干扰组件的可用性

    • 性能体验的优化,Weex 组件比页面的编写更应该保证他的性能体验

    • 信任机制:很多时候别人使用你的组件一个很大原因是由于相信你的组件没有问题,是稳定的,同时后续会常常维护的


    3.未来跨端开发会是怎么样的?

    • Native的布局方式需要向H5的开发灵活性学习,逐步使用自动布局来实现,同时引入弹性思路开发,避免绝对计算

    • 数据绑定方面会越来越便捷,譬如和MVVM思路一样,数据变化后,视图立马修改,而不是手动去触发

    展开全文
  • Weex框架快速体验与环境搭建

    千次阅读 2017-02-22 15:22:27
    1. 前言Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。 对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,...

    1. 前言

    Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。
    对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者可通过Weex官网申请内测。
    开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

    2.环境搭建

    1)因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js。
    第一步:下载安装文件
    下载地址:官网http://www.nodejs.org/download/
    这里用的版本是(node-v6.2.0-x64.msi)
    第二步:下载完成之后,双击 node-v6.2.0-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面,一路next完成安装。
    第三步:安装npm相关环境。
    在命令行中切换到nodejs目录

    键入命令:npm install express 回车等待安装express……..
    键入命令:npm install jade 回车等待安装jade…….
    键入命令:npm install MySQL回车等待安装MySQL……..

    2)在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序

    npm install -g weex-toolkit1
    

    如图所示:

    在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后,你应该看到如下内容显示:

    (请使用 weex –version 命令检查你的weex-toolkit版本是否大于 0.1.0)
    至此,环境已经全部安装完毕。

    3.weex快速体验

    1)我们先编写一个列表项,命名tech_list.we文件( .we 是Weex推荐的后缀名 )

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">JavaScript</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    2)在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we1
    

    如图所示:

    成功后,你系统默认浏览器的窗口将自动打开以显示如下内容。

    3)现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端,切换到保存tech_list.we文件的目录,执行:

    weex tech_list.we --qr -h {ip or hostname}  //注意: 这里的ip或域名,不需要大括号
    

    如图所示:

    此二维码用来后面扫描。

    4)安装官方demo:playground.apk
    下载apk文件,Weex Playground http://alibaba.github.io/weex/download.html

    下载安装后点击App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。

    这里我需要强调,这个列表是完全由native view(不是Webkit)来进行渲染的,相比Webkit渲染的界面,你的App能获得更快的页面加载速度和更少的内存开销。

    现在你能尝试变更一些 tech_list.we中的内容,在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化,这个特性常被称为 Hot-Reload ,希望能帮助你更方便的进行Weex开发。

    5)变化布局
    我们更改tech_list.we的内容

    <template>
      <div class="container" >
        <div class="cell">
           <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
           <text class="title">helloWorld</text>
        </div>
      </div>
    </template>
    
    <style>
      .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
      .thumb {width: 200; height: 200; }
      .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
    </style>
    

    在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

    weex tech_list.we
    

    奇迹出现了,不需要重新部署,只要本地调整,app页面就改变了,更后台部署一样。

    4.其他

    之前做了一年基于luajava实现的跨平台,性能跟安全问题都解决了,后面看了一样聚划算的luaview,跟他们应该差不多,我的感受是开发效率是个问题,没有可视化布局,不能debug,开发效率低。
    其实跟weex一样,如果有特殊性能要求的地方,就使用原生代码写,然后前端脚本语言调用,思想都是差不多的。

    5.一些书籍

    Weex上手教程
    Weex中文文档

    展开全文
  • weex前端框架搭建

    2020-06-28 13:07:52
    1.1 环境准备 ... 1、下载安装包 ... 根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包安装 ... .msi和.zip格式区别: ... .msi是Windows installer开发出来的程序安装文件,它可以让你安装,修改,卸载你...

    1.1 环境准备

    • Nodejs安装(参考https://www.jianshu.com/p/13f45e24b1de

      1、下载安装包

      下载地址:https://nodejs.org/zh-cn/download/

      根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包安装

      .msi和.zip格式区别:

      .msi是Windows installer开发出来的程序安装文件,它可以让你安装,修改,卸载你所安装的程序。说白了.msi就是Windows installer的数据包,把所有和安装文件相关的内容封装在一个包里。

      .zip是一个压缩包,解压之后即可,不需要安装

    • Cnpm、Nrm、Webpack

      安装完nodejs以后会自动安装npm,但是npm的镜像源是国外的站点,所以建议使用cnpm,或者把npm的镜像源设置为taobao镜像源也是可以的

      需要安装webpack 

    • Weex Toolkit

      安装weex的toolkit

      npm i -g weex-toolkit 
      weex -v // 查看当前weex工具版本
    • 使用工具WebStorm

    1.2 weex 跨终端前端框架

     

    Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

     

    初始化项目

    然后初始化 Weex 项目:

    $ weex create awesome-project
    

    执行完命令后,在 awesome-project 目录中已经为我们生成了标准项目结构。

    #开发

    进入项目所在路径,如果你在生成项目的时候选择了自动安装依赖,在进入项目后只需直接运行 npm start 就可以将项目完整跑起来,否则,你需要预先在项目中运行一下 npm install 安装项目所需依赖。

    预览效果图

    编译和运行

    默认情况下 weex create 命令并不初始化 iOS 和 Android 项目,你可以通过执行 weex platform add 来添加特定平台的项目。

    weex platform add ios
    weex platform add android
    

    由于网络环境的不同,安装过程可能需要一些时间,请耐心等待。如果安装失败,请确保自己的网络环境畅通。

    为了能在本地机器上打开 Android 和 iOS 项目,你应该配置好客户端的开发环境。对于 iOS,你应该安装并且配置好 Xcode。对于 Android,你应该安装并且配置好 Android Studio。当开发环境准备就绪后,运行下面的命令,可以在模拟器或真实设备上启动应用:

    weex run ios
    weex run android
    weex run web
    

    #调试

    weex-toolkit 还提供了强大的调试功能,只需要执行:

    weex debug
    

    这条命令会启动一个调试服务,并且在 Chrome (目前只支持基于 V8 引擎的桌面浏览器) 中打开调试页面。

    WEEX UI

    一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库

    官方文档:https://alibaba.github.io/weex-ui/#/cn/

    为提高开发效率,项目可使用weex-ui快速开发,选用的列表样式参考:

    https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/

    展开全文
  • Weex 前端框架介绍

    千次阅读 2016-09-28 14:54:58
    前言:一个月前曾经就开撸Weex,也没写博客,中间因为某些事情耽搁了。直到前几天重新拾起来,居然有一种不认识的感觉。故而,录下此篇。 什么是Weex阿里天施曾经这样说过:“从技术的发展趋势来看,“前端技术扩展...
  • weex框架入门

    千次阅读 2019-03-17 12:21:25
    前端开发一起交流QQ群:740034288。 互联网创业团队兴趣QQ群:792710437。 新建《团队合伙人》贴吧:https://tieba.baidu.com/f?kw=%E5%9B%A2%E9%98%9F%E5%90%88%E4%BC%99%E4%BA%BA&amp;fr=index。 ...htt...
  • Weex 是阿里研发的移动端框架,整体参考了vue, 尤大大作为顾问。 Weex简介Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。 ...
  • 跨平台开发框架 weex 上手

    千次阅读 2016-06-15 14:27:50
    跨平台开发框架 weex 上手 本机系统:deepin 15.2 weex官网传送门 无论什么跨平台框架,都是让你用一种语言间接的调用现有平台的功能,现在这一类框架层出不穷,weex是由阿里巴巴开源,从阿里巴巴一线技术中...
  • 很多公司都想把web端的项目在手机端做一套,但又不想找android和ios的开发人员,那样的话可能得不偿失。这就诞生了混合开发的Hybrid App,Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app...
  • Weex和React Native框架对比与选择

    千次阅读 2018-07-24 15:16:02
    Weex 阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款优秀的前端开源MVVM框架和深度结合; https://github.com/weexteam/article/issues/32 React Native: ...
  • Weex基于Vue2.0开发框架模板搭建

    万次阅读 2017-04-02 23:50:51
    目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且...
  • Weex Android加载本地图片及网络图片

    万次阅读 2016-09-30 16:57:32
    Weex Android加载本地图片及网络图片前言本篇本地图片加载目前仅适用于ImageLoader,如若是其他图片框架,则需要自己写适配规则。当然如果要适配Fresco,则需去研究一下WXImage的源代码,相信大家都有收获的。一、...
  • Weex视频教程课程目录: 第01节:Weex课程介绍 第02节:Weex开发环境安装(1) 第03节:Weex开发环境安装(2) 第04节:weex常用命令和热更新 第05节:Android Studio 开发设置 第06节:weex和vue的爱恨情仇 第07...
  • Weex&ReactNative对比

    千次阅读 2016-07-22 09:41:05
    我从13年左右开始接触vue,14年开始熟悉这个轻量的框架,并慢慢的推荐给了身边的朋友,当我得知手淘的weex是基于vue的时候,就有了想了解一下的冲动。在weex开源之前,我刚好有几个月的时间一直在致力于ReactNative...
  • weex项目实战篇(一)

    万次阅读 2019-09-29 12:46:42
    1. 前言通过前面四篇文章的介绍,相信大家对weex基本熟悉了,下面就开始动手做项目,一些细节问题,在项目实战中继续消化。2.开发工具和环境俗话说,工欲善其事必先利器,我选的IDE开发工具为webstorm,webstorm相信...
  • react native和weex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的应用的特点。你只要写一套业务逻辑,具体是...
  • RN & Weex 的比较

    千次阅读 2017-07-19 21:04:02
    Weex 、ReactNative 都是为解决App 不能及时更新、开发成本高这2个问题,而提出的解决方案。两方案解决思路基本类似,但 各自方案侧重点不同    开发模板 Weex使用开源的Vue.JS,使得其DSL模板直接使用Html...
  • 移动端跨平台开发从最初的hybrid到react-native、weex,再到最近Geogle新推出的flutter移动UI框架,体验和性能越来越接近原生应用,这里我们分析一下这几种开发方式的利弊。个人经验,不到位的地方还望不吝赐教。 ...
  • 移动APP开发框架总结

    千次阅读 2020-02-10 14:56:48
    一、移动APP开发框架 1、vux VUX- Vue 移动端 UI 组件库 2、Mint UI Mint UI - 基于 Vue.js 的移动端组件库 3、vant Vant- 轻量、可靠的移动端 Vue 组件库 4、weex Weex 是一个使用 Web 开发体验来开发高...
  • weex服务项目搭建

    万次阅读 2019-09-21 23:14:56
    2.服务项目搭建步骤前提需要安装好weex环境,具体参见前面文章:环境搭建地址 接下来讲解如何使用weex-toolkit构建项目:1)创建项目: 命令行到任意文件夹,输入如下指令weex init 执行指令后,会看到如图所示的...
1 2 3 4 5 ... 20
收藏数 6,930
精华内容 2,772
热门标签
关键字:

weex框架