精华内容
下载资源
问答
  • 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

    千次阅读 2018-05-28 14:30:40
    一、WEEX
    一、WEEX
    展开全文
  • weex

    2019-05-08 18:08:51
    Weex开发之环境配置&快速创建项目 前言 本文参考官网文档Weex。 本文参考技术胖的《WEEX免费视频教程-从入门到放肆》 。 一、环境配置 第一步 下载和安装Node.js,并对其进行环境配置,如下图所示: ...

    Weex开发之环境配置&快速创建项目

    前言

    一、环境配置

    第一步

    • 下载和安装Node.js,并对其进行环境配置,如下图所示:

       

    • 安装完成后,在命令行工具中检测是否安装成功,如下图所示:

    //node检测
    node -v
    
    //npm检测
    npm -v
    

    第二步

    • 全局安装weex-toolkit,使用如下命令:
    npm install weex-toolkit -g
    
    • 这条命令会向你命令行环境中注册一个weex命令。

    • 遇到的问题:

       

    • 解决方案:

      • 图中提到这个问题跟npm无关,是网络连接的问题,所以,重新输入如下命令即可:
    npm install weex-toolkit -g
    
    • 遇到的问题:

       

    • 解决方案:

      • 使用如下命令:
    weex -v
    

    检测weex-toolkit是否安装成功,只弹出版本号,说明安装成功了。但是如图中所示,有这样的一句话:

    npm 5 is not supported yet !
    

    说明现在的npm版本和weex-toolkit不兼容。根据图中提示可知,只需将npm版本从5降为4即可,输入如下命令:

    npm i npm@4 -g
    

    待运行完毕,再使用如下命令进行检测:

    weex -v
    

    如下图所示,说明安装成功。

     

    二、快速创建Weex项目

    第一步

    使用如下命令来创建一个空的模板项目:

    weex create
    

    比如要创建一个命名为WanAndroid-Weex的项目,因为使用如下命令会报错:

    weex create WanAndroid-Weex
    

    如下图所示:

    如上图所示,新建项目的命名不能包含大写字母,所以,需要新建一个命名为WanAndroid-Weex的文件夹,并在该文件夹中,右键鼠标,选择“在此处打开命令窗口”,并输入如下命名:

    weex create wanandroid-weex
    

    按下回车键即可。

    第二步

    • 使用如下命令,进入刚刚创建的wanandroid-weex文件夹:
    cd wanandroid-weex
    

    然后使用如下命令安装依赖:

    npm install
    

    然后执行如下命令:

    npm start
    

    然后,工具会启动一个本地的web服务,监听8081端口,打开http://localhost:8081查看页面在Web下的渲染效果,源代码src/目录中,可以像一个普通的Vue.js项目一样来开发。

     

    • 如果输入的是http://localhost:8081/web/preview.html,则是如下图的渲染效果。

    三、使用Visual Studio Code打开Weex项目

    第一步

    使用Visual Studio Code工具来打开wanandroid-weex项目,选择VS菜单栏的“文件”选项,点击“选择文件夹”,选择wanandroid-weex项目文件夹即可。

    第二步

    • 选择VS菜单栏的“查看”选项,选择“继承终端”,即可在VS下方,出现一个命令窗口,如下图所示:

       

    此时,输入如下命令:

    npm start
    

    运行,并在Web下出现渲染效果。
    此时,VS里面的命令窗口如下图所示:

     

    此时,无论如何操作,命令窗口都不会有反应,这是因为VS和Google浏览器连接的原因,只需按下Ctrl + C,立即会出现如下的操作命令:

     

    此时,只需输入如下命令:

    y
    

    按下回车键即可。

    • 实现热更新效果,只需在修改wanandroid-weex项目后,比如修改wanandroid-weex项目中的index.vue文件里面的
    The environment is ready!
    

    改为,如下所示:

    jweihao !
    

    再按下Ctrl + S保存即可,Google浏览器就会显示出修改后的渲染效果,如下图所示:

     

    三、使用Android Studio打开Weex项目

    第一步

    • 下载并安装Android StudioJava,然后对它们进行环境配置。

    • 使用Android Studio ,打开模拟器或者真机。

    第二步

    • 默认情况下,weex create命令并不初始化AndroidIOS项目,所以需要执行weex platform add来添加特定平台的项目,在VS命令窗口中输入如下命令:
    weex platform add android
    

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

    再输入如下命令:

    weex run android
    

    此时,模拟器启动,显示渲染效果,如下图所示:

     

    第三步

    • 因为使用weex platform add android命令时,会在wanandroid-weex目录下生成\platform\android文件夹,里面保存着该项目中Android端的源码。

    • 打开Android Studio ,并选择android文件夹,运行即可。

    • 因为Android Studio 3.0使用的gradle版本是gradle-4.4-all,而wanandroid-weex项目中使用的是gradle-2.14.1-all版本,所以,如果在本地没有这个包,会显示在下载状态,除非翻墙下载,不然会很慢,可以在这里gradle-2.14.1-all ,密码是:3noj

    • 下载完成后,解压,并将该文件夹放置如下路径中:

    C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv
    

    Administrator是自己的用户名,8bnwg5hd3w55iofp58khbp6yv是随机生成的。

    • 打开Android Studio 菜单栏上的“File”选项,然后是“Setting”选项,在输入框输入“gradle”并按下回车键,选择“Use local gradle distribution”选项,然后选择如下路径,按下Android Studio 菜单栏上的“Sync Project with Gradle Files”按钮即可:
    C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv\gradle-2.14.1
    

    运行,在Android Studio中会出现如下图所示的升级提示:

     

    此时,切不可点击Update升级,不然又会报错,点击Don′t remind me again for this project按钮即可。

    • 使用Android Studio 运行wanandroid-weex项目,然后在VS里面修改项目,按Ctrl + S保存后,可以发现,并没有热更新的渲染效果。

    四、总结

    • Weex开发项目渲染效果方式有三种:
      • 在Visual Studio Code 中,使用npm start命令,在Web端实现渲染效果,修改,并按下Ctrl + S保存,可以实现热更新功能。
      • 在Visual Studio Code 中,使用weex run android命令,在Android端实现渲染效果,修改,并按下Ctrl + S保存,可以实现热更新功能。
      • 在Android Studio 中,打开并运行项目\platform文件夹里面的Android代码,运行,此时,在VS里面修改代码。并按下Ctrl + S保存,并不能实现热更新效果。
    展开全文
  • weex init 与weex create

    2020-12-26 03:21:37
    <div><p>请问这两个有什么却别?如果用init创建工程,就没办法platform add Android/IOS,请问如何支持?</p><p>该提问来源于开源项目:apache/incubator-weex-cli</p></div>
  • weex android Demo

    2018-01-10 12:03:24
    weex android Demo weex android Demo weex android Demo
  • weex 入门Demo

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

    热门讨论 2016-10-08 16:31:54
    weex demo
  • WEEX系列 WEEX入门

    2017-11-16 06:41:18
    和一步一起从前端视角聊一聊WEEX WEEX是一套构建高性能、可扩展的原生应用跨平台解决方案。就一个字吊。 通过使用有限的类HTML标签、阉割的CSS及JS基于VUE语法来快速构建原生应用。一次编写多端运行,可以使用相同的...
        

    和一步一起从前端视角聊一聊WEEX

    WEEX是一套构建高性能、可扩展的原生应用跨平台解决方案。就一个字

    通过使用有限的类HTML标签阉割的CSSJS基于VUE语法来快速构建原生应用。一次编写多端运行,可以使用相同的 API 开发 Web,Android 和 iOS 应用。

    优势

    官网给出三点:1、体积小,语法简单 2、可扩展 3、高性能
    1、简单
    体积小不小我不知道,但是语法确实很简单。WEEX提供了10几个内建组件和10几个内建模块,简单读一读就可以开发应用程序。
    2、可扩展
    VueJS的亮点之一就是组件化、模块化, WEEX同样继承了其优点,基于内建组件,我们可以开发扩展自己的组件库。
    3、高性能
    WEEX本身对加载时间和资源占用进行了优化。站在巨人的肩膀上,我们也很容易开发出高性能的APP。
    4、开发成本低
    一个前端搞定三端。

    原理

    weex-principle.png

    我们使用WEEX 提供的 template、script、style 三个标签来构建页面或者组件,然后通过 webpack 打包成 JS Bundle。我们可以把 JS Bundle 部署到服务器上实现热更新。JS 引擎运行这些Bundle实现与UI线程通信,达到和原生应用相同的体验效果。我们只需关心如何开发页面,其他工作WEEX已经替我们做了。

    Hello World

    语法是不是很熟悉。
    weex-helloworld.gif

    其他

    WEEX很好,但是~上手还真挺难的,因为开源时间较短,WEEX社区还不是很强大,文档也比较坑爹。因此接下来请和一步一起踩踩坑吧。

    NEXT

    环境搭建

    欢迎大家指正批评、或留言。
    展开全文
  • weex入门

    2020-08-06 09:09:10
    Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。 Weex 渲染引擎与...
  • <ul><li>weex-toolkit verison (Run <code>weex -v)</li><li>platform (Win/Mac/Ubuntu..)</li></ul> <h2>The key error stack message. <h2>Steps to reproduce the problem.(Maybe a ...
  • 随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案。 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题...
  • weex 选择器 weex picker weex-x-picker

    千次阅读 热门讨论 2018-08-08 14:42:49
    weex-x-picker weex-x-picker 支持 single(单选),area(区域),section(区间),date(日期),time(时间)。 使用文档,稍后更新
  • Weex A framework for building Mobile cross-platform UI. Join Us Join us through mailing list. Convenience Distribution Since 0.28.0, Weex would publish two convince binary in each release for ...
  • Weex 简介

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

    2019-10-06 15:26:22
    Weex 初探 Weex 介绍 Weex 是阿里于 2016 年开源的一款开发框架,它的介绍是: Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。 它使用了 Web 技术来开发 Android、IOS 应用,从而达到更快的迭代速度,...
  • 开发Weex

    2020-04-24 10:12:12
    1、了解weex 1.1首先给大家介绍一下weex weex之前叫做WebApp 去掉了bApp 加上了ex 1.2开发自己的App 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit, 你也可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,137
精华内容 2,054
关键字:

weex