精华内容
下载资源
问答
  • weex android Demo

    2018-01-10 12:03:24
    weex android Demo weex android Demo weex android Demo
  • Weex Android SDK 依赖库

    2018-07-02 14:00:19
    Weex Android 可修改的SDK源码,可直接作为依赖库导入项目,替代不可修改的weex-sdk maven库。这边已有两个线上项目在使用。
  • Weex Android交互篇

    千次阅读 2016-12-17 00:55:46
    [转载]Weex Android交互篇 原文: http://blog.csdn.net/mengzuixilou/article/details/52758443 什么是Weex Android交互? 我们理解的Weex Android交互就是we调用原生方法,原生调用we方法。针对于...

    [转载]Weex Android交互篇

    原文: http://blog.csdn.net/mengzuixilou/article/details/52758443

    什么是Weex Android交互?

    我们理解的Weex Android交互就是we调用原生方法,原生调用we方法。针对于这种理解,我们可能有些偏差。那就是只有we调用原生方法,而没有we调用原生方法。因为,Weex SDK 只提供渲染的功能,而不是有其他的功能,比如网络,图片和URL重定向。如果你要实现这些功能,你需要去实现它,利用Weex的扩展去实现。

    Weex扩展

    Weex 为我们提供了扩展机制,共提供了三类扩展:Module扩展、Component扩展和Adapter扩展。 
    这里写图片描述

    Module 扩展:

    非UI的特定功能。例如sendHttp、openURL 等。

    实现步骤:

    1、实现扩展: 
    这里写图片描述

    2、注册扩展: 
    这里写图片描述

    3、We调用: 
    这里写图片描述

    Component 扩展:

    实现特别功能的Native控件。例如:RichTextview,RefreshListview等。

    实现步骤:

    1、实现扩展: 
    这里写图片描述

    2、注册扩展: 
    同注册Module扩展。

    3、We调用: 
    这里写图片描述

    Adapter 扩展:

    Weex 对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片下载等。下图是一些可实现的Adapter扩展。 
    这里写图片描述

    实现步骤:

    1、实现扩展: 
    这里写图片描述

    2、注册扩展: 
    这里写图片描述

    3、We调用: 
    这里写图片描述

    真的Android原生不能调用we方法吗?

    非也,非也。当我们看过Weex Http接口和Storage接口就会发现,其实Android原生也是可以调用we方法的。而且,调用方法不止一种。方法一,采用类似Weex HTTP接口中OnHttpListener回调方法的实现,二是采用类似Storage接口中利用JSCall的方式实现。 
    想探究这个问题,请看下篇。我们将从Weex SDK源码本身来解读如何让Android原生调用we方法。

    参考文章: 
    https://github.com/weexteam/article/issues/27

    https://github.com/weexteam/article/issues/28


    展开全文
  • 这个BindingX还是挺好用的,因为有些控件weex原生写的话可能会存在一些问题,比如,我们做的一个滑动条,weex写好后,我们在客户端测试了一下,发现android端滑动起来不灵敏,ios灵敏是灵敏,但是会出现一不小心把...

    这个BindingX还是挺好用的,因为有些控件weex原生写的话可能会存在一些问题,比如,我们做的一个滑动条,weex写好后,我们在客户端测试了一下,发现android端滑动起来不灵敏,ios灵敏是灵敏,但是会出现一不小心把滑动条上面的原点滑没,

    接下来我就是详细教程:

    这是weex-ui的官网

    https://alibaba.github.io/weex-ui/#/cn/packages/wxc-slider-bar/

    进入官网的话你会看见一个是否安装四个大字,然后你就直接点击进去就行,

    然后里面往下翻就会看到android的集成方式!!!

    当你添加完依赖后,可能会报错

     

    这就说明你的工程里面,仓库这块有没配jcenter,

    如果你已经配置了但还是报错的话,你就将这个jcenter,换个位置

    你把jcenter仓库的位置放到前面试下

    这是我放的位置,是可以编译过去的!!!

    然后你就会发现可以编译了, 然后你就可以使用BindingX了!!!

    小白总结,希望对大家有用!!!

    展开全文
  • 这片文章讲述下,js如何调用android native的功能,及natvie如何主动调用js的函数。 weex已经提供了一些功能,但是有一些比如:获取mac地址、封装一些natvie的自带播放功能给js使用,则需要提供js调用native的功能;...

    第一篇文章中,已经粗略讲述了,安卓中集成weex sdk的方法;
    这种情况一般用于在安卓程序中,部分界面使用轻应用,所以集成weex来代替webview实现部分网页的功能;android回调weex android调用weex — weex android交互

    这片文章讲述下,js如何调用android native的功能,及natvie如何主动调用js的函数。
    weex已经提供了一些功能,但是有一些比如:获取mac地址、封装一些natvie的自带播放功能给js使用,则需要提供js调用native的功能;当然,natvie有时候做完一些事情后,也需要主动调用js函数,告诉js接下来的动作。

    **

    第一部分,js调用natvie

    **
    参考官网,添加wxmodule模块。

    总结一下 native中要改动两个文件,js中直接使用:
    **

    1.创建新的模块XXModule 继承WXModule

    **
    在此模块中增加接口,并增加注释;例如:

     public class MyModule extends WXModule {
    
      //run ui thread
      @JSMethod (uiThread = true)
      public void printLog(String msg) {
        Toast.makeText(mWXSDKInstance.getContext(),msg,Toast.LENGTH_SHORT).show();
      }
    
      //run JS thread
      @JSMethod (uiThread = false)
      public void fireEventSyncCall(){
       //implement your module logic here
      }
    }
    

    2.在application中注册此模块:

    public class WXApplication extends Application {
    
        @Override
        public void onCreate() {
            super.onCreate();
            WXSDKEngine.addCustomOptions("appName", "WXSample");
            WXSDKEngine.addCustomOptions("appGroup", "WXApp");
            WXSDKEngine.initialize(this,
                    new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build()
            );
            try {
          WXSDKEngine.registerModule("MyModule", WXEventModule.class);//这里注册MyModule
            } catch (WXException e) {
                e.printStackTrace();
            }
    

    **

    3.js中使用

    **

    <template>
      <div>
        <text onclick="click">testMyModule</text>
      </div>
    </template>
    
    <script>
      module.exports = {
        methods: {
          click: function() {
            weex.requireModule('MyModule').printLog("I am a weex Module");//这里使用MyModule中的printLog函数,并传递参数;
          }
        }
      }
    </script>
    

    第一部分到此为止,下面讲述,natvie如何调用js呢?
    **

    第二部分,natvie调用js

    **
    weex中提供了一个JSCallBack的机制,和webview的不同,webview的使用方式不在介绍。
    这里有个点,就是natvie要调用js,还是要知道调用js哪个函数,所以是需要js先调用natvie,并把回调的函数名字告诉native,然后native就可以在需要的时候进行回调了。

    下面的例子是:调用自定义的module模块中函数,获取mac地址,当获取到MAC地址后呢,回调js,js在进行toast提示。

    例如:

    var modal = weex.requireModule('MyModule');
    modal.getDeviceMac(function (string){
            //调用nativie中的方法打日志,得出回调成功了
            modal.printLog(string);
        });
    

    这里,调用了natvie的MyModule模块的getDeviceMac函数,并传递了回调函数,只不过函数没起名字,这没有什么影响。
    接下来看native如何处理:

    @JSMethod(uiThread = false)
        public void getDeviceMac(JSCallback jsCallback) {
            jsCallback.invoke(SystemUtils.getWlanMac());
        }
    

    可以看到,回调的方法是:jsCallback.invoke(),还有一个jsCallback.invokeAndKeepAlive();这个是一直回调,一般使用前者即可。
    其中invoke中可以携带参数(上面示例中带的string参数),定义如下:

    public interface JSCallback {
      /**
       * invoke javascript callback method, this method will destoryed after invoke.
       * @param data
       */
      void invoke(Object data);
    
      /**
       * invoke javascript callback method and keep callback alive for later use.
       * @param data
       */
      void invokeAndKeepAlive(Object data);
    }
    

    参考文章:Weex和Android之间交互传递

    展开全文
  • weex android实现本地图片加载image播放gif动画扩展module获取版本号 博客地址:http://blog.csdn.net/codingandroid/article/details/77719557
  • Weex 框架下,Weex 的动画需要屏蔽 CSS/JS 动画与 Android 动画系统的差异,并尽可能的达到60FPS。 本文阐述了在 Android 上实现高性能CSS/JS动画过程中所遇到的问题/相关数学知识及解决方案。本文使用的前端 ...

    本文来源于阿里云-云栖社区,原文点击这里


    背景

    在目前常见的交互方式中,动画扮演了一个重要的角色。

    Weex框架下,Weex 的动画需要屏蔽 CSS/JS 动画与 Android 动画系统的差异,并尽可能的达到60FPS。

    本文阐述了在 Android 上实现高性能CSS/JS动画过程中所遇到的问题/相关数学知识及解决方案。本文使用的前端 DSL 为 Weex vue 1.0或 Weex Vue 2.0。

    现状与问题

    在 Weex 环境下, 一个典型的动画在前端DSL中的写法如下:

    animation = weex.requireModule('animation')
    animation.transition(testEl, {
        styles: {
            color: '#FF0000',
            transform: 'translate(250px, 100px) rotate(60deg)',
            transformOrigin: 'center center'
        },
        duration: 800, //ms
        timingFunction: 'ease',
        delay: 0 //ms
        }, function () {
            modal.toast({ message: 'animation finished.' })
    })
    

    对于上述代码片段,Weex Android需要处理下述问题。

    transform 字段的解析

    为了符合传统意义上的前端的书写习惯,transform 字段没有使用JSON表示,而是使用了一个字符串表示。在 transform 里,逗号前后可能没有空格,也可能有多个空格,transform里的函数名称和参数的数据类型也不确定,且面临后期需求变更的可能性。

    对于复杂字符串的解析与处理,常见的方式是正则表达式。然而在此场景下使用正则表达式,面临如下困难:

    • 正则表达式在 Android 下性能较差,对于每秒60帧,每帧对数百个元素做动画的场景,正则表达式将会成为整个动画模块的性能瓶颈。
    • 正则表达式的可维护性很差,对于需求变更很不友好,经过需求变更及人员调整后,复杂的正则表达式往往无法维护,只能推导重写。

    Android 动画方案的选择

    在Android系统层面,存在Property Animation, View Animation, Drawable Animation三种动画体系,且三个体系互不兼容。Weex需要选择一个动画体系达到以下目的:

    • 将前端指定的 styles(如transform,color)和 timing-function 以合理的方式映射到 Android 端。
    • style 和 timing-function 对修改友好。
    • 可以使用 Android 手机的 GPU 能力提高动画帧率。

    3D动画的实现

    支持 rotateX, rotateY 属性,实现如下的 3d 动画效果:


    >>>展开全文

    展开全文
  • 最新的适用于android11的weex aar 去掉项目里的远程依赖“com.taobao.android:weex_sdk:0.28.0”改为aar依赖 最新的weex包域名是org.apache.weex,所以需要修改与weex相关的问题的import包
  • Weex Android初体验

    千次阅读 2016-09-28 15:37:33
    Weex SDK集成到Android工程Weex SDK集成到Android工程有两种方式
  • weex android 示例

    2018-04-08 13:40:18
    通过官方的示例,可以很简单地建立一个工程,然后添加android项目.接着就可以开始了.配置好gradle.这里的主要问题是在于js已经写好了,vue也写好了.但无法将js运行起来,后面看了别人的东西,才知道,要把编译的dist里的js...
  • weex Android

    2017-06-18 12:31:00
    ```weex run android? This command need to install weexpack. Install now? Yes{ Error: Cannot find module '../src/run/Web' at Function.Module._resolveFilename (module.js:469:15) at Function.M...
  • android_WEEX android端各种问题

    千次阅读 2017-04-18 11:04:55
    标题都是用来哄人哒! 遇到很多问题 基本都解决了 大家有什么需要可以进群问! android端 310884606 大家可以加下这个群  weex_android交流群 目前貌似群里就我一个人!
  • Weex Android 动画揭秘

    千次阅读 2017-08-18 14:18:52
    Weex 框架下,Weex 的动画需要屏蔽 CSS/JS 动画与 Android 动画系统的差异,并尽可能的达到60FPS。 本文阐述了在 Android 上实现高性能CSS/JS动画过程中所遇到的问题/相关数学知识及解决方案。本文使用的前端 ...
  • android+weex

    2018-10-24 20:17:06
    android + weex 开发移动端,实现多端运行,仅就android加载weex代码集成代码,供初学者参考
  • 本章介绍如何将Weex的项目导出Android,并实现Weex和Native的交互。 正文 导出Android项目 在项目中添加Android支持。在项目的目录下执行: weex platform add android 上述命令会在项目的platform...
  • 自己对于Weex源码学习的一些记录,帮助理解,如有错误请指出,部分图片以及描述来源于官方的源码解析文章,文末会附上链接。 一、简单概述 因为整个Weex SDK的内容很多,想要分析也不可能一行代码一行代码的写,...
  • 前言在你读本篇文章之前请确认您已经阅读 Weex Android SDK源码分析之界面渲染(上),否则建议您想阅读上篇文章有利于您更深刻的了解~
  • Weex Android Border绘制

    2016-09-21 09:42:09
    Weex Android Border绘制 在Android/iOS/H5开发中,为View/Component添加border是一个常见的需求。然而Android SDK并没有直接提供border的支持,需要开发者自行实现。本文首先阐述border问题的定义以及几种棘手的...
  • weex android 其实已经内置了zxing的扫描二维码的功能,我们需要做的就是将其封装成一个weex可以使用的module即可。 先贴代码结构图: 第一步,创建ScanModule.java package com.alibaba.weex; import ...
  • android11上使用weex

    2020-11-13 16:18:14
    这个aar是使用官网最新的代码打包的aar,使用这个aar可以解决weexandroid 11上适配的问题 1、去掉项目里的远程依赖“com.taobao.android:weex_sdk:0.28.0”改为aar依赖 2、最新的weex包域名是org.apache.weex,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,335
精华内容 4,134
关键字:

weexandroid