精华内容
下载资源
问答
  • Weex

    千次阅读 2019-06-02 18:17:36
    Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。 快速开始 高性能 Weex 使用原生组件和原生模块,来最大化利用原生渲染的性能优势以及平台能力,所有的组件和模块都是可插拔、可扩展的。 ...

    Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

    快速开始 

    高性能

    Weex 使用原生组件和原生模块,来最大化利用原生渲染的性能优势以及平台能力,所有的组件和模块都是可插拔、可扩展的。

    跨平台

    你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现,但是它们都提供了相同的接口。

    贴近前端生态

    Weex 拥抱已有的 Web 生态,你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架,如 Vue 和 Rax,在未来或许还可以支持更多。

    被大规模的使用

    Weex 已经在许多超级 App 中大规模使用,一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台,以供 工业生产使用。

    开始构建你的 weex 应用

    快速开始

    展开全文
  • weex

    千次阅读 2017-08-25 14:15:28
    本期六篇文章目录 一. 阿里Weex框架快速体验与环境搭建 二. weex sdk集成到Android工程 ...三. weex服务项目搭建 ...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
     
    • 1
    • 1

    如图所示: 
    这里写图片描述 
    在安装结束后,你能通过在命令行窗口执行 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>
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

    weex tech_list.we
     
    • 1
    • 1

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

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

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

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

    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>
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

    weex tech_list.we
     
    • 1
    • 1

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

    4.其他

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

    5.一些书籍

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

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


    展开全文
  • WEEX

    千次阅读 2018-05-28 14:30:40
    一、WEEX
    一、WEEX
    展开全文
  • Xamarin.WeexApp:xamarin C#与Weexweex带到了xamarin平台
  • Weex工具包 Weex工具包是Weex开发的标准工具。 介绍 本文档适用于weex-toolkit 2.x版本。 有关weex-toolkit文档的旧版本,请转到。 致力于标准化Weex生态系统中的工具库。 它确保可以基于智能默认配置无缝连接各种...
  • 从源代码构建 安装gradlew 参见 建立Weex 运行gradle build Playground应用程序工件将位于“ playground / app / build”下 威克斯playgound 根据weex 0.24.0源码编译的weex Playground
  • weex module

    2018-04-26 11:47:11
    封装weex Module模块开发,实现原生功能,并且提供原生效果
  • 深入了解Weex

    2021-01-27 13:59:49
    本文以Weex为例分析一下混合应用,本文并非是介绍Weex是怎么使用的,如果想要了解怎么使用,不如了解一下 Eros的解决方案,主要想剖析一下Weex的原理,了解Weex的运行机制。 首先想聊一聊我们为什么选择Weex。上一篇...
  • weex 入门文档

    2018-01-29 11:57:43
    weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档weex 入门文档
  • weex android Demo

    2018-01-10 12:03:24
    weex android Demo weex android Demo weex android Demo
  • :artist_palette: 高品质的Weex演示 以下是运行此演示的简短步骤,您可以阅读此 尝试 打开 ,扫描下面的qrcode (无需针对android单独进行优化) 跑步 安装 $ npm install 运行网络 建立网页专业版 $ npm run ...
  • Weex 简介

    千次阅读 2019-09-30 16:17:47
    最近项目在改造,尝试使用weex代替原有的H5 和原生页面,提高系统运行效率。期间遇到了很多坑,后面会仔细讲讲,先来看下weex的基本信息。 一、什么是weex "weex是一个可以使用现代化的 Web 技术开发高性能原生...

    最近项目在改造,尝试使用Weex代替原有的H5 和原生页面,提高系统运行效率。期间遇到了很多坑,后面会仔细讲讲,先来看下Weex的基本信息。

    一、什么是weex

    "Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架",这是Weex官网对其的一句很简介明了的定义。Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。

    二、整体架构

    本地开发的web 页面,构建形成 Weex 的一个 JS bundle(native);在云端,开发者可以把生成的 JS bundle 部署上去,然后通过网络请求或预下发的方式传递到用户的移动应用客户端;在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎,并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践。

    1、Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎,来执行 JS bundle。

    2、Weex向各端的渲染层发送规范化的指令,调度客户端的native渲染和其它各种能力。

    3、我们在 iOS 下选择了 JavaScriptCore 内核,而在 Android 下选择了 UC 提供的 v8 内核。

    原理:
    1、将XML+CSS+JavaScript代码转换为JSBundle
    2、JSBundle传给JS Framework解析为Json格式的Virtual DOM
    3、客户端通过接收Virtual DOM渲染界面

     

     

    三、技术特点

    1、一次实现,多端适用

        使用Weex框架+ web开发语言和开发经验开发应用,可构建 Android、iOS 和 Web 应用三端统一的应用。

    2、支持的前端框架

        Weex并不强依赖在特定的框架上使用,但官方推荐使用的是vue.jsRax 前端框架,这俩种框架也是Weex 目前功能最全、最稳定的方案。在 WeexSDK v0.10.0 (发布于 2016 年 2 月 17 日)以及后续的版本中,集成了 v2 版本的 Vue.js。

     

    Vue 和 Rax

    •  Vue.js 是一个不断进化中的前端框架。
    • Rax 是提供类 React 语法和兼容性的前端框架。

    3、调试工具

    •  官方推荐使用Playground 来调试,预览weex页面,在 Playground 里,你可以打开各种示例。
    •  访问 Weex online playground. 在这个网站上,你可以浏览、修改、新建各种基于 Vue.js 的单页面例子,并用 WeexPlayground 应用扫码查看实时效果。
    • 同时weex 也提供了weex debug ,需要APP集成 weex sdk。weex debug 启动步骤如下:

           1、执行 weex debug 指令;   执行成功后会提示访问URL、端口等。   

        2、访问URL,会有一个debug 二维码

        3、使用继承了weex sdk 的APP引用扫码,链接APP和网页,就可以在调试网页。

       4、weex debug 支持对单个文件进行调试, 通过 weex debug [folder | file]  命令进行编译。

     

    四、weex和 web的平台差异

        虽然使用weex框架可以实现web , android 、ios 三端统一,但是它与纯web 开发有几点很明显的区别。

    1、weex环境中没有 DOM    

         weex的运行环境以原生应用为主,在 Android 和 iOS 环境中渲染出来的是原生的组件,不是 DOM Element。

    • 不支持 DOM 操作

        原生环境中不支持 Web API,没有 Element 、Event 、File 等对象。不支持选中元素,如 document.getElementById 、 document.querySelector 等;当然也不支持基于 DOM API 的程序库(如 jQuery)。

    • 有限的事件类型

        Weex支持在标签上绑定事件,和在浏览器中的写法一样,但是Weex 中的事件是由原生组件捕获并触发的,行为和浏览器中有所不同,事件中的属性也和 Web 中有差异。支持 Web 中的事件类型,详情请参考《通用事件》。同时,不区分事件的捕获阶段和冒泡阶段,相当于 DOM 0 级事件。

     2、Weex环境中没有BOM

         BOM(Browser Object Model),即浏览器对象模型,是浏览器环境为 javascript 提供的接口。Weex 在原生端并不基于浏览器运行,不支持浏览器提供的 BOM 接口。

    • 没有 window 、screen 对象

         因为没有BOM ,所以不支持供浏览器中的window, screen对象,获取设备的屏幕或环境信息,可以使用 WXEnvironment 变量。

    WXEnvironment备注
    weexVersionWeexSDK 的版本
    appName应用的名称
    appVersion应用的版本
    platform运行平台,可能的值是 Web 、Android 、iOS 之一
    osName系统的名称
    osVersion系统版本
    deviceWidth设备宽度
    deviceHeight设备高度
      // 获取屏幕高度
      this.scrollHeight = (750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight-140) ; 
    • 没有doucment 对象

        在浏览器中 document 表示了当前活动的文档模型,在 Android 和 iOS 环境中并没有这个对象,也不支持与其相关的 DOM 操作

    • 没有location,history,navigator 对象

        Weex 也提供了 navigator 模块来操作页面的跳转,使用方法参考《navigator 导航控制

    3、能够调用移动设备原生 API

        Weex 提供了clipboard navigator storage等模块来调用移动设备原生 API。同时,提供了横向扩展的能力,可以扩展原生模块,具体的扩展方法请参考《iOS 扩展》 和《Android 扩展

     

    参考资料

    weex 官网

    展开全文
  • weex框架 weex基于vue2.0开发框架,包括三端集成,组件库提供,weex api封装〜 目前Weex官网域名统计如下: https://weex.apache.org : Apache 官网地址,部署于 apache 仓库,国内访问速度较慢。 ...
  • 随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案。 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题...
  • weex 入门Demo

    2018-01-10 12:00:31
    .Weex 阿里巴巴 开源项目 传送门 weex 入门Demo Android IOS weex 移动端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,650
精华内容 9,460
关键字:

weex